React Native Navigation Drawer Problem ('navigation.openDrawer' is undefined))

Question

Hi guys i'm new to react native. I want to use drawer navigation with menu button. But actually i don't understand react navigation very well probably. When i press button for openDrawer i'm getting error like this;

TypeError: navigation.openDrawer is not a function. (In 'navigation.openDrawer()', 'navigation.openDrawer' is undefined)

This is My Snack Example ; https://snack.expo.io/@vubes/drawer-check

Here is useful part of my code. Maybe you can understand my problem. Thanks in advance to anyone who can help.

function DovizStack({navigation}) {

  return (
    <Stack.Navigator
      initialRouteName="Döviz"
      screenOptions={{
        headerStyle: { backgroundColor: "#1D1D1D" },
        headerTintColor: "#fff",
        headerTitleStyle: { fontWeight: "bold" },
      }}
    >
      <Stack.Screen
        name="Doviz"
        component={Doviz}
        options={{
          title: "Döviz",
          headerTitleAlign: "center",
          headerLeft: () => (<TouchableOpacity style={{paddingLeft:20}} onPress={()=> navigation.openDrawer()}>
          <MaterialCommunityIcons name="menu" color={"white"} size={20} />
             </TouchableOpacity>),
        }}
      />
      <Stack.Screen
        name="dovizBuyDetails"
        component={dovizBuyDetails}
        options={{ title: "Alış", headerTitleAlign: "center" }}
      />
      <Stack.Screen
        name="dovizSellDetails"
        component={dovizSellDetails}
        options={{ title: "Satış", headerTitleAlign: "center" }}
      />
      
    </Stack.Navigator>
  );
}

I have 5 stack like this. After that comes the myTab.

drawerStack ;

function DrawerStack() {
  return(
      <Drawer.Navigator initialRouteName="Menu" drawerPosition= "right" >
      <Drawer.Screen name="stack" component={stack} />
        <Drawer.Screen name="Doviz" component={DovizStack}/>
        <Drawer.Screen name="Altın" component={AltinStack} />
      </Drawer.Navigator>

  )
}

and default stack ;

export default function stack() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          options={{ headerShown: false }}
          name="Giriş"
          component={LandingStack}
        />   
         <Stack.Screen
          options={{ headerShown: false }}
          name="drawer"
          component={myTab}
        />
      
      </Stack.Navigator>
      </NavigationContainer>


  );
  
}

Actually i can run drawer with landingscreen(login page,register) but i don't want to display without login

It will be easy if you throw a snack.expo.io to debug the issue. https://snack.expo.io/@raajnadar/drawer-navigation---drawerposition-right-%7C-react-navigation I have one demo let me know if that was useful. — Rajendran Nadar, Jul 10 '21 at 10:36
can you create a snack from your side with the error I will solve it. — Rajendran Nadar, Jul 12 '21 at 08:02
something like that https://snack.expo.io/@vubes/drawer-check — Umut Kurt, Jul 12 '21 at 08:24

Ahmed Gaber · Answer 1 · 2021-07-13T01:14:40.900

navigation in not defined in your scope.
use options as function and receive navigation see here.
your code should look like this:

<Stack.Screen
  options={({ navigation }) => ({ //receive navigation here
    //navigation is defined  now you can use it
    headerLeft: () => (
        <TouchableOpacity 
           style={{paddingLeft:20}} 
           onPress={()=> navigation.openDrawer()}>
              <MaterialCommunityIcons name="menu" color={"white"} size={20} />
       </TouchableOpacity>),
  })}
/>

EDIT :
see full example(open drawer menu from nested stack navigation) try snack here

import * as React from 'react';
import { Button, View, Text, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';



function ProfileScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Profile Screen</Text>
    </View>
  );
}


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

function DovizStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
       name="Profile"
       options={({ navigation }) => ({ //receive navigation here
          headerLeft: () => (
              <TouchableOpacity style={{paddingLeft:20}} onPress={()=> navigation.openDrawer()}>
                    <Text>open</Text>
            </TouchableOpacity>),
          })
        }
        component={ProfileScreen} />
    </Stack.Navigator>
  );
}



function DrawerStack() {
  return(
      <Drawer.Navigator initialRouteName="Doviz">
        <Drawer.Screen name="Doviz" component={DovizStack}/>
      </Drawer.Navigator>

  )
}


export default function App() {
  return (
    <NavigationContainer>
      <DrawerStack/>
    </NavigationContainer>
  );
}

i actually did on my snack you can check but it's a good answer thank you — Umut Kurt, Jul 13 '21 at 06:19

React Native Navigation Drawer Problem ('navigation.openDrawer' is undefined))

1 Answers1