React-native-router-flux: My hidden drawer navbar appears when I'm navigating scenes

[nica0012]

Version:
4.0.0-beta.28

Expected behaviour:
I have a drawer navigator wrapped up around one scene (my home screen). I want to be able to open the drawer only when I'm on this screen.

Actual behaviour:
Everything works fine except for while I'm navigating. When I navigate scenes, my navbar stacks (two navbars appear). It seems to be the drawer navbar, but I do have hideNavBar. The navbar is doubling/stacking only when the transition is in motion. The navbar then disappears again when the transition stops.

Here is an image to show what is going on:

As you can see, an extra drawer navbar is stacking on top of the initial navbar, (Left side) only when navigating...

I'm loving RNRF, this is my first road block and it has been a tough one trying to resolve. Here's my code.

Code:

    <Router
      navigationBarStyle={styles.navBar}
      titleStyle={styles.navBarTitle}
      tintColor='white'
    >
      <Scene key="root" hideNavBar>

        <Scene key="auth">
          <Scene
            key="login"
            component={LoginForm}
            initial
            hideNavBar
          />
        </Scene>

      <Scene key="main">

          <Drawer
            hideNavBar
            key="drawer"
            contentComponent={DrawerContent}
            drawerImage={MenuIcon}
            drawerWidth={300}
          >
            <Scene
              key="StringListList"
              component={StringList}
              renderTitle={() => { return <AppLogo />; }}
              panHandlers={null}
              navigationBarStyle={styles.stringListNav}
            />
          </Drawer>

            <Scene
                key="StringDetails"
                component={StringDetail}
                title="Specs"
                navigationBarStyle={styles.stringListNav}
            />
            <Scene
                key="adjustScale"
                component={AdjustScale}
                title="String Adjustment"
            />
            <Scene
                key="themes"
                component={Themes}
                title="Themes"
                backTitle=' '
            />
          </Scene>

      </Scene>
    </Router>
  );
}

}

[nica0012]

@aksonov Hey man, can you check this out?

[parkdcom]

I've had the same issue for a long time now.

[aksonov]

Please use beta.24. wrap drawer content into one child if it doesn't help

[nica0012]

@aksonov Thanks for the reply. I tried downgrading to beta.24 but I get this error:
https://github.com/aksonov/react-native-router-flux/issues/2876
What exactly do you mean by, "wrap drawer content into one child if it doesn't help"?
Cheers.

[nica0012]

@getconcar Hey, can you keep me posted if you find a fix?

[JulioOrellana]

@nica0012 you must place your Scenes inside your drawer

<Scene key="main">

          <Drawer
            hideNavBar
            key="drawer"
            contentComponent={DrawerContent}
            drawerImage={MenuIcon}
            drawerWidth={300}
          >
            <Scene
              key="StringListList"
              component={StringList}
              renderTitle={() => { return <AppLogo />; }}
              panHandlers={null}
              navigationBarStyle={styles.stringListNav}
            />
          <Scene
                key="StringDetails"
                component={StringDetail}
                title="Specs"
                navigationBarStyle={styles.stringListNav}
            />
            <Scene
                key="adjustScale"
                component={AdjustScale}
                title="String Adjustment"
            />
            <Scene
                key="themes"
                component={Themes}
                title="Themes"
                backTitle=' '
            />
          </Drawer>
</Scene>

[nica0012]

@JulioOrellana Thanks for the reply Julio. this is what I am doing now and it does work. The problem is I only want my initial screen to have the drawer functionality. I don't want it anywhere else. I managed to remove it by manually adding a back button on some scenes but by doing this I can no longer swipe back to the previous scene which is a hassle for the user...

[nica0012]

@aksonov I found a fix!

So, all scenes need to be nested inside of the drawer for it to work properly (without the header glitching when transitioning scenes). To properly disable the drawer completely to allow you to swipe back to the previous scene and show the back button too, you need to add the following three lines to any scene where you want the drawer to be ignored completely:

hideDrawerButton
drawerLockMode={'lock-closed'}
panHandlers

Hope this helps some people out who have experienced this!