react-nativereact-navigation

Disable swipe gesture from opening the navigation drawer using react-navigation


I am using react-navigation (https://reactnavigation.org) and I am trying to disable the option that the side drawer opens when the user swipes right/left

I`ve looked through the documentation and i cant find the options that does the trick

const RootStack = createDrawerNavigator(
  {
    Login: {
      screen: Login,
    },
    Components: {
      screen: Components
    },
    Home: {
      screen: Home
    }
  },
  {
    initialRouteName: 'Login',
    gesturesEnabled: false,
    headerMode: 'none',
    contentComponent: SideBar,
    contentOptions: {
      labelStyle: {
        color: 'white'
      }
    }
  }
);

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { loading: true };
  }

  async componentWillMount() {
    await Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
      'Montserrat-Light': require("./app/assets/fonts/Montserrat-Light.ttf"),
      'Montserrat-Medium': require("./app/assets/fonts/Montserrat-Medium.ttf")
    });
    this.setState({ loading: false });
  }

  render() {
    if (this.state.loading) {
      return (
        <Text>Loading</Text>
      );
    }
    return (
      <RootStack/>
    );
  }
}

Solution

  • You can use the drawerLockMode in the screen navigation options using the option locked-open

    locked-open: the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically

    Other options can be viewed here

    static navigationOptions = {
         drawerLockMode: 'locked-open',
    }