diff --git a/example/src/SimpleStack.js b/example/src/SimpleStack.js index 1f10eea..a73c995 100644 --- a/example/src/SimpleStack.js +++ b/example/src/SimpleStack.js @@ -80,6 +80,7 @@ export default createStackNavigator( // these are the defaults cardShadowEnabled: true, cardOverlayEnabled: false, + // headerTransitionPreset: 'uikit', } ); diff --git a/src/views/StackView/StackViewStyleInterpolator.js b/src/views/StackView/StackViewStyleInterpolator.js index 0e3a7bf..817eef2 100644 --- a/src/views/StackView/StackViewStyleInterpolator.js +++ b/src/views/StackView/StackViewStyleInterpolator.js @@ -124,24 +124,60 @@ function forFadeFromBottomAndroid(props) { const { first, last } = interpolate; const index = scene.index; - const inputRange = [first, index, last - 0.01, last]; + const inputRange = [first, index, last]; const opacity = position.interpolate({ - inputRange, - outputRange: [0, 1, 1, 0], + inputRange: [first, first + 0.5, first + 0.9, index, last], + outputRange: [0, 0.25, 0.7, 1, 0], extrapolate: 'clamp', }); + const height = layout.initHeight; + const maxTranslation = height * 0.08; const translateY = position.interpolate({ - inputRange, - outputRange: [50, 0, 0, 0], + inputRange: [first, index, last], + outputRange: [maxTranslation, 0, 0], extrapolate: 'clamp', }); - const translateX = 0; return { opacity, - transform: [{ translateX }, { translateY }], + transform: [{ translateY }], + }; +} + +function forFadeToBottomAndroid(props) { + const { layout, position, scene } = props; + + if (!layout.isMeasured) { + return forInitial(props); + } + const interpolate = getSceneIndicesForInterpolationInputRange(props); + + if (!interpolate) return { opacity: 0 }; + + const { first, last } = interpolate; + const index = scene.index; + const inputRange = [first, index, last]; + + const opacity = position.interpolate({ + inputRange: [first, index, last], + outputRange: [0, 1, 0], + extrapolate: 'clamp', + }); + + const height = layout.initHeight; + const maxTranslation = height * 0.08; + + const translateY = position.interpolate({ + inputRange: [first, index, last], + outputRange: [maxTranslation, 0, 0], + extrapolate: 'clamp', + }); + + return { + opacity, + transform: [{ translateY }], }; } @@ -175,5 +211,6 @@ export default { forHorizontal, forVertical, forFadeFromBottomAndroid, + forFadeToBottomAndroid, forFade, }; diff --git a/src/views/StackView/StackViewTransitionConfigs.js b/src/views/StackView/StackViewTransitionConfigs.js index 9b4e5f8..e8d6954 100644 --- a/src/views/StackView/StackViewTransitionConfigs.js +++ b/src/views/StackView/StackViewTransitionConfigs.js @@ -56,11 +56,11 @@ const FadeInFromBottomAndroid = { const FadeOutToBottomAndroid = { // See http://androidxref.com/7.1.1_r6/xref/frameworks/base/core/res/res/anim/activity_close_exit.xml transitionSpec: { - duration: 230, - easing: Easing.in(Easing.poly(4)), // accelerate + duration: 150, + easing: Easing.in(Easing.linear), // accelerate timing: Animated.timing, }, - screenInterpolator: StyleInterpolator.forFadeFromBottomAndroid, + screenInterpolator: StyleInterpolator.forFadeToBottomAndroid, }; function defaultTransitionConfig(