React navigation open openDrawer() not working

Question

This is my navigation codes, I've got a drawer navigator, that contains stacks within, the problem I am having is that I can't use this.props.navigation.openDrawer() within the stack, navigators to open the drawer but I still can open the drawer by swiping on the screen. my code,

const MyDrawerNavigator = createDrawerNavigator(
  {
    Home: AppStack,
    MyAccount: MyAccountStack,
    PointsProfile: PointsProfStack,
    WishList: WishListStack,
    BonusPoint: BonusPoint,
    ContactUs: ContactUs,
    InviteFriend: InviteFriend,
    Terms: Terms,
    SignOut: SignOut
  }
}


const AppStack = createStackNavigator(
  {
    Home: Home,
    Notification: Notification,
    Suggested: Suggested,
    HomeSearch: HomeSearchV2,
    SearchHist: DishSearchHistory,
    //tab screens
    MealScreen: MealScreenTab,
    SearchScreen: SearchScreenTab,
    CuisineScreen: CuisineScreenTab
})

when I console logged this.props.navigation within the AppStack I found out that the openDrawer() function is not provided. But when I console logged this.props.navigation within ContactUs which is just a screen, It shows openDrawer() function.

Is the way I am writing my navigation wrong, any help would be appreciated.

Thanks in advance.

Answer 1

Here you can refer the code for the navigation drawer.

    import React, { Component } from 'react';
    import { View, Image, TouchableOpacity } from 'react-native';
    import {
      createDrawerNavigator,
      createStackNavigator,
      createAppContainer,
    } from 'react-navigation';
     
    import Screen1 from './pages/Screen1';
    import Screen2 from './pages/Screen2';
    import Screen3 from './pages/Screen3';
     
    class NavigationDrawerStructure extends Component {
      //Structure for the navigatin Drawer
      toggleDrawer = () => {
        //Props to open/close the drawer
        this.props.navigationProps.toggleDrawer();
      };
      render() {
        return (
          <View style={{ flexDirection: 'row' }}>
            <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
              {/*Donute Button Image */}
              <Image
                source={require('./image/drawer.png')}
                style={{ width: 25, height: 25, marginLeft: 5 }}
              />
            </TouchableOpacity>
          </View>
        );
      }
    }
     
    const FirstActivity_StackNavigator = createStackNavigator({
      //All the screen from the Screen1 will be indexed here
      First: {
        screen: Screen1,
        navigationOptions: ({ navigation }) => ({
          title: 'Demo Screen 1',
          headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
          headerStyle: {
            backgroundColor: '#FF9800',
          },
          headerTintColor: '#fff',
        }),
      },
    });
     
    const Screen2_StackNavigator = createStackNavigator({
      //All the screen from the Screen2 will be indexed here
      Second: {
        screen: Screen2,
        navigationOptions: ({ navigation }) => ({
          title: 'Demo Screen 2',
          headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
          headerStyle: {
            backgroundColor: '#FF9800',
          },
          headerTintColor: '#fff',
        }),
      },
    });
     
    const Screen3_StackNavigator = createStackNavigator({
      //All the screen from the Screen3 will be indexed here
      Third: {
        screen: Screen3,
        navigationOptions: ({ navigation }) => ({
          title: 'Demo Screen 3',
          headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
          headerStyle: {
            backgroundColor: '#FF9800',
          },
          headerTintColor: '#fff',
        }),
      },
    });
     
    const DrawerNavigatorExample = createDrawerNavigator({
      //Drawer Options and indexing
      Screen1: {
        //Title
        screen: FirstActivity_StackNavigator,
        navigationOptions: {
          drawerLabel: 'Demo Screen 1',
        },
      },
      Screen2: {
        //Title
        screen: Screen2_StackNavigator,
        navigationOptions: {
          drawerLabel: 'Demo Screen 2',
        },
      },
      Screen3: {
        //Title
        screen: Screen3_StackNavigator,
        navigationOptions: {
          drawerLabel: 'Demo Screen 3',
        },
      },
    });
     
    export default createAppContainer(DrawerNavigatorExample);

Have a good day.

Answer 2

Only the screen of the drawer is defined, but no definition is associated with the view to be shown. You can configure your own Drawer, you can set draw value.

example

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Home',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('./chats-icon.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    );
  }
}

class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Notifications',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('./notif-icon.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.goBack()}
        title="Go back home"
      />
    );
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  },
});

const MyDrawerNavigator = createDrawerNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
});

const MyApp = createAppContainer(MyDrawerNavigator);