React-native-router-flux: Hide Drawer for only login page

[scaki]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.28
• react-native v0.52.2

Expected behaviour

Hiding drawers on some screen

Actual behaviour

Drawer opened by dragging

Steps to reproduce

return (
  <Router navigationBarStyle={styles.navBar} titleStyle={styles.navTitle}>
    <Drawer key="drawer" drawer contentComponent={SideMenu} drawerWidth={220}>
      <Scene key="root">
        <Scene key="Login" drawer={false} component={Login} initial={true} hideNavBar/>
        <Scene key="Anasayfa" component={Anasayfa} title="Anasayfa" initial={false} renderLeftButton={null} />
        <Scene key="Cari" component={Cari} title="Cari" />
        <Scene key="Siparis" component={Siparis} title="Siparis" />
        <Scene key="Fatura" component={Fatura} title="Fatura" />
      </Scene>
    </Drawer>
  </Router >
);

}

[Kiozak]

Sorry if i didn't answer you , but can you show me a sample how did you made that drawer please !??

[scaki]

Sorry my english is a bit bad, my codes are in the problem I asked. I do not want the drawer to work on a screen with a blue background. That is my login screen and the drawer screen should not work on the login screen

[Blapi]

@safacaki try this ?

drawerLockMode | enum('unlocked', 'locked-closed', 'locked-open') |   | If a child of a drawer, specifies the lock mode of the drawer (https://facebook.github.io/react-native/docs/drawerlayoutandroid.html#drawerlockmode)
-- | -- | -- | --

[dborzouei]

hi @safacaki
you can use this code

  static navigationOptions = ({navigation}) => {
        return {
            ...
            drawerLockMode: 'locked-closed'

        }
    }

[sojimon]

@safacaki I have the same issue.Are you solved this issue?

[sojimon]

@dborzouei Hi, I am using react-native router-flux for routing.Is your suggestion valid in my case? I used react-native-router-flux for routing and native-base for drawer.

[sojimon]

And my App.js is as follows,

 render() {
    return (
      <Provider store={store}>
        <Drawer
          ref={(ref) => { this.drawer = ref; }}
          content={<SideBar navigator={this.navigator} closeDrawer={this.closeDrawer} />}
          onClose={() => this.closeDrawer()}
          panHandlers={null}
          openDrawerOffset={0.2}
          panOpenMask={0.20}

        >
          <RouterWithRedux>
            <Scene key="root">
              <Scene key="signIn" component={SignIn} title='Sign In' hideNavBar={true} panHandlers={null} renderBackButton={() => (null)} ></Scene>
              <Scene key="retailers" component={Retailer} hideNavBar={false} title='Retailers' panHandlers={null} openDrawer={this.openDrawer} closeDrawerHome={this.closeDrawer} renderbackButton={() => (null)} renderLeftButton={<View></View>}></Scene>
              <Scene key="retailerDetails" component={RetailerDetails} hideNavBar={false} title='Retailer Details' panHandlers={null} openDrawer={this.openDrawer} closeDrawerHome={this.closeDrawer}></Scene>
              <Scene key="dashboard" component={Dashboard} hideNavBar={false} title='dashboard' openDrawer={this.openDrawer} panHandlers={null} closeDrawerHome={this.closeDrawer}></Scene>
            </Scene>
          </RouterWithRedux>
        </Drawer>
      </Provider>
    );
  }

[edoantonioco]

So Im in the same situation than you.

I know the way to fix this is to not have any layer between the <Drawer> and the <Scenes>, in that case drawerLockMode will work fine.

But there is another bug where you cant send props to another screens, and for that you need to have the <Stack key="root" hideNavBar={false}> between the Drawer and the Scenes. And 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

[ErimTuzcuoglu]

I could solve this problem with using drawer inside stack. Like below screenshot.

[edoantonioco]

Using the drawer inside stack technically fixes it, but it opens other bugs of props not passing to childs, and screen to screen animations looks different and less pretty