From 81d8d910853db426bf5ed78c9e77b88b537c4bb5 Mon Sep 17 00:00:00 2001
From: Neo <nihgwu@live.com>
Date: Tue, 3 Oct 2017 16:54:19 -0500
Subject: [PATCH] add doc for transitionConfig (#1827)

* add doc for transitionConfig

* address review
---
 docs/api/navigators/StackNavigator.md | 42 +++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/docs/api/navigators/StackNavigator.md b/docs/api/navigators/StackNavigator.md
index 11889ba..f33b540 100644
--- a/docs/api/navigators/StackNavigator.md
+++ b/docs/api/navigators/StackNavigator.md
@@ -173,3 +173,45 @@ The navigator component created by `StackNavigator(...)` takes the following pro
 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.
 
 You can view these examples directly on your phone by visiting [our expo demo](https://exp.host/@react-navigation/NavigationPlayground).
+
+#### Modal StackNavigator with Custom Screen Transitions
+
+ ```js
+const ModalNavigator = StackNavigator(
+  {
+    Main: { screen: Main },
+    Login: { screen: Login },
+  },
+  {
+    headerMode: 'none',
+    mode: 'modal',
+    navigationOptions: {
+      gesturesEnabled: false,
+    },
+    transitionConfig: () => ({
+      transitionSpec: {
+        duration: 300,
+        easing: Easing.out(Easing.poly(4)),
+        timing: Animated.timing,
+      },
+      screenInterpolator: sceneProps => {
+        const { layout, position, scene } = sceneProps;
+        const { index } = scene;
+
+        const height = layout.initHeight;
+        const translateY = position.interpolate({
+          inputRange: [index - 1, index, index + 1],
+          outputRange: [height, 0, 0],
+        });
+
+        const opacity = position.interpolate({
+          inputRange: [index - 1, index - 0.99, index],
+          outputRange: [0, 1, 1],
+        });
+
+        return { opacity, transform: [{ translateY }] };
+      },
+    }),
+  }
+);
+ ```