react-navigation v5 - how to toggle drawer

Question

I upgraded to react-navigation V5, and am so confused how to get the Drawer to work. I had a custom drawer before, but now I'm just trying to get a sample drawer working.

I am trying to open the drawer with this.props.navigation.dispatch(DrawerActions.toggleDrawer())

The action 'TOGGLE_DRAWER' was not handled by any navigator.

Is your screen inside a Drawer navigator?

Here are the relevant files:

MessagesStackRouter.js

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';


const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

function DrawerNavigation() {
  return (
     <Drawer.Navigator
      drawerType={"slide"}
     >
      <Drawer.Screen name="Dash" component={DashboardContainer} />
     </Drawer.Navigator>
 );
}

function MessagesStackRouter() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initalRoute="Login"
        screenOptions={{ gestureEnabled: true, headerShown: false }}
        >
        <Stack.Screen name="Login" component={LoginView} />
        <Stack.Screen name="DrawerNavigation" component={DrawerNavigation} />
        <Stack.Screen name="Dashboard" component={DashboardContainer} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default MessagesStackRouter;

App.js

  return (
    <View style={{flex:1, backgroundColor: 'white'}}>
      <StatusBar hidden={true} />
      <Provider store={createStore(reducers)}>
          <MessagesScreenRouter/>
      </Provider>
    </View>
  );

relevant parts of TopNavBar.js

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

class TopNavBar extends Component {

  constructor(props) {
    super(props);

    this.onBurgerBarPress = this.onBurgerBarPress.bind(this)
  }

  onBurgerBarPress() {
    this.props.navigation.dispatch(DrawerActions.toggleDrawer())
  }

  render() {
    return (
      <View style={styles.navBar}>
        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
          <TouchableOpacity onPress={()=> this.onBurgerBarPress()}>
            <Icon
                name={"Menu"}
                strokeWidth="1.5"
                stroke={'#03A9F4' }
                fill={'#03A9F4'}
              />
          </TouchableOpacity>
        </View>
      </View>
    )
  }
};


const mapStateToProps = (state) => {
  return {
    onboarding: state.onboarding,
    currentUser: state.currentUser
  }
}


export default connect(mapStateToProps, actions)(TopNavBar);

You get an error because the screen where you have the drawer navigator is not rendered. You should nest the stack navigator inside the drawer navigator instead of drawer inside stack which will work better for your case. — satya164, May 10 '20 at 17:22
Check this [answer](https://stackoverflow.com/questions/61340284/is-is-possible-to-use-navigation-toggledrawer-in-navigation-options/61352295#61352295) — CevaComic, May 10 '20 at 23:52
@satya164 that was it -- thank you so much!! Happy to accept your answer if posted below :) — gwalshington, May 11 '20 at 12:31

score 1 · Accepted Answer · answered May 11 '20 at 12:33

1

You get an error because the screen where you have the drawer navigator is not rendered. You should nest the stack navigator inside the drawer navigator instead of drawer inside stack which will work better for your case.

answered May 11 '20 at 12:33

satya164

9,464
2
31
42

react-navigation v5 - how to toggle drawer

1 Answers1