Use react-navigation native stack

janicduplessis · May 22, 2020 · 1a2bc5a · 1a2bc5a
1 parent 92a94c5
commit 1a2bc5a
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 12 deletions.
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -243,7 +243,7 @@ PODS:
     - React
   - react-native-netinfo (5.9.0):
     - React
-  - react-native-safe-area-context (0.7.3):
+  - react-native-safe-area-context (2.0.0):
     - React
   - react-native-sensitive-info (5.5.5):
     - React
@@ -533,7 +533,7 @@ SPEC CHECKSUMS:
   React-jsinspector: 512e560d0e985d0e8c479a54a4e5c147a9c83493
   react-native-config: 313a1306066289211579b9655eb81d9a565462d0
   react-native-netinfo: 7b3c53674ea611b26a7788821f137c6d9d3a038b
-  react-native-safe-area-context: e200d4433aba6b7e60b52da5f37af11f7a0b0392
+  react-native-safe-area-context: 60f654e00b6cc416573f6d5dbfce3839958eb57a
   react-native-sensitive-info: 4629b223484a08225c3eb088ff3f91b03097b5e5
   react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865
   React-RCTActionSheet: f41ea8a811aac770e0cc6e0ad6b270c644ea8b7c

diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     "react-native-material-ripple": "^0.9.1",
     "react-native-permissions": "^2.1.4",
     "react-native-reanimated": "^1.8.0",
-    "react-native-safe-area-context": "^0.7.3",
+    "react-native-safe-area-context": "^2.0.0",
     "react-native-screens": "^2.7.0",
     "react-native-sensitive-info": "^5.5.5",
     "react-native-share": "^3.3.0",

diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
@@ -39,8 +39,10 @@ export const Toolbar = ({title, navText, navIcon, onIconClicked}: ToolbarProps)
     );
   }
   return (
-    <Box flexDirection="row" alignItems="center" flexWrap="wrap">
-      <Button text={navText} variant="text" onPress={onIconClicked} />
+    <Box flexDirection="row" alignItems="center" minHeight={56}>
+      <Box>
+        <Button text={navText} variant="text" onPress={onIconClicked} />
+      </Box>
       {title !== '' && (
         <Box flex={1} justifyContent="center" minWidth={100}>
           <Text variant="bodySubTitle" color="overlayBodyText" textAlign="center">

diff --git a/src/navigation/MainNavigator.tsx b/src/navigation/MainNavigator.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import {createStackNavigator} from '@react-navigation/stack';
+import {enableScreens} from 'react-native-screens';
+import {createNativeStackNavigator, NativeStackNavigationOptions} from 'react-native-screens/native-stack';
 import {HomeScreen} from 'screens/home';
 import {TutorialScreen} from 'screens/tutorial';
 import {DataSharingScreen} from 'screens/datasharing';
@@ -10,7 +11,9 @@ import {LanguageScreen} from 'screens/language';
 import {StatusBar} from 'react-native';
 import {useStorage} from 'services/StorageService';
 
-const MainStack = createStackNavigator();
+enableScreens();
+
+const MainStack = createNativeStackNavigator();
 
 const withDarkNav = (Component: React.ElementType) => {
   const ComponentWithDarkNav = (props: any) => (
@@ -45,10 +48,15 @@ const PrivacyScreenWithNavBar = withDarkNav(PrivacyScreen);
 const SharingScreenWithNavBar = withDarkNav(SharingScreen);
 const LanguageScreenWithNavBar = withDarkNav(LanguageScreen);
 
+const DEFAULT_SCREEN_OPTIONS: NativeStackNavigationOptions = {
+  stackPresentation: 'modal',
+  headerShown: false,
+};
+
 const MainNavigator = () => {
   const {isOnboarding} = useStorage();
   return (
-    <MainStack.Navigator headerMode="none" mode="modal" initialRouteName={isOnboarding ? 'Onboarding' : 'Home'}>
+    <MainStack.Navigator screenOptions={DEFAULT_SCREEN_OPTIONS} initialRouteName={isOnboarding ? 'Onboarding' : 'Home'}>
       <MainStack.Screen name="Home" component={HomeScreenWithNavBar} />
       <MainStack.Screen name="Onboarding" component={OnboardingScreenWithNavBar} />
       <MainStack.Screen name="Tutorial" component={TutorialScreenWithNavBar} />

diff --git a/yarn.lock b/yarn.lock
@@ -7257,10 +7257,10 @@ react-native-reanimated@^1.8.0:
   dependencies:
     fbjs "^1.0.0"
 
-react-native-safe-area-context@^0.7.3:
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-0.7.3.tgz#ad6bd4abbabe195332c53810e4ce5851eb21aa2a"
-  integrity sha512-9Uqu1vlXPi+2cKW/CW6OnHxA76mWC4kF3wvlqzq4DY8hn37AeiXtLFs2WkxH4yXQRrnJdP6ivc65Lz+MqwRZAA==
+react-native-safe-area-context@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-2.0.0.tgz#7ef48e5a83a1e2f7fe9d5321493822b6765fd1ab"
+  integrity sha512-5VtCI3Nluzm7QfTcB/3j4YeWqt25QO1u5KTA1jEg1ckJzV19qCZFyHIpCCkS5+VEX+2JEHfdczhCdwE5sPgyEw==
 
 react-native-safe-modules@^1.0.0:
   version "1.0.0"