Can't open Drawer react native

Question

I created createDrawerNavigator. But when call "props.navigation.dispatch(DrawerActions.openDrawer())" nothing show. Here is my code.

MenuNavigator.js

import { createDrawerNavigator } from "react-navigation";
import Login from "../screens/auth/Login"
import ForgotPassword from "../screens/auth/ForgotPassword"
import SignUp from "../screens/auth/SignUp";


const MenuNavigator = createDrawerNavigator({
  //Drawer Optons and indexing
  ForgotPassword: ForgotPassword,
  SignUp: SignUp,
},
  {
    contentOptions: {
      activeTintColor: '#e91e63',
    },
  }
);
export default MenuNavigator;

AppNavigator

import { createStackNavigator, createAppContainer } from "react-navigation";
import StackNavigatorMain from "./StackNavigatorMain"
import MenuNavigator from "./MenuNavigator"


const AppNavigator =  createStackNavigator(
  {
    StackNavigatorMain: StackNavigatorMain,
    MenuNavigator: MenuNavigator
  },
  {
    headerMode: "none",
    navigationOptions: {
      headerVisible: false
    },
    initialRouteName: "StackNavigatorMain"
  }
);

export default createAppContainer(AppNavigator);

Call openDrawer

onLoginClicked = () => {
    props.navigation.dispatch(DrawerActions.openDrawer());
}

keysl · Answer 1 · 2019-09-03T07:10:10.843

0

AFAIK Opening drawer from React-navigation v3 is called like this piece of code

this.props.navigation.openDrawer();

EDIT: I tried to minimally replicate this using react-navigation v3 https://snack.expo.io/@keysl183/basic-drawer-v3

edited Sep 03 '19 at 07:10

answered Sep 03 '19 at 04:55

keysl

2,127
1
12
16

it return error: "this.props.navigation.openDrawer() is not a function" – Duc Huy Nguyen Sep 03 '19 at 04:57
How do you call the onLoginClicked ? Can you also share it? – keysl Sep 03 '19 at 06:24
just a onPress button – Duc Huy Nguyen Sep 03 '19 at 06:33
Do you call that on a header? or in a screen component? – keysl Sep 03 '19 at 06:38
I call in screen component – Duc Huy Nguyen Sep 03 '19 at 06:38
It would be helpful to also include that, on the side note, react-navigation has 3 versions already. Each has different approach. Which one do you use/ – keysl Sep 03 '19 at 07:00
I'm using react-navigation": "^3.12.1" – Duc Huy Nguyen Sep 03 '19 at 07:14
I don't know why I create DrawerNavigator in AppNavigator it will work. But when I separate MenuNavigator like my code above it didn't open drawer. – Duc Huy Nguyen Sep 03 '19 at 07:29

score 0 · Answer 2 · answered Sep 03 '19 at 05:57

First get the reference of the navigator from top level component like this:

const AppContainer = createAppContainer(AppNavigator);

return <AppContainer ref={navigatorRef => Navigation.setTopLevelNavigator(navigatorRef)} />;

In Navigation.js file you need to set a global variable for navigator reference :

let _navigator;

function setTopLevelNavigator(navigatorRef) {
    _navigator = navigatorRef;
}

Then create function there like this:

function openDrawer() {
    _navigator.dispatch(DrawerActions.openDrawer())
}

Do not forget to import them:

import { DrawerActions } from 'react-navigation';

After that export them from Navigation.js file:

export default {
    setTopLevelNavigator,
    openDrawer,
}

Can't open Drawer react native

2 Answers2