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,6 +14,7 @@ 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';
@@ -24,20 +25,22 @@ 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();
+
+// 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: FullScreen, title: 'Full Screen', routeName: 'FullScreen' },
@@ -68,19 +71,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 +143,6 @@ const Root = createStackNavigator(
   }
 );
 
-useScreens();
 export default createAppContainer(Root);
 
 // Uncomment this to test immediate transitions

example/package.json

@@ -23,5 +23,8 @@
   },
   "devDependencies": {
     "babel-plugin-module-resolver": "^3.2.0"
+  },
+  "resolutions": {
+    "react-native-safe-area-view": "0.14.5"
   }
 }

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,16 @@ function createHeaderBackgroundExample(options = {}) {
     }
   );
 }
-export const HeaderBackgroundDefault = createHeaderBackgroundExample();
-export const HeaderBackgroundTranslate = createHeaderBackgroundExample({
-  headerBackgroundTransitionPreset: 'translate',
+export const HeaderBackgroundDefault = createHeaderBackgroundExample({
+  ...TransitionPresets.SlideFromRightIOS,
+  headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
+  headerMode: 'float',
 });
+
 export const HeaderBackgroundFade = createHeaderBackgroundExample({
-  headerBackgroundTransitionPreset: 'fade',
+  ...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,12 @@ const StackWithHeaderPreset = createStackNavigator(
     ScreenWithLongTitle: ScreenWithLongTitle,
   },
   {
-    headerTransitionPreset: 'uikit',
+    ...TransitionPresets.SlideFromRightIOS,
+    headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
+    headerMode: 'float',
+    defaultNavigationOptions: {
+      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/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() {
@@ -78,23 +79,17 @@ export default createStackNavigator(
     navigationOptions: {
       gesturesEnabled: false,
     },
-    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,
+        },
+      };
+    },
   }
 );

example/src/WipeStack.js

@@ -0,0 +1,157 @@
+import * as React from 'react';
+import { Dimensions, Button, View, Text } from 'react-native';
+import { withNavigation } from '@react-navigation/core';
+import {
+  createStackNavigator,
+  TransitionPresets,
+} from 'react-navigation-stack';
+
+const Buttons = withNavigation(props => (
+  <React.Fragment>
+    <Button
+      title="Go to Details"
+      onPress={() => props.navigation.navigate('Details')}
+    />
+    <Button
+      title="Go and then go to details quick"
+      onPress={() => {
+        props.navigation.pop();
+        setTimeout(() => {
+          props.navigation.navigate('Details');
+        }, 100);
+      }}
+    />
+    <Button
+      title="Go to Headerless"
+      onPress={() => props.navigation.navigate('Headerless')}
+    />
+    <Button title="Go back" onPress={() => props.navigation.goBack()} />
+    <Button
+      title="Go back quick"
+      onPress={() => {
+        props.navigation.pop();
+        setTimeout(() => {
+          props.navigation.pop();
+        }, 100);
+      }}
+    />
+    <Button
+      title="Go back to all examples"
+      onPress={() => props.navigation.navigate('Home')}
+    />
+  </React.Fragment>
+));
+
+class ListScreen extends React.Component {
+  static navigationOptions = {
+    title: 'List',
+  };
+
+  componentDidMount() {
+    console.log('ListScreen didMount');
+  }
+
+  componentWillUnmount() {
+    console.log('ListScreen willUnmount');
+  }
+
+  render() {
+    return (
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#fff',
+        }}
+      >
+        <Text>List Screen</Text>
+        <Text>A list may go here</Text>
+        <Buttons />
+      </View>
+    );
+  }
+}
+
+class DetailsScreen extends React.Component {
+  static navigationOptions = {
+    title: 'Details',
+    gestureResponseDistance: {
+      horizontal: Dimensions.get('window').width,
+    },
+  };
+
+  componentDidMount() {
+    console.log('DetailsScreen didMount');
+  }
+
+  componentWillUnmount() {
+    console.log('DetailsScreen willUnmount');
+  }
+
+  render() {
+    return (
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#fff',
+        }}
+      >
+        <Text>Details Screen</Text>
+        <Button title="Go back in 2s" onPress={this._goBackInTwoSeconds} />
+        <Buttons />
+      </View>
+    );
+  }
+
+  _goBackInTwoSeconds = () => {
+    setTimeout(() => {
+      this.props.navigation.goBack();
+    }, 2000);
+  };
+}
+
+class HeaderlessScreen extends React.Component {
+  static navigationOptions = {
+    header: null,
+  };
+
+  componentDidMount() {
+    console.log('HeaderlessScreen didMount');
+  }
+
+  componentWillUnmount() {
+    console.log('HeaderlessScreen willUnmount');
+  }
+
+  render() {
+    return (
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#fff',
+        }}
+      >
+        <Text>Headerless Screen</Text>
+        <Buttons />
+      </View>
+    );
+  }
+}
+
+export default createStackNavigator(
+  {
+    List: ListScreen,
+    Details: DetailsScreen,
+    Headerless: HeaderlessScreen,
+  },
+  {
+    initialRouteName: 'List',
+    headerMode: 'screen',
+    ...TransitionPresets.WipeFromBottomAndroid,
+  }
+);