Read the following code and try it, don't forget to import it.
The way I've done it is putting the drawer above in the file
DrawerNavigator.js:
const Drawer = createDrawerNavigator()
const DrawerNavigator = () => {
return(
<Drawer.Navigator initialRouteName='TabNavigator'>
<Drawer.Screen name='Home' component={TabNavigator}/>
<Drawer.Screen name='Profile' component={ProfileStackScreen}/>
<Drawer.Screen name='Settings' component={SettingsStackScreen}/>
</Drawer.Navigator>
)
}
export default DrawerNavigator
Here I insert the TabNavigator(Only one of the options in the Drawer will have te bottom tab navigator, the Home one.
The TabNavigator.js will have all the bottom tab screens:
const Tab = createBottomTabNavigator();
const BottomTabNavigator = () => {
return (
<Tab.Navigator initialRouteName='Dashboard'>
<Tab.Screen name="Dashboard" component={DashboarStackScreen} />
<Tab.Screen name='Reminder' component={ReminderStackScreen}/>
</Tab.Navigator>
)
}
export default BottomTabNavigator
In the StackNavigator.js you will enter every stack screens you might want to use:
const Stack = createStackNavigator()
const DashboardStackScreen = () => {
return (
<Stack.Navigator >
{/*INSERT STACK SCREENS HERE*/}
</Stack.Navigator>
)
}
const ReminderStackScreen = () => {
return (
<Stack.Navigator >
{/*INSERT STACK SCREENS HERE*/}
</Stack.Navigator>
)
}
const ProfileStackScreen = () => {
return(
<Stack.Navigator >
{/*INSERT STACK SCREENS HERE*/}
</Stack.Navigator>
)
}
const SettingsStackScreen = () => {
return(
<Stack.Navigator >
{/*INSERT STACK SCREENS HERE*/}
</Stack.Navigator>
)
}
export {DashboardStackScreen,ReminderStackScreen,ProfileStackScreen,SettingsStackScreen}
If this doesn't solve your problem, let me know.
