Add support for custom transitionConfig (#1187)

* Fix transitionConfig regression

* Fix flow

* Add doc

* Update StackNavigator.md

* Update StackNavigator.md

* Update CardStackTransitioner.js

* Update TypeDefinition.js

packages/react-navigation/docs/api/navigators/StackNavigator.md

@@ -85,6 +85,7 @@ Visual options:
   - `screen` - Each screen has a header attached to it and the header fades in and out together with the screen. This is a common pattern on Android.
   - `none` - No header will be rendered.
 - `cardStyle` - Use this prop to override or extend the default style for an individual card in stack.
+- `transitionConfig` - Function to return an object that overrides default screen transitions.
 - `onTransitionStart` - Function to be invoked when the card transition animation is about to start.
 - `onTransitionEnd` - Function to be invoked once the card transition animation completes.
 

packages/react-navigation/src/TypeDefinition.js

@@ -209,6 +209,7 @@ export type NavigationStackViewConfig = {
   headerMode?: HeaderMode,
   headerComponent?: ReactClass<HeaderProps<*>>,
   cardStyle?: Style,
+  transitionConfig?: () => TransitionConfig,
   onTransitionStart?: () => void,
   onTransitionEnd?: () => void,
 };
@@ -401,6 +402,17 @@ export type NavigationTransitionSpec = {
   timing?: (value: AnimatedValue, config: any) => any,
 };
 
+/**
+ * Describes a visual transition from one screen to another.
+ */
+export type TransitionConfig = {
+  // The basics properties of the animation, such as duration and easing
+  transitionSpec?: NavigationTransitionSpec,
+  // How to animate position and opacity of the screen
+  // based on the value generated by the transitionSpec
+  screenInterpolator?: (props: NavigationSceneRendererProps) => Object,
+};
+
 export type NavigationAnimationSetter = (
   position: AnimatedValue,
   newState: NavigationState,

packages/react-navigation/src/navigators/StackNavigator.js

@@ -30,6 +30,7 @@ export default (
     headerMode,
     mode,
     cardStyle,
+    transitionConfig,
     onTransitionStart,
     onTransitionEnd,
     navigationOptions,
@@ -55,6 +56,7 @@ export default (
       headerMode={headerMode}
       mode={mode}
       cardStyle={cardStyle}
+      transitionConfig={transitionConfig}
       onTransitionStart={onTransitionStart}
       onTransitionEnd={onTransitionEnd}
     />

packages/react-navigation/src/views/CardStack.js

@@ -28,10 +28,9 @@ import type {
   NavigationStackScreenOptions,
   HeaderMode,
   Style,
+  TransitionConfig,
 } from '../TypeDefinition';
 
-import type { TransitionConfig } from './TransitionConfigs';
-
 import TransitionConfigs from './TransitionConfigs';
 
 const emptyFunction = () => {};

packages/react-navigation/src/views/CardStackTransitioner.js

@@ -9,8 +9,6 @@ import Transitioner from './Transitioner';
 import TransitionConfigs from './TransitionConfigs';
 import Header from './Header';
 
-import type { TransitionConfig } from './TransitionConfigs';
-
 import type {
   NavigationAction,
   NavigationSceneRenderer,
@@ -21,6 +19,7 @@ import type {
   NavigationRouter,
   HeaderMode,
   Style,
+  TransitionConfig,
 } from '../TypeDefinition';
 
 const NativeAnimatedModule = NativeModules &&
@@ -104,8 +103,9 @@ class CardStackTransitioner extends Component<DefaultProps, Props, void> {
       headerMode,
       mode,
       router,
-      style,
       cardStyle,
+      transitionConfig,
+      style,
     } = this.props;
     return (
       <CardStack
@@ -115,6 +115,7 @@ class CardStackTransitioner extends Component<DefaultProps, Props, void> {
         mode={mode}
         router={router}
         cardStyle={cardStyle}
+        transitionConfig={transitionConfig}
         style={style}
         {...props}
       />

packages/react-navigation/src/views/TransitionConfigs.js

@@ -3,24 +3,13 @@
 import { Animated, Easing, Platform } from 'react-native';
 
 import type {
-  NavigationSceneRendererProps,
   NavigationTransitionProps,
   NavigationTransitionSpec,
+  TransitionConfig,
 } from '../TypeDefinition';
 
 import CardStackStyleInterpolator from './CardStackStyleInterpolator';
 
-/**
- * Describes a visual transition from one screen to another.
- */
-export type TransitionConfig = {
-  // The basics properties of the animation, such as duration and easing
-  transitionSpec?: NavigationTransitionSpec,
-  // How to animate position and opacity of the screen
-  // based on the value generated by the transitionSpec
-  screenInterpolator?: (NavigationSceneRendererProps) => Object,
-};
-
 // Used for all animations unless overriden
 const DefaultTransitionSpec = ({
   // The following options are meant to mimic the nav animations of iOS 10