javascriptreact-nativenavigation-drawerreact-navigationreact-native-drawer

React Native - Accessing drawer navigation outside of AppNavigator


  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?


Solution

  • 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