Create a tab navigator

Oleksiiithouse · Feb 10, 2020 · b516d2c · b516d2c
1 parent 637b6f9
commit b516d2c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/reactnav5-tab-navigator/App.js b/reactnav5-tab-navigator/App.js
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import MainStackNavigator from './src/navigation/MainStackNavigator'
+import MainStackNavigator from './src/navigation/AppNavigator'
 
 export default function App() {
   return <MainStackNavigator />

diff --git a/...ator/src/navigation/MainStackNavigator.js → ...-navigator/src/navigation/AppNavigator.js b/...ator/src/navigation/MainStackNavigator.js → ...-navigator/src/navigation/AppNavigator.js
@@ -1,12 +1,24 @@
 import * as React from 'react'
 import { NavigationContainer } from '@react-navigation/native'
 import { createStackNavigator } from '@react-navigation/stack'
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
 
 import Home from '../screens/Home'
 import Detail from '../screens/Detail'
 import Settings from '../screens/Settings'
+import Profile from '../screens/Profile'
 
 const Stack = createStackNavigator()
+const Tab = createBottomTabNavigator()
+
+function MainTabNavigator() {
+  return (
+    <Tab.Navigator>
+      <Tab.Screen name='Home' component={Home} />
+      <Tab.Screen name='Profile' component={Profile} />
+    </Tab.Navigator>
+  )
+}
 
 function MainStackNavigator() {
   return (
@@ -25,11 +37,7 @@ function MainStackNavigator() {
           headerBackTitleVisible: false
         }}
         headerMode='float'>
-        <Stack.Screen
-          name='Home'
-          component={Home}
-          options={{ title: 'Home Screen' }}
-        />
+        <Stack.Screen name='Home' component={MainTabNavigator} />
         <Stack.Screen
           name='Detail'
           component={Detail}