React-native-router-flux: How to can disable drawer-swipe on the someone screen?

[avorochenko]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.16 (v3 is not supported)
• react-native v0.47.1

I have structure:

I need to disable drawer-swipe on mainScreen for example.

Thanks for help!

[antonsivogrivov]

+1

[aksonov]

Try drawerLockMode prop. Check https://facebook.github.io/react-native/docs/drawerlayoutandroid.html#drawerlockmode for more details. Docs were updated.

[antonsivogrivov]

And what about iOS?

[aksonov]

Have you tried it on iOS?

On 4 Jan 2018, at 18:27, Anton Sivogrivov [e-mail] wrote:

And what about iOS?

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub https://github.com/aksonov/react-native-router-flux/issues/2566#issuecomment-355345178, or mute the thread https://github.com/notifications/unsubscribe-auth/ABQpccytaRvGt-th63tXZQ0z8zcaOz7Dks5tHQoHgaJpZM4QMeke.

[blindbox]

If anyone didn't manage to get this to work, that's because you're supposed to put drawerLockMode into the children of <Drawer />, not the parent itself.

[sujitpk-perennial]

@blindbox as per doc drawerLockMode not support in iOS. Is it working for you?

[blindbox]

@sujitpk-perennial I don't know, I haven't got the time to give iOS a try. Anyway, I've changed the way that I'm doing my drawer. Currently, I only wrap Drawer around Scenes that requires the drawer, so drawerLockMode isn't actually needed.

[bsiddiqui]

worked for me on iOS

drawerLockMode='locked-closed'

[edoantonioco]

In my case its a very similar code, and drawerLockMode does not works. Thats because <Scene key="root"> is between the Drawer and the Scenes, if its not there it works fine.
On the other hand, you need to keep that <Scene key="root"> where it is so the app works fine (thats why I also have it there)

So I was wondering if you make it work, and how?

[danielsGit]

I have the same problem with @edoantonioco . Anyone resolved this?

[sujitpk-perennial]

@danielsGit I have crated drawerNavigator as follows

const DrawerNavigation = createDrawerNavigator (
    {
        Drawer: {
            screen: Drawer,       
    },
        HomeStacknavigation: {
            screen: customStacknavigation
        }
    },
    {
        initialRouteName: 'HomeStacknavigation',
        contentComponent: ({ navigation, ...props }) =>
            <Drawer style={{flex: 1}}/>
    }
)

In Index.js file I handled the drawerLockMode as

  constructor() {
    super()
    this.state = {
      drawerLockMode: 'unlocked'
    }
}

  lockDrawer = () => {
    this.setState({
      drawerLockMode: 'locked-closed'
    })
  }

  unlockDrawer = () => {
    this.setState({
      drawerLockMode: 'unlocked'
    })
  }


  render() {
    return (
      <View style={{ flex: 1 }}>
        <DrawerNavigation screenProps={{ drawerLockMode: this.state.drawerLockMode }} 
        />
      </View>
    );
  }

[danielsGit]

Well @sujitpk-perennial . Thanks for your reply. Btw, in this case all screens under customStacknavigation will have the side drawer? This index.js is the placeholder in the screens under customStacknavigation. yeah?

[sujitpk-perennial]

No need. You can use multiple stack navigator which will be not part of drawer navigator.
But if you have a case for ex. You want to show drawer for first and third screen, then all first, second, third will have drawer. Only using drawerLockMode we can lock the drawer for second screen.

[danielsGit]

Ok Thanks. Btw, I am using react native router flux. Your solution works with react-navigation. yeah? Do you have any suggestion how could I implement this using RNRF apis?

[sujitpk-perennial]

I am not yet used RNRF