diff --git a/Libraries/NavigationExperimental/NavigationTransitioner.js b/Libraries/NavigationExperimental/NavigationTransitioner.js index 22f90e749..d3aabc5a3 100644 --- a/Libraries/NavigationExperimental/NavigationTransitioner.js +++ b/Libraries/NavigationExperimental/NavigationTransitioner.js @@ -24,12 +24,15 @@ import type { NavigationLayout, NavigationScene, NavigationState, - NavigationTransitionConfigurator, NavigationTransitionProps, + NavigationTransitionSpec, } from 'NavigationTypeDefinition'; type Props = { - configureTransition: NavigationTransitionConfigurator, + configureTransition: ( + a: NavigationTransitionProps, + b: ?NavigationTransitionProps, + ) => NavigationTransitionSpec, navigationState: NavigationState, onTransitionEnd: () => void, onTransitionStart: () => void, @@ -49,6 +52,7 @@ const {PropTypes} = React; const DefaultTransitionSpec = { duration: 250, easing: Easing.inOut(Easing.ease), + timing: Animated.timing, }; class NavigationTransitioner extends React.Component { @@ -126,7 +130,10 @@ class NavigationTransitioner extends React.Component { // get the transition spec. const transitionUserSpec = nextProps.configureTransition ? - nextProps.configureTransition() : + nextProps.configureTransition( + this._transitionProps, + this._prevTransitionProps, + ) : null; const transitionSpec = { @@ -134,10 +141,13 @@ class NavigationTransitioner extends React.Component { ...transitionUserSpec, }; + const {timing} = transitionSpec; + delete transitionSpec.timing; + progress.setValue(0); const animations = [ - Animated.timing( + timing( progress, { ...transitionSpec, @@ -148,7 +158,7 @@ class NavigationTransitioner extends React.Component { if (nextProps.navigationState.index !== this.props.navigationState.index) { animations.push( - Animated.timing( + timing( position, { ...transitionSpec, diff --git a/Libraries/NavigationExperimental/NavigationTypeDefinition.js b/Libraries/NavigationExperimental/NavigationTypeDefinition.js index 05bf9bb41..dd4d9020b 100644 --- a/Libraries/NavigationExperimental/NavigationTypeDefinition.js +++ b/Libraries/NavigationExperimental/NavigationTypeDefinition.js @@ -94,6 +94,8 @@ export type NavigationTransitionSpec = { duration?: number, // An easing function from `Easing`. easing?: () => any, + // A timing function such as `Animated.timing`. + timing?: (value: NavigationAnimatedValue, config: any) => any, }; // Functions. @@ -111,5 +113,3 @@ export type NavigationSceneRenderer = ( export type NavigationStyleInterpolator = ( props: NavigationSceneRendererProps, ) => Object; - -export type NavigationTransitionConfigurator = () => NavigationTransitionSpec;