custom modal transition

Author: nihgwu

app/models/router.js

@@ -32,7 +32,7 @@ export default {
           })
           // debounce, see https://github.com/react-community/react-navigation/issues/271
           if (payload.type === 'Navigation/NAVIGATE') {
-            yield call(delay, 250)
+            yield call(delay, 500)
           }
         }
       },

app/router.js

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react'
-import { BackHandler } from 'react-native'
+import { BackHandler, Animated, Easing } from 'react-native'
 import {
   StackNavigator,
   TabNavigator,
@@ -49,6 +49,30 @@ const AppNavigator = StackNavigator(
     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 }] }
+      },
+    }),
   }
 )