React Native - Accessing drawer navigation outside of AppNavigator

Question

  App.js 
    <Store>
      <Navbar />
      <AppNavigator ref={navigatorRef => {
          NavigationService.setTopLevelNavigator(navigatorRef);
        }} />
    </Store>

I wanna be able to access

 props.navigation.openDrawer();

from navbar but I get

undefined is not an object (evaluating 'props.navigation.openDrawer')

onPress
    Navbar.js:70:29
    etc..

How can I allow NavBar to access the drawer?

for accessing React Navigation outer of component or appNavigator you can use follow official React Navigation document: https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html — Majid Lotfinia, Oct 25 '19 at 18:51

score 3 · Accepted Answer · answered Oct 25 '19 at 23:42

3

I suppose you are following Navigating without the navigation prop (if you don't then you should in your case). Then in NavigationService.js add openDrawer method

// NavigationService.js

import { DrawerActions } from 'react-navigation-drawer';

...

// add this function
function openDrawer(routeName, params) {
  _navigator.dispatch(DrawerActions.openDrawer());
}


export default {
  ...
  // and export it
  openDrawer
};

then instead of props.navigation.openDrawer(), use

NavigationService.openDrawer()

don't forget to make respective imports

answered Oct 25 '19 at 23:42

Max

4,473
1
16
18

Exactly what I needed. Thanks – Mike Shiv Oct 26 '19 at 12:41
Hey @Max Can you check this question please? https://stackoverflow.com/questions/58607272/how-to-add-drawer-in-react-native – Oliver D Oct 29 '19 at 15:12

score 3 · Answer 2 · answered Dec 02 '20 at 11:07

this is how i used openDrawer without navigation prop:

in your App.js (or other router)

1/

import { DrawerActions } from '@react-navigation/native';

2/

export const navigationRef = React.createRef();

3/

export function openDrawer(routeName, params) {
  navigationRef.current.dispatch(DrawerActions.openDrawer());
}

4/ inside your navigation container add this ref

<NavigationContainer ref={navigationRef}>

5/ call your function somewhere where openDrawer is created:

<TouchableOpacity onPress={() => openDrawer()}>
        <Image
          source={tab}
          style={{
            width: 20,
            height: 20,
          }}
        />
</TouchableOpacity>

React Native - Accessing drawer navigation outside of AppNavigator

2 Answers2

Linked