React-native-router-flux: How to hide drawer for specific scenes

[xinhash]

Version

• react-native-router-flux v4.0.0-beta.14.
• react-native v0.46.3

Expected behaviour

Drawer shouldn't be visible on some scenes.

Actual behaviour

If Scene with key as 'root' is child of Scene with drawer, the drawer is always accessible.

Steps to reproduce

I have a specific use case and that is of authentication ( common concern )

1. Set up routes as in Example
2. Use hideNavBar and hideTabbar to desiguise a scene as not accessible to unauthenticated user.
3. Swipe to access drawer even for non-authenticated user.

[aksonov]

Hm, it seems wrong design decision - have you tried to put drawer lower, it should not be parent of unauthenticated screen.

[xinhash]

When I put drawer lower

I get following error :

[aksonov]

I can't help with external code, only with Example project from this repo. Check latest master, I moved drawer

[chrissm79]

@aksonov I just tried the new example project and it indeed lets you navigate to the echo scene without throwing the no route defined error. However, the swipe to go back gesture will instead open the drawer. Based on the router's structure it would seem that the echo scene is in a different stack (not nested in with the drawer) which shouldn't allow you to open the drawer (or at least that's what I assume when looking at the router).

To be fair, I don't know how to resolve this issue in react-navigation either as I can't find a way to pass params down to a nested screen on another navigator (and also keeping the back button) so this is a big help to me, just wondering if there's a way to navigate away from the drawer while keeping the swipe to go back gesture (as well as the back button).

Thanks, the package is 💯 !

[warrenronsiek]

Same problem here.

• react-native-router-flux v4.0.0-beta.16.
• react-native v0.44.0

To recreate in Example project move the drawer to wrap only the register scene and then add a custom 'onBack' function to navigate to the base registration scene (or any other scene e.g. tabbar):

<Router createReducer={reducerCreate}>
    <Scene key="lightbox" lightbox>
      <Scene key="modal" modal hideNavBar>
        <Scene key="root" hideNavBar>
         <Scene key="echo" back clone component={EchoView} 
                       getTitle={({navigation}) => navigation.state.key}/>
          <Scene key="drawer" drawer drawerPosition="right" contentComponent={TabView}>
           <Scene key="register" back>
             <Scene key="_register" component={Register} title="Register"/>
             <Scene key="register2" component={Register} title="Register2" 
                           back onBack={() => Actions.register({type: 'reset'})}/>
             <Scene key="home" component={Home} title="Replace" type='replace'/>
           </Scene>
          </Scene>
....

Pressing the new onBack button in 'register2' will result in the following error:

Addendum:
After some additional exploration I found that having two children of a drawer and navigating between them disables scene transition animations. Below I wrapped registration and tabbar, and pressing onBack will navigate to tabbar without a transition.

<Router createReducer={reducerCreate}>
  <Scene key="lightbox" lightbox>
    <Scene key="modal" modal hideNavBar>
      <Scene key="root" hideNavBar>
        <Scene key="launch" component={Launch} title="Launch" initial/>
        <Scene key="echo" back clone component={EchoView}
               getTitle={({navigation}) => navigation.state.key}/>
        <Scene key="drawer" drawer drawerPosition="right" contentComponent={TabView}>
          <Scene key="register" back>
            <Scene key="_register" component={Register} title="Register"/>
            <Scene key="register2" component={Register} title="Register2" back
                   onBack={() => Actions.tabbar()}/>
            <Scene key="home" component={Home} title="Replace" type='replace'/>
          </Scene>
          <Scene key="tabbar" gestureEnabled={false} tabs tabBarStyle={styles.tabBarStyle} a
                 ctiveBackgroundColor='#ddd'>
....

Potential Solution:
Wrapping all children of a drawer in a 'drawerRoot' (so that the drawer component only has one child) and removing all transition types seems to solve all the problems described above. However, it adds an additional NavBar that I cant seem to get rid of. Also, the reason I had 'reset' action types in the first place was because they enhanced the performance of the app. It works without them now, but it does slow things down (at least in dev).

<Router createReducer={reducerCreate}>
  <Scene key="lightbox" lightbox>
    <Scene key="modal" modal hideNavBar>
      <Scene key="root" hideNavBar>
        <Scene key="launch" component={Launch} title="Launch" initial/>
        <Scene key="echo" back clone component={EchoView}
               getTitle={({navigation}) => navigation.state.key}/>
        <Scene key="drawer" drawer drawerPosition="right" contentComponent={TabView}>
          <Scene key="drawerRoot">
            <Scene key="register" back>
              <Scene key="_register" component={Register} title="Register"/>
              <Scene key="register2" component={Register} title="Register2" back
                     onBack={() => Actions.tabbar()} />
              <Scene key="home" component={Home} title="Replace" type='replace'/>
            </Scene>
            <Scene key="tabbar" gestureEnabled={false} tabs tabBarStyle={styles.tabBarStyle} a
                   ctiveBackgroundColor='#ddd'>

[aksonov]

@warrenronsiek So problem with 'reset' type, but not with drawer, right? Probably you have to use 'replace' instead, because reset clears stack entirely.

[warrenronsiek]

@aksonov Tried using 'replace' instead, still get a 'route not defined' error. So it probably isn't just the 'reset' type. I don't know if that means the problem is the drawer or actions or what.

Additional addendum
Adding a 'hideNavBar' to the drawerRoot will remove the duplicated NavBar described above. So it looks like a structure in the 'potential solution' solves all the problems so long as it doesn't pass any action types when navigating within a drawer.

[aksonov]

@warrenronsiek There were real issues with 'replace' because react-navigation doesn't have it and their 'reset' doesn't work well for deep nested containers. Finally I implement it by myself within RNRF, please check latest master, see #2189