Search code examples
react-nativereact-navigationreact-navigation-stackreact-navigation-drawerreact-navigation-v5

React Navigation: How to Display Navigation Drawer in all screens?


I have a Navigation Drawer which should appear in all my screen(Except for the Splash screen).

I've got it that way:


const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

const StackNavigator = () => {
    return (
        <Stack.Navigator>
            <Stack.Screen name="EstateDetails" component={Screens.EstateDetails} />
            <Stack.Screen name="Tour" component={Screens.Tour} />
            <Stack.Screen name="Comparison" component={Screens.Comparison} />
            <Stack.Screen name="Blog" component={Screens.Blog} />
            <Stack.Screen name="Auth" component={Screens.Auth} />
        </Stack.Navigator>
    );
};

const DrawerNavigator = () => {
    return (
        <Drawer.Navigator drawerContent={props => CustomDrawerContent(props)}>
            <Drawer.Screen name="HomeScreen" component={Screens.Home} />
            <Drawer.Screen name="stack" component={StackNavigator} />
            <Drawer.Screen name="RegisterEstate" component={Screens.RegisterEstate} />
            <Drawer.Screen name="Filter" component={Screens.Filter} />
            <Drawer.Screen name="Conditions" component={Screens.Conditions} />
            <Drawer.Screen name="Judicial" component={Screens.Judicial} />
            <Drawer.Screen name="ContactUs" component={Screens.ContactUs} />
            <Drawer.Screen name="ReportBugs" component={Screens.ReportBugs} />
        </Drawer.Navigator>
    )
};

export const AppNavigator = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Splash">
                <Stack.Screen name="Splash" component={Screens.Splash}/>
                <Stack.Screen name="Home" component={DrawerNavigator}/>
            </Stack.Navigator>
        </NavigationContainer>
    );
};

In this case, all the okay only stack screens act as drawer screen. (The screen only loads once and shows the initial load next time, like blog screens). ‌

I need to have the cursor on all pages except splash and to stack some of my pages (like dynamic pages that don't have the same content)


Solution

  • If you want to display same drawer in all other screens just pass {DrawerNavigator} to all other screens where you want to show the Drawer.So in your example if you want to show Drawer in Tour and Blog screen just add

    <Stack.Screen name="Blog " component={DrawerNavigator} />
    <Stack.Screen name="Tour" component={DrawerNavigator} />
    

    Now you can access in Blog and Tour screen.

    If you want to show a different Drawer in other screens then Create a new function.