CODEWITHSUNDEEP
react-nativenavigation-drawerreact-navigation
Naveed Sheriffdeen
Naveed Sheriffdeen

Reputation: 980

React native react-navigation drawer not opening

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

Upvotes: 1

Views: 3816

Answers (3)

Maksym Bocharov
Maksym Bocharov

Reputation: 53

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

Upvotes: 0

Gowtham
Gowtham

Reputation: 486

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.

Upvotes: 1

Mahdi
Mahdi

Reputation: 1405

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 .

Upvotes: 0

Related Questions