CODEWITHSUNDEEP
react-nativereact-navigation
gwalshington
gwalshington

Reputation: 1505

react-navigation v5 - how to toggle drawer

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);

Upvotes: 0

Views: 1838

Answers (1)

satya164
satya164

Reputation: 10152

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.

Upvotes: 1

Related Questions