Rewrite stack navigator

example/.eslintrc

@@ -5,8 +5,10 @@
     {
       'import/core-modules':
         [
+          'expo-asset',
           'react-navigation-stack',
           'react-native-gesture-handler',
+          'react-native-reanimated',
           'react-native-vector-icons',
         ],
     },

example/App.js

@@ -14,32 +14,41 @@ import { List, Divider } from 'react-native-paper';
 
 import FullScreen from './src/FullScreen';
 import SimpleStack from './src/SimpleStack';
+import WipeStack from './src/WipeStack';
 import ImageStack from './src/ImageStack';
 import TransparentStack from './src/TransparentStack';
 import ModalStack from './src/ModalStack';
+import ModalPresentation from './src/ModalPresentation';
 import LifecycleInteraction from './src/LifecycleInteraction';
 import GestureInteraction from './src/GestureInteraction';
 import SwitchWithStacks from './src/SwitchWithStacks';
 import StackWithDrawer from './src/StackWithDrawer';
 import HeaderPreset from './src/HeaderPreset';
 import {
   HeaderBackgroundDefault,
-  HeaderBackgroundTranslate,
   HeaderBackgroundFade,
 } from './src/HeaderBackgrounds';
 
 // Comment the following two lines to stop using react-native-screens
 import { useScreens } from 'react-native-screens';
 
-// Uncomment the following line to force RTL. Requires closing and re-opening
+useScreens(true);
+
+// Change `false` to `true` to force RTL. Requires closing and re-opening
 // your app after you first load it with this option enabled.
 I18nManager.forceRTL(false);
 
 const data = [
   { component: SimpleStack, title: 'Simple', routeName: 'SimpleStack' },
   { component: HeaderPreset, title: 'UIKit Preset', routeName: 'UIKit' },
+  { component: WipeStack, title: 'Wipe Preset', routeName: 'Wipe' },
   { component: ImageStack, title: 'Image', routeName: 'ImageStack' },
   { component: ModalStack, title: 'Modal', routeName: 'ModalStack' },
+  {
+    component: ModalPresentation,
+    title: 'Modal (iOS style)',
+    routeName: 'ModalPresentation',
+  },
   { component: FullScreen, title: 'Full Screen', routeName: 'FullScreen' },
   {
     component: LifecycleInteraction,
@@ -68,19 +77,14 @@ const data = [
   },
   {
     component: HeaderBackgroundDefault,
-    title: 'Header background (default transition)',
+    title: 'Header background (UIKit transition)',
     routeName: 'HeaderBackgroundDefault',
   },
   {
     component: HeaderBackgroundFade,
     title: 'Header background (fade transition)',
     routeName: 'HeaderBackgroundFade',
   },
-  {
-    component: HeaderBackgroundTranslate,
-    title: 'Header background (translate transition)',
-    routeName: 'HeaderBackgroundTranslate',
-  },
 ];
 
 // Cache images
@@ -145,7 +149,6 @@ const Root = createStackNavigator(
   }
 );
 
-useScreens();
 export default createAppContainer(Root);
 
 // Uncomment this to test immediate transitions

example/package.json

@@ -9,19 +9,23 @@
     "ios": "expo start --ios"
   },
   "dependencies": {
-    "@react-navigation/core": "3.4.1",
+    "@react-navigation/core": "3.4.2",
     "@react-navigation/native": "^3.4.1",
-    "expo": "^33.0.0",
+    "expo": "^33.0.7",
     "expo-asset": "^5.0.1",
     "expo-constants": "~5.0.1",
     "hoist-non-react-statics": "^3.3.0",
     "react": "16.8.3",
     "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
     "react-native-paper": "^2.15.2",
-    "react-navigation-drawer": "^1.2.1",
-    "react-navigation-tabs": "*"
+    "react-navigation-drawer": "^2.0.0",
+    "react-navigation-tabs": "2.2.0"
   },
   "devDependencies": {
     "babel-plugin-module-resolver": "^3.2.0"
+  },
+  "resolutions": {
+    "react-native-safe-area-view": "0.14.6",
+    "react-native-screens": "1.0.0-alpha.23"
   }
 }

