React native react-navigation drawer not opening

Question

I am using react-navigation as the navigation package for my react native application. and have also installed and configured react-native-gesture-handler along with react-navigation as mentioned in the documentation.

The problem i am facing is that the drawer doesn't open at random times. mostly this occurs when user goes through along the main stack navigation and comes back to home to open the drawer. otherwise the drawer seems to be working without any issues.

this is how i have configured my navigation,

MAIN STACK NAVIGATION

const AppStack = createStackNavigator(
 {
   DrawerNav: DrawerNav,
   Home: Home,
   Notification: Notification,
   HomeSearch: HomeSearch
 }

DRAWER NAVIGATION

const MyDrawerNavigator = createDrawerNavigator(
 {
   Home: Home,
   MyAccount: MyAccount,
   ContactUs: ContactUs,
   InviteFriend: InviteFriend,
   Terms: Terms,
   SignOut: SignOut
 },

And the MAIN STACK also contains a few TAB STACK also, I want to know why the drawer doesn't respond.

The Code i used to open the drawer was

this.props.navigation.openDrawer();

bu the above code gave

this.props.navigation.openDrawer() undefined

when ever the above crash i mentioned occurs

as a fix i used,

import { DrawerActions } from "react-navigation";

this.props.navigation.dispatch(DrawerActions.openDrawer())

the above code also stop working after a the user goes through the STACK navigation a few times, but doesn't give any errors on development.

This error occurs both on production as well as development

currently running react native : 0.59.8 react : 16.8.3 react navigation: 3.9.1, react-native-gesture-handler:1.1.0,

any help would be much appreciated, Thanks in advance

Can you elaborate a bit more on the intended navigation structure? Why do they both have Home key? — cltsang
– cltsang, Commented Jun 13, 2019 at 9:46

cltsang · Accepted Answer · 2019-06-13 10:10:54Z

1

+100

Try wrapping all your stack navigation with Drawer navigation.

const StackNav = createStackNavigator({
  Home: Home,
  Notification: Notification,
  HomeSearch: HomeSearch
}

Now wrap the above with Drawer navigation

const AppStack = createDrawerNavigator({
  StackNav: {
    screen: StackNav,
    navigationOptions: {
      drawerLabel: <Hidden />,
    },
  },
  Home: Home,
  MyAccount: MyAccount,
  ContactUs: ContactUs,
  InviteFriend: InviteFriend,
  Terms: Terms,
  SignOut: SignOut
});

Now the StackNav will be showing in the Drawer as one of the screens. So create a class and return null then pass it down to Drawer label.

class Hidden extends Component {
  render() {
    return null;
  }
}

Now you'll be able to call the this.props.navigation.openDrawer(); anywhere on the app. Let me know if it works.

edited Jun 13, 2019 at 10:10

cltsang

1,8391 gold badge15 silver badges20 bronze badges

answered Jun 7, 2019 at 11:12

Gowtham

4965 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Naveed Sheriffdeen Over a year ago

i tried it, and i could't access openDrawer() from anywhere at all, The problem i have is not that i can't access it it just stops working after a while

Community · Accepted Answer · 2020-06-20 09:12:55Z

I think you can use another easy way to handle this problem :

You can use react-native-drawer that is available in this link now i'm going to show you how you can work with it :

AppStack :

const AppStack = createStackNavigator(
 {
   Home: Home,
   Notification: Notification,
   HomeSearch: HomeSearch
 }

Home Navigation

const MyHomeNavigator = createStackNavigator(
 {
   Home: Home,
   MyAccount: MyAccount,
   ContactUs: ContactUs,
   InviteFriend: InviteFriend,
   Terms: Terms,
   SignOut: SignOut
 },

Now lets assume this is your HomePage :

HomePage

import Drawer from 'react-native-drawer'
import DrawerComponent from '../components/drawer'

export default class HomePage extends Component{
  render() {
    return (
      <Drawer  ref={(ref) => this._drawer = ref} content={<DrawerComponent  {...this.props}/>} side='right' captureGestures openDrawerOffset={0.3} acceptTap>
        //your home page components
      </Drawer>
    )
  }
}

as you can see you can access to the drawer by this._drawer and here i will show you how does <DrawerComponent> like :

DrawerComponent :

export default class DrawerComponent extends React.Component {
  navigateTo = (path) => {
      this.props.navigation.navigate(path)
  }
  render(){
    return(
      <View>            
        <View>
          <Item path='MyAccount' navigate = {this.navigateTo}/>
          <Item path='ContactUs' navigate = {this.navigateTo}/>
          <Item path='InviteFriend' navigate = {this.navigateTo}/>
          //And you add all the item you need here with navigateTo function
        </View>
        <View>
          //LogOut Section
        </View>
      </View>
    )
  }
}

This Works for me fine, I hope this works for you too.

Best regards .

Maksym Bocharov · Accepted Answer · 2023-08-01 09:08:25Z

0

try to import 'react-native-gesture-handler'; in your app.js or index.js file

answered Aug 1, 2023 at 9:08

Maksym Bocharov

536 bronze badges

Collectives™ on Stack Overflow

React native react-navigation drawer not opening

3 Answers 3

1 Comment

AppStack :

Home Navigation

HomePage

DrawerComponent :

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

AppStack :

Home Navigation

HomePage

DrawerComponent :

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related