2

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}/>
Amir-Mousavi
  • 4,273
  • 12
  • 70
  • 123

1 Answers1

-2

Its late ,, but it may help some one

You should place the gestureEnabled: false in your Drawer declaration

   <Drawer.Navigator drawerContent={(props) => <CustomDrawer {...props} />} >
        <Drawer.Screen name="DrawerScreen" component={StackScreens} 
           options={{ gestureEnabled: false }}/>
Jayapen Jose
  • 55
  • 1
  • 7