Migrate to React Navigation v5

Author: chris-poe

package-lock.json

@@ -50,6 +50,7 @@
   "dependencies": {
     "@expo/vector-icons": "^10.0.6",
     "@react-native-community/masked-view": "0.1.5",
+    "@react-navigation/bottom-tabs": "^5.0.0-alpha.34",
     "@react-navigation/native": "^5.0.0-alpha.27",
     "@react-navigation/stack": "^5.0.0-alpha.58",
     "axios": "^0.19.1",

package.json

@@ -30,7 +30,7 @@ const HomeNavigator = () => (
 
 const HomeIcon = {
   tabBarIcon: ({ tintColor }) => (
-    <Icon name="ios-home" size={40} color={tintColor} />
+    <Icon name="ios-home" size={32} color={tintColor} />
   ),
 };
 

src/navigation/Home/index.js

@@ -1,32 +1,18 @@
 import React from 'react';
 import { NavigationNativeContainer } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createStackNavigator } from '@react-navigation/stack';
-import { HomeNavigator, HomeIcon } from './Home';
 import { colors } from '../components/common/theme';
 
-const Stack = createStackNavigator();
+import { HomeNavigator, HomeIcon } from './Home';
 
-const RootNavigator = () => (
-  <NavigationNativeContainer>
-    <Stack.Navigator
-      headerMode="none"
-      screenOptions={{
-        gestureEnabled: false,
-      }}
-    >
-      <Stack.Screen component={HomeNavigator} />
-    </Stack.Navigator>
-  </NavigationNativeContainer>
-);
+const Tab = createBottomTabNavigator();
+const Stack = createStackNavigator();
 
-/* const TabBarNavigator = createBottomTabNavigator(
-  {
-    Home: { screen: HomeNavigator },
-  },
-  {
-    initialRouteName: 'Home',
-    defaultNavigationOptions: () => HomeIcon,
-    tabBarOptions: {
+const TabNavigator = () => (
+  <Tab.Navigator
+    screenOptions={() => HomeIcon}
+    tabBarOptions={{
       inactiveTintColor: colors.mediumGray,
       showIcon: true,
       showLabel: false,
@@ -38,35 +24,23 @@ const RootNavigator = () => (
         height: 70,
         backgroundColor: colors.white,
       },
-    },
-  }
+    }}
+  >
+    <Tab.Screen component={HomeNavigator} />
+  </Tab.Navigator>
 );
 
-const MainNavigator = createStackNavigator(
-  {
-    Home: { screen: TabBarNavigator },
-  },
-  {
-    initialRouteName: 'Home',
-    headerMode: 'none',
-    cardStyle: { shadowColor: 'transparent' },
-  }
+const RootNavigator = () => (
+  <NavigationNativeContainer>
+    <Stack.Navigator
+      headerMode="none"
+      screenOptions={{
+        gestureEnabled: false,
+      }}
+    >
+      <Stack.Screen component={TabNavigator} />
+    </Stack.Navigator>
+  </NavigationNativeContainer>
 );
 
-const RootNavigator = createAppContainer(
-  createStackNavigator(
-    {
-      Main: { screen: MainNavigator },
-    },
-    {
-      headerMode: 'none',
-      cardStyle: { shadowColor: 'transparent' },
-      mode: 'modal',
-      defaultNavigationOptions: {
-        gesturesEnabled: false,
-      },
-    }
-  )
-); */
-
 export default RootNavigator;