In my react-native application, I want the drawer to be disabled on some screens. All the screens are Stack and passed to drawerNavigation
. Specifying navigationOptions
for these two screens with gestureEnabled
or swipeEnabled
to false
, still by swiping the drawer opens
const StackScreens = ({navigation}) => (
<Stack.Navigator
initialRouteName="SplashScreenCtrl"
headerMode="screen"
screenOptions={{}}
mode="card">
<Stack.Screen name="Splash" component={SplashScreenCtrl} options={{gestureEnabled: false}}/> // or swipeEnabled:false
<Stack.Screen name="Login" component={LoginScreen} options={{gestureEnabled: false}}/>
{/* and 10 more screens*/}
</Stack.Navigator>
);
// and in the render method
return (
<StatusBar backgroundColor="black" barStyle="light-content" />
<NavigationContainer>
<Drawer.Navigator drawerContent={(props) => <CustomDrawer {...props} />} >
<Drawer.Screen name="DrawerScreen" component={StackScreens} />
</Drawer.Navigator>
</NavigationContainer>
);
Also defining the navigation options on screen does not work Like;
// in LoginScreen.js
static navigationOptions = ({navigation}) => ({
headerShown: false,
swipeEnabled: false,
});
// Then at creating stack navigator
<Stack.Screen name="Login" component={LoginScreen} options={LoginScreen.navigationOptions}/>