Update example to react-navigation 5.x (#470)

Updated example to react-navigation 5.x. After removing the switch navigator, the examples are now Screens of the Main navigator, which makes going back to the root screen easier.
software-mansion · Aug 1, 2020 · 081fd35 · 081fd35
1 parent b1078b2
commit 081fd35
Show file tree

Hide file tree

Showing 7 changed files with 381 additions and 238 deletions.
diff --git a/Example/App.js b/Example/App.js
@@ -6,11 +6,8 @@ import {
   StyleSheet,
   TouchableHighlight,
 } from 'react-native';
-import {
-  createStackNavigator,
-  createSwitchNavigator,
-  createAppContainer,
-} from 'react-navigation';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
 import { enableScreens } from 'react-native-screens';
 
 import Stack from './stack';
@@ -23,19 +20,19 @@ import NavigationTabsAndStack from './navigationTabsAndStack';
 enableScreens();
 
 const SCREENS = {
-  Stack: { screen: Stack, title: 'Screen container based stack' },
-  NativeStack: { screen: NativeStack, title: 'Native stack example' },
-  Tabs: { screen: Tabs, title: 'Tabs example' },
+  Stack: { Screen: Stack, title: 'Screen container based stack' },
+  NativeStack: { Screen: NativeStack, title: 'Native stack example' },
+  Tabs: { Screen: Tabs, title: 'Tabs example' },
   NativeNavigation: {
-    screen: NativeNavigation,
+    Screen: NativeNavigation,
     title: 'Native stack bindings for RNN',
   },
   Navigation: {
-    screen: Navigation,
+    Screen: Navigation,
     title: 'React Navigation with screen enabled',
   },
   NavigationTabsAndStack: {
-    screen: NavigationTabsAndStack,
+    Screen: NavigationTabsAndStack,
     title: 'React Navigation Tabs + Stack',
   },
 };
@@ -45,13 +42,13 @@ class MainScreen extends React.Component {
     title: '📱 React Native Screens Examples',
   };
   render() {
-    const data = Object.keys(SCREENS).map(key => ({ key }));
+    const data = Object.keys(SCREENS).map((key) => ({ key }));
     return (
       <FlatList
         style={styles.list}
         data={data}
         ItemSeparatorComponent={ItemSeparator}
-        renderItem={props => (
+        renderItem={(props) => (
           <MainScreenItem
             {...props}
             onPressItem={({ key }) => this.props.navigation.navigate(key)}
@@ -78,18 +75,25 @@ class MainScreenItem extends React.Component {
   }
 }
 
-const MainScreenNav = createStackNavigator({
-  MainScreen: { screen: MainScreen },
-});
+const MainScreenStack = createStackNavigator();
 
-const ExampleApp = createSwitchNavigator(
-  {
-    Main: { screen: MainScreenNav },
-    ...SCREENS,
-  },
-  {
-    initialRouteName: 'Main',
-  }
+const ExampleApp = () => (
+  <NavigationContainer>
+    <MainScreenStack.Navigator>
+      <MainScreenStack.Screen name="Main" component={MainScreen} />
+      {Object.keys(SCREENS).map((name) => {
+        const { Screen, title } = SCREENS[name];
+        return (
+          <MainScreenStack.Screen
+            key={name}
+            name={name}
+            component={Screen}
+            options={{ title }}
+          />
+        );
+      })}
+    </MainScreenStack.Navigator>
+  </NavigationContainer>
 );
 
 const styles = StyleSheet.create({
@@ -113,4 +117,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default createAppContainer(ExampleApp);
+export default ExampleApp;
diff --git a/Example/ios/Podfile.lock b/Example/ios/Podfile.lock
@@ -236,6 +236,8 @@ PODS:
     - React-cxxreact (= 0.63.0)
     - React-jsi (= 0.63.0)
   - React-jsinspector (0.63.0)
+  - react-native-safe-area-context (3.1.1):
+    - React
   - React-RCTActionSheet (0.63.0):
     - React-Core/RCTActionSheetHeaders (= 0.63.0)
   - React-RCTAnimation (0.63.0):
@@ -296,8 +298,12 @@ PODS:
     - React-Core (= 0.63.0)
     - React-cxxreact (= 0.63.0)
     - React-jsi (= 0.63.0)
+  - RNCMaskedView (0.1.10):
+    - React
   - RNGestureHandler (1.6.1):
     - React
+  - RNReanimated (1.10.1):
+    - React
   - RNScreens (2.9.0):
     - React
   - Yoga (1.14.0)
@@ -341,6 +347,7 @@ DEPENDENCIES:
   - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
+  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
   - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`)
@@ -351,7 +358,9 @@ DEPENDENCIES:
   - React-RCTText (from `../node_modules/react-native/Libraries/Text`)
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -401,6 +410,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
   React-jsinspector:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
+  react-native-safe-area-context:
+    :path: "../node_modules/react-native-safe-area-context"
   React-RCTActionSheet:
     :path: "../node_modules/react-native/Libraries/ActionSheetIOS"
   React-RCTAnimation:
@@ -421,8 +432,12 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/Libraries/Vibration"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNCMaskedView:
+    :path: "../node_modules/@react-native-community/masked-view"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
+  RNReanimated:
+    :path: "../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../node_modules/react-native-screens"
   Yoga:
@@ -455,6 +470,7 @@ SPEC CHECKSUMS:
   React-jsi: 254710f3a97e587427bfbf3011dacec2af66a1fc
   React-jsiexecutor: 0e0cb4e170ca72d4bb1179843d08dcbea3d100ac
   React-jsinspector: fc661eff8edbfb7e22119382c13f33bcadde0f3c
+  react-native-safe-area-context: 344b969c45af3d8464d36e8dea264942992ef033
   React-RCTActionSheet: aadd91a1d6cbfae50dd41f140004f816e9e47ade
   React-RCTAnimation: 7fa2ef6c0ef1e3f0b7d2261c827ec94412deb5e6
   React-RCTBlob: ccbbc70295aee3a76a70323b48f63fb7a7fcffd6
@@ -465,8 +481,10 @@ SPEC CHECKSUMS:
   React-RCTText: ba503bf4cce41881ca258ba789c33e017955efdd
   React-RCTVibration: 77ab1cf4a5eb854b88ad5ed3e9d8509ed124525e
   ReactCommon: f63556ee9e41e9802257228237e5e660451a03cf
+  RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
   RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38
-  RNScreens: 6e366da7af05bbaeb27ca916d2c17666d0d833ec
+  RNReanimated: c2bb7438b57a3d987bb2e4e6e4bca94787e30b02
+  RNScreens: c526239bbe0e957b988dacc8d75ac94ec9cb19da
   Yoga: 7d2edc5b410474191962e6dee88ee67f9b328b6b
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 

diff --git a/Example/nativeNavigation.js b/Example/nativeNavigation.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { TextInput, StyleSheet, Button, View, ScrollView } from 'react-native';
-import { createAppContainer } from 'react-navigation';
-import createNativeStackNavigator from 'react-native-screens/createNativeStackNavigator';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
 class SomeScreen extends React.Component {
   render() {
@@ -12,7 +11,7 @@ class SomeScreen extends React.Component {
           title="Push"
         />
         <Button
-          onPress={() => this.props.navigation.push('Modal')}
+          onPress={() => this.props.navigation.navigate('Modal')}
           title="Modal"
         />
         <Button onPress={() => this.props.navigation.pop()} title="Back" />
@@ -48,56 +47,30 @@ class PushScreen extends React.Component {
   }
 }
 
-const AppStack = createNativeStackNavigator(
-  {
-    Some: {
-      screen: SomeScreen,
-      navigationOptions: () => ({
-        title: 'Start',
-        // headerBackTitle: null,
-        headerStyle: {
-          // backgroundColor: 'transparent',
-        },
-        headerTintColor: 'black',
-        // translucent: true,
-        // largeTitle: true,
-      }),
-    },
-    Push: {
-      screen: PushScreen,
-      navigationOptions: {
+const AppStack = createNativeStackNavigator();
+
+const App = () => (
+  <AppStack.Navigator>
+    <AppStack.Screen
+      name="Some"
+      component={SomeScreen}
+      options={{ title: 'Start', headerTintColor: 'black' }}
+    />
+    <AppStack.Screen
+      name="Push"
+      component={PushScreen}
+      options={{
         title: 'Pushed',
-        headerBackTitle: 'Escape',
-        // headerBackTitleStyle: {
-        //   fontFamily: 'ChalkboardSE-Light',
-        // },
-        headerStyle: {
-          backgroundColor: '#3da4ab',
-        },
+        headerStyle: { backgroundColor: '#3da4ab' },
         headerTintColor: 'black',
-        // header: null,
-        // translucent: true,
-        // gestureEnabled: false,
-      },
-    },
-  },
-  {
-    initialRouteName: 'Some',
-    // headerMode: 'none',
-    // transparentCard: true,
-    // mode: 'modal',
-  }
-);
-
-const App = createNativeStackNavigator(
-  {
-    Root: { screen: AppStack },
-    Modal: PushScreen,
-  },
-  {
-    mode: 'modal',
-    headerMode: 'none',
-  }
+      }}
+    />
+    <AppStack.Screen
+      name="Modal"
+      component={PushScreen}
+      options={{ stackPresentation: 'modal' }}
+    />
+  </AppStack.Navigator>
 );
 
 const styles = StyleSheet.create({
@@ -141,4 +114,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default createAppContainer(App);
+export default App;
diff --git a/Example/navigation/index.js b/Example/navigation/index.js
@@ -8,8 +8,7 @@ import {
   Image,
   requireNativeComponent,
 } from 'react-native';
-import { createStackNavigator, createAppContainer } from 'react-navigation';
-// import { createStackNavigator } from './react-navigation/react-navigation';
+import { createStackNavigator } from '@react-navigation/stack';
 
 export const LifecycleAwareView = requireNativeComponent(
   'RNSLifecycleAwareView',
@@ -37,18 +36,17 @@ const Background = ({ index }) => (
 );
 
 class DetailsScreen extends React.Component {
-  static navigationOptions = ({ navigation }) => {
-    return {
-      title: 'Details screen #' + navigation.getParam('index', '0'),
-    };
-  };
   animvalue = new Animated.Value(0);
   rotation = this.animvalue.interpolate({
     inputRange: [0, 1],
     outputRange: ['0deg', '360deg'],
   });
   state = { count: 1, text: '' };
+
   componentDidMount() {
+    this.props.navigation.setOptions({
+      title: `Details screen #${this.getIndex()}`,
+    });
     Animated.loop(
       Animated.timing(this.animvalue, {
         toValue: 1,
@@ -58,8 +56,14 @@ class DetailsScreen extends React.Component {
     ).start();
     setInterval(() => this.setState({ count: this.state.count + 1 }), 500);
   }
+
+  getIndex() {
+    const { params } = this.props.route;
+    return params && params.index ? params.index : 0;
+  }
+
   render() {
-    const index = this.props.navigation.getParam('index', 0);
+    const index = this.getIndex();
     return (
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         <Background index={index} />
@@ -74,7 +78,7 @@ class DetailsScreen extends React.Component {
         <TextInput
           placeholder="Hello"
           style={styles.textInput}
-          onChangeText={text => this.setState({ text })}
+          onChangeText={(text) => this.setState({ text })}
           text={this.state.text}
         />
         <Animated.View
@@ -96,13 +100,12 @@ class DetailsScreen extends React.Component {
   }
 }
 
-const App = createStackNavigator(
-  {
-    Details: DetailsScreen,
-  },
-  {
-    initialRouteName: 'Details',
-  }
+const Stack = createStackNavigator();
+
+const App = () => (
+  <Stack.Navigator>
+    <Stack.Screen name="Details" component={DetailsScreen} />
+  </Stack.Navigator>
 );
 
 const styles = StyleSheet.create({
@@ -116,4 +119,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default createAppContainer(App);
+export default App;