Using DrawerNavigator alongside stack navigation on react native

Question

i'm currently using a stack Navigation on my app, but i want to add a Drawer menu to it. When i try to add i get a conflict issue with the current Navigation Container on my app.

Where shoud i put the Drawer? On my App.tsx, in my routes.ts? or use it like a component?

Here is my app.tsx:

export default function App() {
    const [fontsLoaded] = useFonts({
        Comfortaa_300Light,
        Comfortaa_400Regular,
        Comfortaa_500Medium,
        Comfortaa_600SemiBold,
        Comfortaa_700Bold,
    });

    if (!fontsLoaded) {
        return null;
    }
    return (
        <Routes/>
    );
}

I inserted the Drawer like this:

export default function App() {
    const [fontsLoaded] = useFonts({
        Comfortaa_300Light,
        Comfortaa_400Regular,
        Comfortaa_500Medium,
        Comfortaa_600SemiBold,
        Comfortaa_700Bold,
    });

    if (!fontsLoaded) {
        return null;
    }
    const Drawer = createDrawerNavigator();
    function CustomDrawerContent(props) {
        return (
            <DrawerContentScrollView {...props}>
                <DrawerItemList {...props} />
                <DrawerItem
                    label="Close drawer"
                    onPress={() => props.navigation.closeDrawer()}
                />
                <DrawerItem
                    label="Toggle drawer"
                    onPress={() => props.navigation.toggleDrawer()}
                />
            </DrawerContentScrollView>
        );
    }
    function MyDrawer() {
        const Drawer = createDrawerNavigator();

        return (
            <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>
                <Drawer.Screen name="Home" component={Welcome}/>
                <Drawer.Screen name="Map" component={IncidentsMap}/>
                <Drawer.Screen name="CreateIncident" component={SelectIncidentLocation}/>
            </Drawer.Navigator>
        );
    }

    return (
        /*<Routes/>*/

        <NavigationContainer>
            <MyDrawer/>
        </NavigationContainer>
    );
}

Here is my Routes file:

export default function Routes() {
    return(
        <NavigationContainer>
            <Navigator screenOptions={{headerShown: false}}>
                {/*<Screen name="GetLocationTest" component={GetLocationTest}/>*/}
                <Screen name="WelcomePage" component={WelcomePage}/>
                <Screen name="WelcomePageStep2" component={WelcomePageStep2}/>
                <Screen name="IncidentsMap" component={IncidentsMap}/>
                <Screen name="IncidentDetails"
                        component={IncidentDetails}
                        options={{
                            headerShown: true,
                            header: () => <Header showCancel={false} title="Incidente"/>
                        }}
                />
                <Screen name="SelectIncidentLocation" component={SelectIncidentLocation}
                        options={{
                            headerShown: true,
                            header: () => <Header title="Selecione no Mapa" showCancel={false}/>
                        }}
                />
                <Screen name="IncidentData" component={IncidentData}/>
            </Navigator>
        </NavigationContainer>
    )
}

I managed to insert the Drawer in my App.tsx but i have some conflicts when i try to use the navigation in a button, i recieve The action 'NAVIGATE' with payload was not handled by any navigator. . Is there a way that i can insert the drawer menu and still be able to use my current navigation system?

Answer 1

You can add stack navigator alongside drawer navigator

Route.js

export default function Routes() {
return(
        <NavigationContainer>
           <Navigator screenOptions={{headerShown: false}}>
             <Screen name={'MyDrawer'} component={MyDrawer}/>
             //rest of your routes
           </Navgator>
        </NavigationContainer>
}

to navigate to your drawer

navigation.navigate('MyDrawer')