Pass TransitionProps to `configureTransition` for <NavigationTransitioner />

Summary:
This follows up the PR https://github.com/facebook/react-native/pull/8306

= Changes

1. Provides the TransitionProps (current and previous) to the function
`configureTransition`.

2. Adds a new member `timing` to `NavigationTransitionSpec`.

= Why

1. Helps people to customize the animation between transitions
2. Helps people to migrate from the deprecated `applyAnimation` prop.

Reviewed By: ericvicenti

Differential Revision: D3470802

fbshipit-source-id: be49becccd53aed7bc57093da1c7dae20153febd

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<any, Props, State> {
@@ -126,7 +130,10 @@ class NavigationTransitioner extends React.Component<any, Props, State> {
 
     // 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<any, Props, State> {
       ...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<any, Props, State> {
 
     if (nextProps.navigationState.index !== this.props.navigationState.index) {
       animations.push(
-        Animated.timing(
+        timing(
           position,
           {
             ...transitionSpec,

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;