React native drawer navigator not opening

Question

I'm building a react native app and using react navigation v6 library. I've built a react navigator that works fine for the most part, but I'm facing this bug when navigating to a certain page.

I have a stack navigator:

   <NavigationContainer>

      <Stack.Navigator >
        <Stack.Screen name='LandingScreen' component={LandingScreen} options={{headerShown: false}} />
        <Stack.Screen name='LoginScreen' component={LoginScreen} options={{headerShown: false}} />
        <Stack.Screen name='RegisterScreen' component={RegisterScreen} options={{headerShown: false}} />

        <Stack.Screen name='CocktailDetailScreen' component={CocktailDetailScreen} options={{ header: () => <Header/> }} />

        <Stack.Screen name='HomeScreen' component={DrawerNavigator} options={{ header: () => <Header/> }} />
      </Stack.Navigator>
    </NavigationContainer>

And the drawer navigator:

    <Drawer.Navigator screenOptions={{
        drawerStyle: {
          backgroundColor: 'white',
          zIndex: 100
        },
        drawerPosition: 'right'
      }}>
        <Drawer.Screen name='Search cocktails' component={HomeScreen} options={{headerShown: false}} />
        <Drawer.Screen name='Profile' component={ProfileScreen} options={{headerShown: false}} />
        <Drawer.Screen name='Publish a recipe' component={PublishRecipeScreen} options={{headerShown: false}} />

        <Drawer.Screen name='Favorites' component={FavoritesScreen} options={{headerShown: false}} />
        <Drawer.Screen name='Published recipes' component={PublishedRecipesScreen} options={{headerShown: false}} />
        <Drawer.Screen name='Log out' component={LandingScreen} options={{headerShown: false}} />
    </Drawer.Navigator>

The problem occurs when navigating to CocktailDetailScreen, the thing is the drawer just won't open. The drawer is opened from the header component (which is shared by CocktailDetailScreen, homeScreen and all the screens within the drawer) and to open it I'm using navigation.dispatch(DrawerActions.toggleDrawer()). This works fine on every screen except of this one.

I've figured that If I remove CocktailDetailScreen from the stack navigator and add it to the drawer navigator, then the drawer opens normally. But I don't want this, since this page should only be accessed through other screens, not directly from the "menu"/navigator.

I'm sure this is possible, but I don't get what I'm doing wrong. Maybe I'm not nesting the navigators correctly or the screen shouldn't be in the navigator at all?

Full code is here: https://github.com/coccagerman/mixr

Fiston Emmanuel · Accepted Answer · 2022-02-04T08:55:30.397

Drawer Navigator is nested inside Stack Navigator, Screens below can access drawer specific actions ( open, close or toggle)

Search cocktails
Profile
Publish a recipe
Favorites
Published recipes
Log out

due to they are children to a Drawer navigator.

To make Drawer actions accessible to all screens, the Drawer must be a parent to all navigators.

Let's refactor our code as below.


const PublicStack = (
  <Stack.Navigator>
    <Stack.Screen
      name="LandingScreen"
      component={LandingScreen}
      options={{ headerShown: false }}
    />
    <Stack.Screen
      name="LoginScreen"
      component={LoginScreen}
      options={{ headerShown: false }}
    />
    <Stack.Screen
      name="RegisterScreen"
      component={RegisterScreen}
      options={{ headerShown: false }}
    />

    <Stack.Screen
      name="CocktailDetailScreen"
      component={CocktailDetailScreen}
      options={{ header: () => <Header /> }}
    />

    <Stack.Screen
      name="HomeScreen"
      component={DrawerNavigator}
      options={{ header: () => <Header /> }}
    />
  </Stack.Navigator>
);

const ProtectedStack = () => (
  <Stack.Navigator>
    <Stack.Screen
      name="Search cocktails"
      component={HomeScreen}
      options={{ headerShown: false }}
    />
    <Stack.Screen
      name="Profile"
      component={ProfileScreen}
      options={{ headerShown: false }}
    />
    <Stack.Screen
      name="Publish a recipe"
      component={PublishRecipeScreen}
      options={{ headerShown: false }}
    />

    <Stack.Screen
      name="Favorites"
      component={FavoritesScreen}
      options={{ headerShown: false }}
    />
    <Stack.Screen
      name="Published recipes"
      component={PublishedRecipesScreen}
      options={{ headerShown: false }}
    />
    <Stack.Screen
      name="Log out"
      component={LandingScreen}
      options={{ headerShown: false }}
    />
  </Stack.Navigator>
);