example/src/HeaderBackgrounds.js

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { StyleSheet, View, Text } from 'react-native';
-import { createStackNavigator } from 'react-navigation-stack';
+import {
+  createStackNavigator,
+  TransitionPresets,
+  HeaderStyleInterpolators,
+} from 'react-navigation-stack';
 
 function createHeaderBackgroundExample(options = {}) {
   return createStackNavigator(
@@ -19,7 +23,7 @@ function createHeaderBackgroundExample(options = {}) {
         navigationOptions: {
           headerTitle: 'Login Screen',
           headerTintColor: '#fff',
-          headerBackground: (
+          headerBackground: () => (
             <View style={{ flex: 1, backgroundColor: '#FF0066' }} />
           ),
         },
@@ -38,7 +42,7 @@ function createHeaderBackgroundExample(options = {}) {
         navigationOptions: {
           headerTitle: 'Games Screen',
           headerTintColor: '#fff',
-          headerBackground: (
+          headerBackground: () => (
             <View style={{ flex: 1, backgroundColor: '#3388FF' }} />
           ),
         },
@@ -89,12 +93,20 @@ function createHeaderBackgroundExample(options = {}) {
     }
   );
 }
-export const HeaderBackgroundDefault = createHeaderBackgroundExample();
-export const HeaderBackgroundTranslate = createHeaderBackgroundExample({
-  headerBackgroundTransitionPreset: 'translate',
+export const HeaderBackgroundDefault = createHeaderBackgroundExample({
+  defaultNavigationOptions: {
+    ...TransitionPresets.SlideFromRightIOS,
+    headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
+  },
+  headerMode: 'float',
 });
+
 export const HeaderBackgroundFade = createHeaderBackgroundExample({
-  headerBackgroundTransitionPreset: 'fade',
+  defaultNavigationOptions: {
+    ...TransitionPresets.SlideFromRightIOS,
+    headerStyleInterpolator: HeaderStyleInterpolators.forFade,
+  },
+  headerMode: 'float',
 });
 
 const styles = StyleSheet.create({

example/src/HeaderPreset.js

@@ -1,7 +1,11 @@
 import * as React from 'react';
 import { Button, StatusBar } from 'react-native';
 import { SafeAreaView } from '@react-navigation/native';
-import { createStackNavigator } from 'react-navigation-stack';
+import {
+  createStackNavigator,
+  TransitionPresets,
+  HeaderStyleInterpolators,
+} from 'react-navigation-stack';
 
 class HomeScreen extends React.Component {
   static navigationOptions = {
@@ -101,7 +105,13 @@ const StackWithHeaderPreset = createStackNavigator(
     ScreenWithLongTitle: ScreenWithLongTitle,
   },
   {
-    headerTransitionPreset: 'uikit',
+    headerMode: 'float',
+    defaultNavigationOptions: {
+      ...TransitionPresets.SlideFromRightIOS,
+      headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
+      headerTitleContainerStyle: { left: null },
+      gesturesEnabled: true,
+    },
   }
 );
 

example/src/ImageStack.js

@@ -7,7 +7,7 @@ class ListScreen extends React.Component {
   static navigationOptions = ({ navigation }) => ({
     title: 'Image list',
     headerBackTitle: 'Back',
-    headerLeft: (
+    headerLeft: () => (
       <Button title="Back" onPress={() => navigation.navigate('Home')} />
     ),
   });

example/src/ModalPresentation.js

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { Button, View, Text } from 'react-native';
+import {
+  createStackNavigator,
+  TransitionPresets,
+} from 'react-navigation-stack';
+
+class ListScreen extends React.Component {
+  static navigationOptions = {
+    title: 'My Modal',
+  };
+
+  render() {
+    return (
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Text>List Screen</Text>
+        <Text>A list may go here</Text>
+        <Button
+          title="Go to Details"
+          onPress={() => this.props.navigation.navigate('Details')}
+        />
+        <Button
+          title="Go back to all examples"
+          onPress={() => this.props.navigation.navigate('Home')}
+        />
+      </View>
+    );
+  }
+}
+
+class DetailsScreen extends React.Component {
+  static navigationOptions = {
+    header: null,
+  };
+
+  render() {
+    return (
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Text>Details Screen</Text>
+        <Button
+          title="Go to Details... again"
+          onPress={() => this.props.navigation.push('Details')}
+        />
+        <Button
+          title="Go to List"
+          onPress={() => this.props.navigation.navigate('List')}
+        />
+        <Button
+          title="Go back"
+          onPress={() => this.props.navigation.goBack()}
+        />
+        <Button
+          title="Go back to all examples"
+          onPress={() => this.props.navigation.navigate('Home')}
+        />
+      </View>
+    );
+  }
+}
+
+export default createStackNavigator(
+  {
+    List: ListScreen,
+    Details: DetailsScreen,
+  },
+  {
+    mode: 'modal',
+    defaultNavigationOptions: {
+      ...TransitionPresets.ModalPresentationIOS,
+      cardOverlayEnabled: true,
+      gesturesEnabled: true,
+    },
+  }
+);

example/src/SimpleStack.js

@@ -9,6 +9,10 @@ const Buttons = withNavigation(props => (
       title="Go to Details"
       onPress={() => props.navigation.navigate('Details')}
     />
+    <Button
+      title="Replace with List"
+      onPress={() => props.navigation.replace('List')}
+    />
     <Button
       title="Go and then go to details quick"
       onPress={() => {
@@ -148,11 +152,5 @@ export default createStackNavigator(
   },
   {
     initialRouteName: 'List',
-
-    // these are the defaults
-    cardShadowEnabled: true,
-    cardOverlayEnabled: false,
-
-    // headerTransitionPreset: 'uikit',
   }
 );

example/src/TransparentStack.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { Animated, Button, Easing, View, Text } from 'react-native';
+import { Button, View, Text } from 'react-native';
 import { createStackNavigator } from 'react-navigation-stack';
+import Animated from 'react-native-reanimated';
 
 class ListScreen extends React.Component {
   render() {
@@ -72,29 +73,23 @@ export default createStackNavigator(
   },
   {
     initialRouteName: 'List',
-    transparentCard: true,
     mode: 'modal',
     headerMode: 'none',
-    navigationOptions: {
+    defaultNavigationOptions: {
       gesturesEnabled: false,
+      cardTransparent: true,
     },
-    transitionConfig: () => ({
-      transitionSpec: {
-        duration: 300,
-        easing: Easing.inOut(Easing.ease),
-        timing: Animated.timing,
-      },
-      screenInterpolator: sceneProps => {
-        const { position, scene } = sceneProps;
-        const { index } = scene;
+    cardStyleInterpolator: ({ progress: { current } }) => {
+      const opacity = Animated.interpolate(current, {
+        inputRange: [0, 0.5, 0.9, 1],
+        outputRange: [0, 0.25, 0.7, 1],
+      });
 
-        const opacity = position.interpolate({
-          inputRange: [index - 1, index],
-          outputRange: [0, 1],
-        });
-
-        return { opacity };
-      },
-    }),
+      return {
+        cardStyle: {
+          opacity,
+        },
+      };
+    },
   }
 );