DrawerNavigator header overrides StackNavigator header in React Native

Question

I have a drawer navigator which has each element as a stack navigator with one screen.

    const RootDrawerNavigator = createDrawerNavigator({
        Home:{
            name: 'Home',
            screen: HomeStack,
            navigationOptions:{
                headerMode: 'screen'
            }
        },
        ShareFilesStack:{
            name:'Offline File Sharing',
            screen: ShareFileStack,
            navigationOptions: {
                title: 'Offline File Sharing',
                headerMode: 'screen'
            },
        },
        UserProfileStack:{
            name: 'Your Profile',
            screen: UserProfileStack,
            navigationOptions: {
                title: 'Your Profile',
                headerMode: 'screen'
            },
        },
    })

The problem is that in the app the header is shown as RootDrawerNavigator instead of the headers configured in the individual stack navigators for the different screens.

I tried setting headerMode as screen and none but nothing works for me.

Answer 1

Simple route example with stack screens and drawer menu

function MainStackNavigator() {
  return (
    <Stack.Navigator headerMode="none" initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

export default function AppRouter() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={MainStackNavigator} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}