Expose onTransitionStart/End props to StackNavigator (#230)

* Add onTransitionStart/End options to StackNavigator 'stackConfig'

* Add documentation for onTransitionStart/End options

* Define onTransitionStart/End props optional

docs/api/navigators/StackNavigator.md

@@ -85,6 +85,8 @@ 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.
+- `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.
 
 
 ### Screen Navigation Options
@@ -135,12 +137,12 @@ The navigator component created by `StackNavigator(...)` takes the following pro
  const SomeStack = StackNavigator({
    // config
  });
- 
+
  <SomeStack
    screenProps={/* these will get passed to the screen components */}
  />
  ```
- 
+
 ### Examples
 
 See the examples [SimpleStack.js](https://github.com/react-community/react-navigation/tree/master/examples/NavigationPlayground/js/SimpleStack.js) and [ModalStack.js](https://github.com/react-community/react-navigation/tree/master/examples/NavigationPlayground/js/ModalStack.js) which you can run locally as part of the [NavigationPlayground](https://github.com/react-community/react-navigation/tree/master/examples/NavigationPlayground) app.

src/TypeDefinition.js

@@ -261,7 +261,9 @@ export type NavigationStackViewConfig = {
   mode?: 'card' | 'modal',
   headerMode?: HeaderMode,
   headerComponent?: ReactClass<HeaderProps>,
-  cardStyle?: Style
+  cardStyle?: Style,
+  onTransitionStart?: () => void,
+  onTransitionEnd?: () => void
 };
 
 export type NavigationStackRouterConfig = {

src/navigators/StackNavigator.js

@@ -28,6 +28,8 @@ export default (routeConfigMap: NavigationRouteConfigMap, stackConfig: StackNavi
     headerMode,
     mode,
     cardStyle,
+    onTransitionStart,
+    onTransitionEnd,
     navigationOptions,
   } = stackConfig;
   const stackRouterConfig = {
@@ -44,6 +46,8 @@ export default (routeConfigMap: NavigationRouteConfigMap, stackConfig: StackNavi
       headerMode={headerMode}
       mode={mode}
       cardStyle={cardStyle}
+      onTransitionStart={onTransitionStart}
+      onTransitionEnd={onTransitionEnd}
     />
   )), containerOptions);
 };

src/views/CardStack.js

@@ -49,6 +49,8 @@ type Props = {
   navigation: NavigationScreenProp<NavigationState, NavigationAction>,
   router: NavigationRouter,
   cardStyle?: any,
+  onTransitionStart?: () => void,
+  onTransitionEnd?: () => void,
   style: any,
   gestureResponseDistance?: ?number,
   /**
@@ -163,6 +165,8 @@ class CardStack extends React.Component<DefaultProps, Props, void> {
         navigation={this.props.navigation}
         render={this._render}
         style={this.props.style}
+        onTransitionStart={this.props.onTransitionStart}
+        onTransitionEnd={this.props.onTransitionEnd}
       />
     );
   }