Why my does drawer navigator screen has no header title, using nested (StackNavigator, DrawerNavigator)

Question

I have problem regarding disappeared header title, Currently I used Nested StackNavigator and DrawerNavigator, I have module when the user is logged in they use the drawer navigator else they will back to stack navigator.

Problem: Why does my header title disappeared ?

Here is my App.js

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

const UnauthenticatedScreen = () => {   
        
    return (
        <Stack.Navigator>
                <Stack.Screen 
                    name="Login" 
                    component={Login} 
                    options=
                    {{
                        headerShown: false,
                    }}
                />
                <Stack.Screen 
                    name="Registration" 
                    component={Register} 
                    options={{
                        headerStyle: {
                            backgroundColor: '#4ABDFF'
                        },
                        headerTitleStyle: {
                            color: '#fff',
                        },
                        headerTintColor:'#fff',
                    }}
                
                />

                <Stack.Screen 
                    name="Privacy" 
                    component={PrivacyPolicy} 
                    options={{
                        headerStyle: {
                            backgroundColor: '#4ABDFF'
                        },
                        headerTitleStyle: {
                            color: '#fff',
                        },
                        headerTitle:'Privacy Policy',
                        headerTintColor:'#fff',
                    }}
                />

                <Stack.Screen
                    name="RegistrationSuccess"
                    component={RegistrationSuccess}
                    options=
                    {{
                        headerShown: false,
                    }}
                />
        </Stack.Navigator>
    )

}

const AuthenticatedDriverScreen = () => {
    return (
        <Drawer.Navigator drawerContent={props=><CustomDriverDrawer {...props} />} initialRouteName="DriverDashboard">
            <Drawer.Screen
                name="DriverDashboard"
                component={DriverDashboard}
                options={
                    { 
                        drawerLabel: 'Home',
                        drawerIcon: ({focused, color, size}) => (
                            <Icon type="font-awesome" name="home" style={{fontSize:size, color:"black"}} />
                        ),
                        
                    }
                }
            />
            
        </Drawer.Navigator>
    )
}

function Navigator() {
    const isLogin = true;
    return (
        <NavigationContainer>
         {isLogin ? <AuthenticatedDriverScreen/> : <UnauthenticatedScreen/>}
        </NavigationContainer>

    )
}

Authenticated User Screen:

Very well appreciated for your help.

@NishargShah question. how have a header title when i acess my dashboard? — DevGe
bind both screens into createStackNavigator and you can access it — Nisharg Shah
can you please deep more explain or have example for that @NishargShah — DevGe
please create demo problem in online editor ( snake expo ), so I can easily modify it and solve your problem — Nisharg Shah

Nisharg Shah Nisharg Shah · Accepted Answer · 2020-12-24T18:21:48

First of all, you need to remember that thing React Navigation providing drawer functionality and screen functionality separately.

for connecting two functionality in one you need to bind the screen with a drawer so you can see both things in one go.

that's why first you need to make one screen navigator that contains single/multiple screen(s) so you can bind that navigator with a drawer like the below code.

const BindedScreenComponent = () => {   
    return (
      <Bind.Navigator>
        <Bind.Screen 
            name="Bind" 
            component={() => <Text>Bind</Text>}
        />
      </Bind.Navigator>
    )
}

after that, you need to bind that code into the drawer component so the drawer component can render a whole navigator and give you the desire results

<Drawer.Screen
    name="DriverDashboard"
    component={BindedScreenComponent} 
    options={
        { 
            drawerLabel: 'Home',
        }
    }
/>

snake: https://snack.expo.io/@nishargshah/react-navigation-5-boilerplate

Why my does drawer navigator screen has no header title, using nested (StackNavigator, DrawerNavigator)

2 Answers