React native navigation drawer is not covering header in my application

Question

I am new to react native development, but i have some requirement with react navigation drawer. I want to display the navigation drawer from top of the screen but it is display below from toolbar. It is a combination of both Stack and Drawer screens. Following is my code in App.js

function App() {
  SplashScreen.hide()
  return (
    <NavigationContainer>
      {/* headerMode='float' */}
      <Stack.Navigator initialRouteName='Login' >
        <Stack.Screen name="Login" component={LoginScreen}
          options={{ headerShown: false }} />
        {/* <Stack.Screen name="Home" component={HomeScreen} /> */}
        <Stack.Screen name="DrawerScreens" component={DrawerScreens} 
          options={({ navigation, route }) => ({
            title: "Home",
            headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#154493'},
            headerLeft: props => <NavigationDrawerStructure navObj={navigation} />,
          })} />

        <Stack.Screen name="Dashboard" component={Dashboard} 
            options={({ route }) => ({headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#154493'}})} />
</Stack.Navigator>
</NavigationContainer>

DrawerScreens function is like following..

function DrawerScreens({ route, navigation }) {
  // console.log("param:"+route.params.token)
  return (
    //drawerContent={props=>CustomDrawerContent(props)}
    // <SafeAreaProvider>

    <Drawer.Navigator drawerContent={props => CustomDrawerContent(props)} headerMode="float" >
    {/* <Drawer.Navigator drawerContent={props => CustomDrawerContent(props)}> */}
      {/* options={{ drawerLabel: 'Updates' }} */}

      <Drawer.Screen name="LandingScreen" component={LandingScreen}
        initialParams={{ token: route.params.token }}/>
  );
}

CustomDrawer function contains list of the menu items which is dynamic and NestedMenuView is taking care of that..

function CustomDrawerContent(props) {
  return (
 <SafeAreaView style={{flex: 1}} forceInset={{ top: "always" }}>

      <NestedMenuView navObj={props.navigation} />

      </SafeAreaView>       

  );
};

For me the combination of both stack and drawer screens.Thanks in advance.

Answer 1

I don't think the problem lies around the Stack Navigator or the Screen components;

If you use the latest, after v5 release version of @react-navigation/drawer (mine is 5.6.3) the recommended way is to use the built-in wrappers when creating custom drawer

const Drawer = createDrawerNavigator();

const Menu = (props) => {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem label="Help" onPress={() => {}} />
    </DrawerContentScrollView>
  );
};

export default function MyDrawer() {
  return (
    <Drawer.Navigator
      initialRouteName="Tabs"
      drawerContent={(props) => <Menu {...props} />}
      edgeWidth={100}
      drawerContentOptions={{
        activeTintColor: Colors.accentColor,
        labelStyle: {
          fontFamily: 'open-sans',
        },
      }}
    >
      <Drawer.Screen...
    </Drawer.Navigator>
  );

You can also leave the scrollview and create custom ui like this:

const contentOptions = {
    activeBackgroundColor: '#dbdbdb',
    activeLabelStyle: {
        fontSize: 16,
        color: 'black',
        fontFamily: 'roboto'
    },
    labelStyle: {
        fontSize: 16,
        fontWeight: 'normal',
        color: intenseGrey,
        fontFamily: 'roboto'
    }
};

    return (
        <View
            style={{
                display: 'flex',
                flexDirection: 'column',
                flexGrow: 1
            }}
        >
            <SafeAreaView style={{ flex: 1, paddingBottom: 0 }}>
                <View style={{
                    backgroundColor: '#dbdbdb',
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'space-between',
                    flexGrow: 1}}
                 >
                    <View>
                        <DrawerItemList {...props} {...contentOptions} />
                    </View>
                </View>
            </SafeAreaView>
        </View>
    );

Answer 2

I think the reason that Drawer is not covering is because you put the Drawer navigation inside your Stack navigation.

Yours

Stack
   Drawer

To fixed that you have to readjust the order

Drawer
    Stack

For example (or you could see from my snack here: https://snack.expo.io/@gie3d/d25aca)

const HomeStack = () => (
  <Stack.Navigator>
    <Stack.Screen name="Home" component={Home} options={({navigation}) => ({
      title: "Home",
      headerLeft: () => (
          <Ionicons
            name={'md-menu'}
            size={24}
            style={{ marginLeft: 10 }}
            onPress={() =>
              navigation.dispatch(DrawerActions.toggleDrawer())
            }
          />
        ),
    })} />
  </Stack.Navigator>
);

const Home = () => {
  return (
  <View>
    <Text>This is Home</Text>
  </View>
)}

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

Answer 3

The following stacks created and calling these stacks from Drawer Screens.

const LandingStack = ({ route, navigation }) => (
  <Stack.Navigator>
    <Stack.Screen name="LandingScreen" component={LandingScreen} options={({navigation}) => ({
      headerTitle: 'Home',
      headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#000' },
      headerLeft: props => <NavigationDrawerStructure navObj={navigation} />,
    })} />
  </Stack.Navigator>
);

const TicketingStack = () => (
  <Stack.Navigator>
    <Stack.Screen name="TicketingDashboard" component={TicketingDashboard} options={({route, navigation}) => ({
      headerTitle: route.params.type,
      headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#000' },
      headerLeft: props => <NavigationDrawerStructure navObj={navigation} />,
    })} />
  </Stack.Navigator>
);


function DrawerScreens({ route, navigation }) {
  // console.log("param:"+route.params.token)
  return (
    //drawerContent={props=>CustomDrawerContent(props)}
    <SafeAreaProvider>

    <Drawer.Navigator drawerContent={props => CustomDrawerContent(props)} headerMode="screen">


      {/* options={{ drawerLabel: 'Updates' }} */}

      {/* <Stack.Screen name="DrawerScreens" component={DrawerScreens}
          options={({ navigation, route }) => ({
            title: "Home",
            headerTintColor: '#FFFFFF', headerStyle:{backgroundColor:'#000' },
            headerLeft: props => <NavigationDrawerStructure navObj={navigation} />,
          })} /> */}

      <Drawer.Screen name="LandingStack" component={LandingStack}

        initialParams={{ token: route.params.token }}/>

      <Drawer.Screen name="HomeStack" component={HomeStack}
        initialParams={{ token: route.params.token }} />
    </Drawer.Navigator>

    </SafeAreaProvider>
  );
}

And I have removed header part from the function App and finally looks like this in the App.js

 <Stack.Screen name="DrawerScreens" component={DrawerScreens}
          options={{ headerShown: false }} />