From 081fd35660614aa4bd9f4bf54bd5fbff58d406b2 Mon Sep 17 00:00:00 2001 From: Michael McDermott Date: Sat, 1 Aug 2020 06:31:41 -0400 Subject: [PATCH] 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. --- Example/App.js | 54 ++--- Example/ios/Podfile.lock | 20 +- Example/nativeNavigation.js | 77 +++---- Example/navigation/index.js | 37 +-- Example/navigationTabsAndStack.js | 57 +++-- Example/package.json | 15 +- Example/yarn.lock | 359 ++++++++++++++++++++---------- 7 files changed, 381 insertions(+), 238 deletions(-) diff --git a/Example/App.js b/Example/App.js index 766475cd2..f9155c2d1 100644 --- 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 ( ( + renderItem={(props) => ( 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 = () => ( + + + + {Object.keys(SCREENS).map((name) => { + const { Screen, title } = SCREENS[name]; + return ( + + ); + })} + + ); 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 index a477c7607..b67febd0f 100644 --- 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 index a34860a0d..d25f9d7be 100644 --- 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" />