How to hide drawer in a specific screen ?

[hamzamekk]

"react": "16.9.0", "react-native": "0.61.5", "react-native-router-flux": "^4.0.6",

Expected behaviour i want to hide the drawer in sign in screen i have tried a lot of tips but not working like drawerLockMode and try to disable gesture handler but not working here is my code

const RouterRedux = connect()(Router);

 <RouterRedux backAndroidHandler={() => {}}>
      <Drawer
        hideNavBar
        open={false}
        key="drawer"
        contentComponent={SideBar}
        drawerWidth={300}
        // drawerLockMode={show ? 'locked-closed' : 'unlocked'}>
      >
        <Scene key="root" hideNavBar transitionConfig={transitionConfig}>
          <Scene key="Tuto" component={Tuto} type={ActionConst.RESET} />
          <Scene
            initial
            key="CheckAuth"
            component={CheckAuth}
            type={ActionConst.RESET}
          />
          {/*<Scene key="WIP" component={WorkInProgress} />*/}
          <Scene key="SignIn" component={SignIn} />
          <Scene key="ResetPassword" component={ResetPassword} />
          <Scene key="Visits" component={Visits} />
          <Scene key="VisitDetails" component={VisitDetails} />
          <Scene key="Statistiques" component={Statistiques} />
          <Scene key="Notification" component={Notification} />
          <Scene key="Sync" component={Sync} />
        </Scene>
      </Drawer>
    </RouterRedux>

[daaanigm]

I have this issue too. My old code was working properly but now, with recent updates, drawerLockMode don't work. Probably this is a bug. Waiting for responses. Thanks!

[daaanigm]

@hamzamekk I found the way to lock the drawer, and doing some changes works with your show lock/unlock variable. You need to separate the group of scenes with drawer locked and the other one (unlocked), something like that...

 <RouterRedux backAndroidHandler={() => { }}>
    <Drawer
        hideNavBar
        open={false}
        key="drawer"
        contentComponent={SideBar}
        drawerWidth={300}
    // drawerLockMode={show ? 'locked-closed' : 'unlocked'}>
    >
        <Scene
            key="root" hideNavBar
            transitionConfig={transitionConfig}
            drawerLockMode='locked-closed'
        >
            <Scene key="Tuto" component={Tuto} type={ActionConst.RESET} />
            <Scene
                initial
                key="CheckAuth"
                component={CheckAuth}
                type={ActionConst.RESET}
            />
        </Scene>
        <Scene
            key="root2"
            hideNavBar
            transitionConfig={transitionConfig}
            drawerLockMode='unlocked'
        >
            {/*<Scene key="WIP" component={WorkInProgress} />*/}
            <Scene key="SignIn" component={SignIn} />
            <Scene key="ResetPassword" component={ResetPassword} />
            <Scene key="Visits" component={Visits} />
            <Scene key="VisitDetails" component={VisitDetails} />
            <Scene key="Statistiques" component={Statistiques} />
            <Scene key="Notification" component={Notification} />
            <Scene key="Sync" component={Sync} />
        </Scene>
    </Drawer>
