I'm trying to implement a nested drawer navigation on a tab screen following a login/signup stack. A problem I'm having is that the drawer can be accessible from both Login/Signup instead of just on the Tab Navigation.
Here is my navigation code:
import * as React from 'react';import { NavigationContainer } from '@react-navigation/native';import Login from '../screens/Login.js'import Signup from '../screens/Signup.js'import { createStackNavigator } from '@react-navigation/stack';import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';import { TouchableOpacity } from 'react-native-gesture-handler';import CameraScreen from '../screens/Camera.js'import {Ionicons, EvilIcons} from '@expo/vector-icons'import Home from '../screens/Home.js';import LivingRoom from '../screens/LivingRoom.js'import Activity from '../screens/Activity.js'import Post from '../screens/Post.js'import Profile from '../screens/Profile.js'import CommentScreen from '../screens/Comment.js'import { MaterialIcons } from '@expo/vector-icons';import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer';import { useDispatch, useSelector } from "react-redux";import { StyleSheet, Text, View, ImageBackground, Image } from 'react-native';const Drawer = createDrawerNavigator();const Stack = createStackNavigator();const Tab = createBottomTabNavigator();const styles = StyleSheet.create({ container: { flex: 1 }, profile: { marginTop: 100, width: 80, height: 80, borderRadius: 40, borderWidth: 3, borderColor: "#fff" }, name: { color: "#000", fontSize: 20, fontWeight: "800", marginVertical: 8 },});const navigationRef = React.createRef();function navigate(name, params) { navigationRef.current && navigationRef.current.navigate(name, params);}function TabNavigator() { return (<Tab.Navigator screenOptions={({ route }) => ({ tabBarIcon: ({ color, size, focused }) => { if(route.name === "Home"){ return <Ionicons name="ios-home" size={28} /> } if(route.name === "Post"){ return <Ionicons name="ios-add-circle" size={32} color="#FF6E65" style={{ shadowColor: "#E9446A", shadowOffset: { width: 0, height: 10 }, shadowRadius: 10, shadowOpacity: 0.3 }}/> } if(route.name === "Living Room"){ return <Ionicons name="ios-chatbubbles" size={28} /> } }, })} tabBarOptions={{ activeTintColor: "#FF6E65", height: 100, paddingVertical: 10 }}><Tab.Screen name="Home" component={Home} /><Tab.Screen name="Post" component={Post} /><Tab.Screen name="Living Room" component={LivingRoom} /></Tab.Navigator> );}function StackNavigator({ navigation }){ return (<Stack.Navigator // initialRouteName="Comment"><Stack.Screen name="Login" component={Login} options={{headerShown: false}} /><Stack.Screen name="Signup" component={Signup} options={{ title: 'Sign up' }}/><Stack.Screen name="TabNavigator" component={TabNavigator} options={{ title: "Home" , headerLeft: () => (<TouchableOpacity onPress={ () => navigate('Camera') }><Ionicons style={{marginLeft: 10}} name={'ios-camera'} size={30}/></TouchableOpacity> ), gestureEnabled: false, headerRight: () => (<TouchableOpacity onPress={ () => navigation.openDrawer() }><MaterialIcons style={{marginRight: 10}} name={'people'} size={30}/></TouchableOpacity> ), }}/><Stack.Screen name="Camera" component={CameraScreen} options={{ headerShown: false }}/><Stack.Screen name="Comment" component={CommentScreen} options={{ headerShown: true }}/></Stack.Navigator> );}function CustomDrawerContent(props) { const username = useSelector(state => state.user.username); const avatar = useSelector(state => state.user.avatar); return (<DrawerContentScrollView {...props} ><ImageBackground source={require("../assets/background.png")} style={{ width: undefined, padding: 16, paddingTop: 48 }}><Image source={{uri: avatar}} style={styles.profile} /><Text style={styles.name}>{username}</Text></ImageBackground><DrawerItemList {...props} /></DrawerContentScrollView> ); }function MyDrawer() { return (<Drawer.Navigator drawerPosition={'right'} drawerStyle={{ backgroundColor: '#fff', }} drawerContentOptions={{ activeBackgroundColor: '#FF6E65', activeTintColor: "#FFF", }} drawerContent={props => <CustomDrawerContent {...props} />}><Drawer.Screen name="Home" component={StackNavigator} /><Drawer.Screen name="My Profile" component={Profile} /></Drawer.Navigator> ); }function AuthNavigator() { // console.log(navigation) return (<NavigationContainer ref={navigationRef}><MyDrawer/></NavigationContainer> );}export default (AuthNavigator)Here is my tab navigation code:
import * as React from 'react';import { NavigationContainer } from '@react-navigation/native';import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';import Home from '../screens/Home.js';import Search from '../screens/Search.js'import Activity from '../screens/Activity.js'import Post from '../screens/Post.js'import Profile from '../screens/Profile.js'import {Ionicons} from '@expo/vector-icons'// import { HomeNavigator } from './StackNavigator.js'const Tab = createBottomTabNavigator();export default class TabNavigator extends React.Component { render(){ return (<Tab.Navigator screenOptions={({ route }) => ({ tabBarIcon: ({ color, size, focused }) => { if(route.name === "Home"){ return <Ionicons name="ios-home" size={32} /> } if(route.name === "Search"){ return <Ionicons name="ios-search" size={32} /> } if(route.name === "Post"){ return <Ionicons name="ios-add-circle-outline" size={32}/> } if(route.name === "Activity"){ return <Ionicons name={focused ? "ios-heart" : "ios-heart-empty"} size={32} /> } if(route.name === "Profile"){ return <Ionicons name="ios-person" size={32} /> } }, })} tabBarOptions={{ height: 100, paddingVertical: 10 }}><Tab.Screen name="Home" component={Home} /><Tab.Screen name="Search" component={Search} /><Tab.Screen name="Post" component={Post} /><Tab.Screen name="Activity" component={Activity} /><Tab.Screen name="Profile" component={Profile} /></Tab.Navigator> ); }}I've tried setting gestures to false in the login and signup stack screen but that only gets rid of the gesture for the stack screen itself but not the drawer itself. I want it such that the drawer can only be accessible from the tab navigator but React Navigation 5.x says to nest everything under the Drawer itself. How should I go about this? Thanks!