React-native-router-flux: Disable open gesture for drawer.

[antofa]

Version

• react-native-router-flux v4.0.0-beta.21
• react-native v0.48.0

Expected behaviour

Drawer can't be open by gesture.

Steps to reproduce

Is it possible to disable opening drawer by user gesture (allow open only by click on specific button in navbar)? I can't find how to do this in repository docs. Is there any workaround?

For android official component offers to use drawerLockMode (https://facebook.github.io/react-native/docs/drawerlayoutandroid.html#drawerlockmode)

[mcabs3]

This project uses the DrawerNavigator from react-navigation. It looks like they don't have anything in their docs to support the behavior you are looking for.

[aksonov]

It is not supported yet by react-navigation.

[hungdev]

@aksonov
https://github.com/react-community/react-navigation/pull/793

[pgonzalez-santiago]

Any news regarding this? I wold like to disable gesture in some scenes.

[GuillaumeMunsch]

If I'm not wrong this issue https://github.com/react-community/react-navigation/pull/1377 offers the possibility to do so in react-navigation and it has been merged to master 11 days ago and a new release of this package (1.0.0-beta.13) has been published to npm 5 days ago so I imagine this is in the new release.

Documentation has been updated here as well https://github.com/react-community/react-navigation/blob/17c910fb5d69e02ef4015dfbf6a83d07019f4d03/docs/api/navigators/DrawerNavigator.md#drawerlockmode

[alexandersch]

As a temporary workaround, this still works for me:

static navigationOptions = (props) => {
    return ({ 
        headerLeft: <BackButton {...props} />,
        drawerLockMode: 'locked-closed'
    })
  }

[GuillaumeMunsch]

This is a workaround using plain react-navigation right ? This isn't using the API of RNRF

[omeraplak]

@Alexandersch
Hello,
Can you more explain how we can use?

[alexandersch]

@GuillaumeMunsch
Yes this is from react-navigation. But this still works.

@omeraplak
I've added this snippet to my Scene component class. No need to import stuff from react-navigation. Because RNRF is using the react-navigation API in the background.

[antonsivogrivov]

Any updates about this?

[ital0]

Also having the same issue.
Tried solution provided by @Alexandersch, but I can't disable swipe gesture :( probably I've did something wrong.

[aksonov]

Interesting, now RNRF passes drawerLockMode to react-navigation correctly, but I don't see it works. I used 'locked-closed' but still can open drawer with the back gesture...

[YoranRoels]

Works for me by passing drawerLockMode={'locked-closed'} to the Drawer's child component (Tabs in my case).
Credits: https://github.com/aksonov/react-native-router-flux/issues/2566#issuecomment-355879991
Only tested on iOS, someone might have to confirm for Android - don't have much time at the moment.

[BenFausch]

@YoranRoels you saved me! I see it working in a nexus 5 android emulator.

[gupta-ji6]

Try this:

const AppNavigator = StackNavigator(
  {
    // Drawer: { screen: Drawer },
    Register: {
      screen: Register,
      navigationOptions: ({ navigation }) => ({
        drawerLockMode: "locked-closed",
      })
    },
    TabHome: { screen: TabHome },
    Album: { screen: Album },
    offlineContent: { screen: offlineContent },
    changePassword: { screen: changePassword },
    Player: {screen: Player},
  },
  {
    initialRouteName: "TabHome",
    // header: null
  }
);

[aksonov]

Please try to reproduce it with Example project and latest version 4.0.0-beta.40. Feel free to open if the issue still exists

[edoantonioco]

This issue is a hard to fix for me.
First to all, I need to have the <Stack key="root" hideNavBar={false}> inside the <Drawer> tags because othewise sending props to another screens wont work at all. But having that Stack between the Drawer and the Scenes makes the drawerLockMode to not work at all.

So the way to fix a bug opens another bug

[munkhorgil]

I have exact same architecture of router with you @edoantonioco, Did you find any solution?

[edoantonioco]

I have exact same architecture of router with you @edoantonioco, Did you find any solution?

Not at all. All we can do is to expect RNRF to support react navigation 3.0 and maybe there it might get fixed https://github.com/aksonov/react-native-router-flux/issues/3393

[edoantonioco]

Tried 4.1.0-beta.2 (which is based in react navigation v3). Situation hasnt changed.

[LuisBonsembiante]

the same error is happen yet