</RouterRedux>```

[shiroze]

Don't put all your scene inside the Drawer, exclude the scene from drawer.

<Router>
  <Overlay>
    <Modal>
      <Drawer
        hideNavBar
        open={false}
        key="drawer"
        contentComponent={SideBar}
        drawerWidth={300}
        // drawerLockMode={show ? 'locked-closed' : 'unlocked'}>
      >
        <Scene key="root" hideNavBar transitionConfig={transitionConfig}>
          <Scene key="Tuto" component={Tuto} type={ActionConst.RESET} />
          <Scene
            initial
            key="CheckAuth"
            component={CheckAuth}
            type={ActionConst.RESET}
          />
          {/*<Scene key="WIP" component={WorkInProgress} />*/}
          <Scene key="SignIn" component={SignIn} />
          <Scene key="ResetPassword" component={ResetPassword} />
          <Scene key="Visits" component={Visits} />
          <Scene key="Statistiques" component={Statistiques} />
          <Scene key="Notification" component={Notification} />
          <Scene key="Sync" component={Sync} />
        </Scene>
      </Drawer>
      <Scene key="VisitDetails" component={VisitDetails} />
    </Modal>
  </Overlay>
</Router>

or you can add hideDrawerButton to scene

[HyperNovax]

@hamzamekk I found the way to lock the drawer, and doing some changes works with your show lock/unlock variable. You need to separate the group of scenes with drawer locked and the other one (unlocked), something like that...

 <RouterRedux backAndroidHandler={() => { }}>
    <Drawer
        hideNavBar
        open={false}
        key="drawer"
        contentComponent={SideBar}
        drawerWidth={300}
    // drawerLockMode={show ? 'locked-closed' : 'unlocked'}>
    >
        <Scene
            key="root" hideNavBar
            transitionConfig={transitionConfig}
            drawerLockMode='locked-closed'
        >
            <Scene key="Tuto" component={Tuto} type={ActionConst.RESET} />
            <Scene
                initial
                key="CheckAuth"
                component={CheckAuth}
                type={ActionConst.RESET}
            />
        </Scene>
        <Scene
            key="root2"
            hideNavBar
            transitionConfig={transitionConfig}
            drawerLockMode='unlocked'
        >
            {/*<Scene key="WIP" component={WorkInProgress} />*/}
            <Scene key="SignIn" component={SignIn} />
            <Scene key="ResetPassword" component={ResetPassword} />
            <Scene key="Visits" component={Visits} />
            <Scene key="VisitDetails" component={VisitDetails} />
            <Scene key="Statistiques" component={Statistiques} />
            <Scene key="Notification" component={Notification} />
            <Scene key="Sync" component={Sync} />
        </Scene>
    </Drawer>
</RouterRedux>```

It's works fine. But if we need to switch between a screen with drawer and a screen without drawer, it's necessary to use an Actions.reset if we want to pass parameter to the scene. An Actions.replace not working as before, it just refresh the render an not pass in the componentDidMount().

[HyperNovax]

@hamzamekk I found the way to lock the drawer, and doing some changes works with your show lock/unlock variable. You need to separate the group of scenes with drawer locked and the other one (unlocked), something like that...

 <RouterRedux backAndroidHandler={() => { }}>
    <Drawer
        hideNavBar
        open={false}
        key="drawer"
        contentComponent={SideBar}
        drawerWidth={300}
    // drawerLockMode={show ? 'locked-closed' : 'unlocked'}>
    >
        <Scene
            key="root" hideNavBar
            transitionConfig={transitionConfig}
            drawerLockMode='locked-closed'
        >
            <Scene key="Tuto" component={Tuto} type={ActionConst.RESET} />
            <Scene
                initial
                key="CheckAuth"
                component={CheckAuth}
                type={ActionConst.RESET}
            />
        </Scene>
        <Scene
            key="root2"
            hideNavBar
            transitionConfig={transitionConfig}
            drawerLockMode='unlocked'
        >
            {/*<Scene key="WIP" component={WorkInProgress} />*/}
            <Scene key="SignIn" component={SignIn} />
            <Scene key="ResetPassword" component={ResetPassword} />
            <Scene key="Visits" component={Visits} />
            <Scene key="VisitDetails" component={VisitDetails} />
            <Scene key="Statistiques" component={Statistiques} />
            <Scene key="Notification" component={Notification} />
            <Scene key="Sync" component={Sync} />
        </Scene>
    </Drawer>
</RouterRedux>```

It's works fine. But if we need to switch between a screen with drawer and a screen without drawer, it's necessary to use an Actions.reset if we want to pass parameter to the scene. An Actions.replace not working as before, it just refresh the render an not pass in the componentDidMount().

I detect a problem with this method, the back behavior is possible between two scenes in different root scene. And switch between the two global scene is only possible with the first root scene.