Search code examples
javascriptreactjsreact-nativereact-navigationreact-navigation-v5

SwipeEnabled: false option is not working


I have trouble with react-navigation 5 on my react-native project, I want to disable drawer swipes but keep close drawer by click outside it. I have read about this property on react-navigation docs. GestureEnabled property works, but it dismisses close drawer by click

here's screen

const Home = ({ route, navigation }) => {
};
Home.navigationOptions = () => ({
  swipeEnabled: false,
  edgeWidth: 0,
});
export default observer(Home);

here's navigator

    <NavigationContainer>
        <Drawer.Navigator
          initialRouteName="Головна"
          edgeWidth={wp(100)}
          drawerContent={(props) => <CustomDrawer {...props} />}
        >
          <Drawer.Screen name="Головна" component={Home} />
          <Drawer.Screen name="Історія" component={MyTrips} />
          <Drawer.Screen name="Мій профіль" component={Profile} />
          <Drawer.Screen name="Про водія" component={AboutDriver} />
          <Drawer.Screen name="Мої бонуси" component={MyBonuses} />
          <Drawer.Screen name="Мої місця" component={MyPlaces} />
        </Drawer.Navigator>
    </NavigationContainer>
````

Solution

  • In case you don't need to disable swipe for specific screen

    <NavigationContainer>
        <Drawer.Navigator
          initialRouteName="Головна"
          edgeWidth={wp(100)}
          drawerContent={(props) => <CustomDrawer {...props} />}
          screenOptions={{swipeEnabled: false}}
        >
          ...
        </Drawer.Navigator>
    </NavigationContainer>