ReactNative: Using Drawer.Navigator inside TabNavigator throws "navigation.openDrawer is not a function"

Question

What I want to achive:

Tap on an icon in bottomTabNavigator to open DrawerNavigator.

What I get:

An error stating: "TypeError: navigation.openDrawer is not a function. (In 'navigation.openDrawer()', 'navigation.openDrawer' is undefined)"

My Code:

<NavigationContainer>

        <Tab.Navigator
          initialRouteName="Home"
          tabBarOptions={{
            activeTintColor: '#e91e63',
            style: {},
            labelStyle: {margin:0},
          }}
        >
          <Tab.Screen
            name="Home"
            component={HomeStack}
            options={{
              tabBarLabel: 'News',
              tabBarIcon: ({ color, size }) => (
                <MaterialCommunityIcons name="newspaper" color={color} size={size} />
              ),
            }}
          />
          <Tab.Screen
            name="Categories"
            component={CategorieStack}
            options={{
              tabBarLabel: 'Kategorien',
              tabBarIcon: ({ color, size }) => (
                <MaterialCommunityIcons name="format-list-bulleted-square" color={color} size={size} />
              ),
            }}
          />
          <Tab.Screen
            name="Menu"
            component={DrawerStack}
            options={{
              tabBarLabel: 'Menu',
              tabBarIcon: ({ color, size }) => (
                <MaterialCommunityIcons name="menu" color={color} size={size} />
              ),
            }}
            listeners={({ navigation }) => ({
              tabPress: e => {
                e.preventDefault();
                navigation.openDrawer();
              }
            })}
          />

        </Tab.Navigator>


    </NavigationContainer>

and

const Drawer = createDrawerNavigator();

function DrawerStack() {
  return (
    <Drawer.Navigator>
            <Drawer.Screen name="Home" component={Home} />
            <Drawer.Screen name="Categories" component={Categories} />
        </Drawer.Navigator>
  );
}

Already read:

https://github.com/react-navigation/hooks/issues/36

Opening the Drawer navigator from the bottom tab

And many more. Just can't seem to get it to work. I think I do miss a really important point in this. Is anyone able to point me into the right direction?

Please, provide name of libraries, sometimes, way how you import libs metters, so, in may be helpful to include into the example of code you provided, the way how you import components. — Alex Shtromberg, Sep 23 '21 at 15:57
Please provide enough code so others can better understand or reproduce the problem. — Community, Sep 23 '21 at 15:58

amiellion · Answer 1 · 2021-09-16T11:30:49.043

In my case, my bottomTabNavigator is a child of my drawerNavigator( not sure if this is required for it to work tho)

so using this bit works:

 listeners={({ navigation }) => ({
     tabPress: e => {
        e.preventDefault();
        navigation.openDrawer();
     }
 })}

Inside Drawer Navigator:

<Drawer.Navigator
    initialRouteName="MyRoute"
    drawerStyle={styles.drawerStyle}
    lazy
>
        {/*Bottom Tab Navigator*/}
        <Drawer.Screen
           name="MyRoute"
           component={MyBottomTabs}
           options={{
              drawerIcon: ({ focused, size }) => (
                 <Ionicons 
                    name={focused?"md-home": "md-home-outline"}
                    size={size}
                    color={focused ? COLORS.primary : '#ccc'} />
              )
           }}
        />
        <Drawer.Screen
           name="Profile"
           component={UserProfile}
           options={{
              drawerIcon: ({ focused, size }) => (
                 <Ionicons 
                    name={focused?"md-person-sharp": "md-person-outline"}
                    size={size}
                    color={focused ? COLORS.primary : '#ccc'} />
              )
           }}
        />
        <Drawer.Screen
           name="Elect"
           component={WebViewElect}
           options={{
              drawerIcon: ({ focused, size }) => (
                 <Entypo 
                    name="new"
                    size={size}
                    color={COLORS.danger} />
              ),
              
           }}
        />
</Drawer.Navigator>

Inside MyBottomTabs:

<Tabs.Navigator initialRouteName="Dashboard" >
    {/*Bottom Tab Screens */}
    <Tabs.Screen name="Dashboard" component={DashboardStack}/>

    <Tabs.Screen name="Refer A Friend" component={WebViewRefer}
       options={{
          tabBarButton: () => null,
          tabBarVisible: false
       }}
       listeners={({ navigation }) => ({
          tabPress: e => {
             console.log('Button Pressed')
             e.preventDefault();
             return navigation.openDrawer();
          }
       })}
   />
</Tabs.Navigator>

ReactNative: Using Drawer.Navigator inside TabNavigator throws "navigation.openDrawer is not a function"

1 Answers1