const MainStack = () => {
  // Mocked logic for authentication, Implement actually logic
  const isLoggedIn = true;

  return (
    <NavigationContainer>
      <Drawer.Navigator
        screenOptions={{
          drawerStyle: {
            backgroundColor: "white",
            zIndex: 100,
          },
          drawerPosition: "right",
        }}
      >
        {isLoggedIn ? (
          <Drawer.Screen
            name="ProtectedStack"
            component={ProtectedStack}
            options={{ header: () => <Header /> }}
          />
        ) : (
          <Drawer.Screen
            name="PublicStack"
            component={PublicStack}
            options={{ header: () => <Header /> }}
          />
        )}

        {/* This screen can be accessible even if when user is not authenticated */}

        <Drawer.Screen
          name="CocktailDetailScreen"
          component={CocktailDetailScreen}
          options={{ header: () => <Header /> }}
        />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

This is reference, refactor and structure navigation your requirements.

Explore more at https://reactnavigation.org/docs/nesting-navigators/#navigator-specific-methods-are-available-in-the-navigators-nested-inside

Thanks man! Very helpful. The key is then that to access a navigator action, such as open/close the drawer, the screen has to be a child of that navigator. I'm gonna leave my implementation down just for documentation. I have another quick question if you don't mind, what's the deal with having Stack.Screens within a Drawer.Navigator ? Doesn't it matter to have screens of a different navigator kind? Cheers! — German Cocca, Feb 04 '22 at 00:08

score 0 · Answer 2 · answered Feb 04 '22 at 00:15

My implementation was the following:

import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { createDrawerNavigator } from '@react-navigation/drawer'

import * as React from 'react'

import LandingScreen from '../screens/LandingScreen'
import LoginScreen from '../screens/LoginScreen'
import RegisterScreen from '../screens/RegisterScreen'
import HomeScreen from '../screens/HomeScreen'
import ProfileScreen from '../screens/ProfileScreen'
import CocktailDetailScreen from '../screens/CocktailDetailScreen'
import PublishRecipeScreen from '../screens/PublishRecipeScreen'
import FavoritesScreen from '../screens/FavoritesScreen'
import PublishedRecipesScreen from '../screens/PublishedRecipesScreen'

import Header from '../components/Header'

import { RootStackParamList } from '../types'

export default function Navigation() {

  const Stack = createNativeStackNavigator<RootStackParamList>()
  const Drawer = createDrawerNavigator()

  const isLoggedIn = false

  const loginStack = () => (
    <Stack.Navigator >
      <Stack.Screen name='LandingScreen' component={LandingScreen} options={{headerShown: false}} />
      <Stack.Screen name='LoginScreen' component={LoginScreen} options={{headerShown: false}} />
      <Stack.Screen name='RegisterScreen' component={RegisterScreen} options={{headerShown: false}} />
    </Stack.Navigator>
  )

  return (
    <NavigationContainer>
      <Drawer.Navigator screenOptions={{
        drawerStyle: { backgroundColor: 'white' },
        drawerPosition: 'right'
      }}>

        {!isLoggedIn ? (
          <Stack.Screen
            name="PublicStack"
            component={loginStack}
            options={{headerShown: false}}
          /> )
        :
        (<>
          <Drawer.Screen name='Search cocktails' component={HomeScreen} options={{ header: () => <Header/> }} />
          <Drawer.Screen name='Profile' component={ProfileScreen} options={{ header: () => <Header/> }} />
          <Drawer.Screen name='Publish a recipe' component={PublishRecipeScreen} options={{ header: () => <Header/> }} />
          <Drawer.Screen name='Favorites' component={FavoritesScreen} options={{ header: () => <Header/> }} />
          <Drawer.Screen name='Published recipes' component={PublishedRecipesScreen} options={{ header: () => <Header/> }} />
          <Drawer.Screen name='Log out' component={LandingScreen} options={{ header: () => <Header/> }} />

          <Drawer.Screen name='CocktailDetailScreen' component={CocktailDetailScreen} options={{
            header: () => <Header/>,
            drawerLabel: () => null,
            title: undefined
          }} />
        </>
        )}

      </Drawer.Navigator>
    </NavigationContainer>
  )
}

I made the drawer navigator the main navigator, and made a different stack navigator just for the landing, register and login pages.

Within the drawer, I have this separate stack navigator as a child screen and passing it the stack navigator as the component.

The drawer screens remain the same as I had them before, except now CocktailDetailScreen is a child of drawer navigator too and thanks to that I can now action on it. Since I don't want that screen to be accessible through the navigator menu, I just don't render it there using drawerLabel: () => null, title: undefined

React native drawer navigator not opening

2 Answers2