React Navigation v5 (dry run)

.eslintrc

@@ -24,7 +24,8 @@
     "react-native/no-raw-text": 2,
     "react-native/sort-styles": 2,
     "immutable/no-mutation": 0,
-    "react/jsx-indent": 0
+    "react/jsx-indent": 0,
+    "react/jsx-props-no-spreading": 0
   },
   "globals": {
     "__DEV__": true,

package.json

@@ -49,8 +49,9 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^10.0.6",
-    "@react-navigation/compat": "^5.0.0-alpha.26",
+    "@react-native-community/masked-view": "0.1.5",
     "@react-navigation/native": "^5.0.0-alpha.27",
+    "@react-navigation/stack": "^5.0.0-alpha.58",
     "axios": "^0.19.1",
     "expo": "^36.0.2",
     "expo-asset": "~8.0.0",
@@ -63,13 +64,13 @@
     "react-native-animatable": "^1.3.3",
     "react-native-gesture-handler": "~1.5.0",
     "react-native-platform-touchable": "^1.1.1",
+    "react-native-reanimated": "~1.4.0",
+    "react-native-safe-area-context": "0.6.0",
+    "react-native-screens": "2.0.0-alpha.12",
     "react-redux": "^7.1.3",
     "redux": "^4.0.5",
     "redux-axios-middleware": "^4.0.1",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.3.0",
-    "react-native-reanimated": "~1.4.0",
-    "react-native-screens": "2.0.0-alpha.12",
-    "react-native-safe-area-context": "0.6.0"
+    "redux-thunk": "^2.3.0"
   }
 }

src/components/App.js

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react';
+import { StatusBar } from 'react-native';
 import { connect } from 'react-redux';
 import { SafeAreaView } from './common/Layout';
 import RootNavigator from '../navigation/RootNavigator';
-import Landing from './screens/Landing';
+import Splash from './screens/Splash';
 import init from '../store/actions/common';
 
 const App = ({ dispatch }) => {
@@ -13,7 +14,12 @@ const App = ({ dispatch }) => {
   }, []);
 
   return (
-    <SafeAreaView>{isAppReady ? <RootNavigator /> : <Landing />}</SafeAreaView>
+    <SafeAreaView>
+      <>
+        <StatusBar barStyle="dark-content" />
+        {isAppReady ? <RootNavigator /> : <Splash />}
+      </>
+    </SafeAreaView>
   );
 };
 

src/navigation/Home/index.js

@@ -2,14 +2,13 @@ import React from 'react';
 import { Platform } from 'react-native';
 import { createStackNavigator } from '@react-navigation/stack';
 import Icon from '../../components/common/Icon';
-
 import HomeScreen from '../../components/screens/Home';
 
-const HomeNavigator = createStackNavigator({
-  Home: {
-    screen: HomeScreen,
-    navigationOptions: {
-      headerTitle: 'Home',
+const Stack = createStackNavigator();
+
+const HomeNavigator = () => (
+  <Stack.Navigator
+    screenOptions={{
       headerTitleStyle: Platform.select({
         android: {
           flex: 1,
@@ -18,9 +17,16 @@ const HomeNavigator = createStackNavigator({
       }),
       headerLeft: null,
       headerRight: null,
-    },
-  },
-});
+    }}
+  >
+    <Stack.Screen
+      name="Home"
+      component={HomeScreen}
+      headerMode="none"
+      options={{ title: 'Home' }}
+    />
+  </Stack.Navigator>
+);
 
 const HomeIcon = {
   tabBarIcon: ({ tintColor }) => (

src/navigation/RootNavigator.js

@@ -1,12 +1,25 @@
-import {
-  createAppContainer,
-  createBottomTabNavigator,
-  createStackNavigator,
-} from '@react-navigation/stack';
+import React from 'react';
+import { NavigationNativeContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
 import { HomeNavigator, HomeIcon } from './Home';
 import { colors } from '../components/common/theme';
 
-const TabBarNavigator = createBottomTabNavigator(
+const Stack = createStackNavigator();
+
+const RootNavigator = () => (
+  <NavigationNativeContainer>
+    <Stack.Navigator
+      headerMode="none"
+      screenOptions={{
+        gestureEnabled: false,
+      }}
+    >
+      <Stack.Screen component={HomeNavigator} />
+    </Stack.Navigator>
+  </NavigationNativeContainer>
+);
+
+/* const TabBarNavigator = createBottomTabNavigator(
   {
     Home: { screen: HomeNavigator },
   },
@@ -54,6 +67,6 @@ const RootNavigator = createAppContainer(
       },
     }
   )
-);
+); */
 
 export default RootNavigator;