Version: 2.x

Drawer navigation

class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity onPress={this.props.navigation.openDrawer}>
<Text>Open Drawer</Text>
</TouchableOpacity>
<Text style={{ fontWeight: 'bold', marginTop: 20 }}>Home</Text>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity onPress={this.props.navigation.openDrawer}>
<Text>Open Drawer</Text>
</TouchableOpacity>
<Text style={{ fontWeight: 'bold', marginTop: 20 }}>Settings</Text>
</View>
);
}
}
const DrawerNavigator = createDrawerNavigator(
{
Home: HomeScreen,
Settings: SettingsScreen,
},
{
drawerBackgroundColor: 'rgba(255,255,255,.9)',
contentOptions: {
activeTintColor: '#fff',
activeBackgroundColor: '#6b52ae',
},
}
);
export default createAppContainer(DrawerNavigator);
โ†’ Run this code

To open and close drawer, use the following helpers to open and close the drawer:

this.props.navigation.openDrawer();
this.props.navigation.closeDrawer();

If you would like to toggle the drawer you call the following:

this.props.navigation.toggleDrawer();

Each of these functions, behind the scenes, are simply dispatching actions:

this.props.navigation.dispatch(DrawerActions.openDrawer());
this.props.navigation.dispatch(DrawerActions.closeDrawer());
this.props.navigation.dispatch(DrawerActions.toggleDrawer());