Render Drawer on top of menu

[chrissm79]

It would be nice if we could optionally (or by default) render the drawer on top of the header rather than underneath it if the DrawerNavigator is nested. Let's say I have the following routes:

const MainNavigator: any = DrawerNavigator({
  Dashboard: { screen: Scenes.Dashboard },
  Log: { screen: Scenes.Log },
}, {
  initialRouteName: 'Dashboard',
});

const AppNavigator: any = StackNavigator({
  Main: { screen: MainNavigator },
  Login: { screen: Scenes.Login },
  Password: { screen: Scenes.Password },
}, {
  initialRouteName: loggedIn ? 'Main' : 'Login',
});

Currently, the problem is if you are on the Dashboard screen, the drawer opens up underneath the header. It's acceptable for most routes, but I have some screens that render a transparent header and it looks odd when the drawer renders underneath it.

Thanks!

[Steviey]

In the examples the drawer renders on top of everything.
I would prefer the drawer underneath a top bar as usual.

[chrissm79]

@Steviey You should be able to put the DrawerNavigator inside a StackNavigator (similar to my example). The StackNavigator will render a header and the drawer will render underneath it.

const MainNavigator = DrawerNavigator({
  Dashboard: { screen: Scenes.Dashboard },
  Log: { screen: Scenes.Log },
}, {
  initialRouteName: 'Dashboard',
});

const AppNavigator = StackNavigator({
  Main: { screen: MainNavigator },
}, {
  initialRouteName: 'Main',
});

[chrissm79]

It would be nice if DrawerNavigator rendered a header that the drawer would render on top of (it currently doesn't seem to render a header at all), then we could do something like this:

const MainNavigator: any = DrawerNavigator({
  Dashboard: { screen: Scenes.Dashboard },
  Log: { screen: Scenes.Log },
}, {
  initialRouteName: 'Dashboard',
});

const PagesNavigator: any = StackNavigator({
  Login: { screen: Scenes.Login },
  Password: { screen: Scenes.Password },
}, {
  initialRouteName: 'Login',
});

const AppNavigator: any = StackNavigator({
  Drawer: { screen: MainNavigator },
  Pages: { screen: PagesNavigator },
}, {
  initialRouteName: 'Drawer',
  headerMode: 'none',
});

[Steviey]

I'm totally new to this project, only have seen the examples. During the last days I was busy to provide some install scripts. Could you provide boilerplate code to see it in action?

[chrissm79]

Okay, I've got an insanely ugly hack going here, but it does render a header for the DrawerNavigator which the DrawerLayout slides over top of. I created a custom navigator that renders a CardStack instead of DrawerScreen (I did this because the CardStack renders the Header component which is not currently exported by react-navigation).

However, the CardStack does a SlideFromRightIOS which looks really odd when switching between Drawer Items. Does anyone know how I could override the Transitioner returned by the CardStack to do a cross fade instead?

[nonameolsson]

This is just what I was looking for. @chrissm79 do you have any code we could try? :)

[chrissm79]

@nonameolsson I was able to get this to work by wrapping my Drawer screens with a StackNavigator like so:

const MainNavigator: any = DrawerNavigator({
  // I created a helper function to generate these single stack navigators 
  // to reduce boilerplate but this is what it produced
  Dashboard: { 
    screen: StackNavigator({ 
      Index: { screen: Scenes.Dashboard } 
    }) 
  },
  Log: { 
    screen: StackNavigator({ 
      Index: { screen: Scenes.Log } 
    }) 
  },
}, {
  initialRouteName: 'Dashboard',
});

const PagesNavigator: any = StackNavigator({
  Login: { screen: Scenes.Login },
  Password: { screen: Scenes.Password },
}, {
  initialRouteName: 'Login',
});

const AppNavigator: any = StackNavigator({
  Drawer: { screen: MainNavigator },
  Pages: { screen: PagesNavigator },
}, {
  initialRouteName: 'Drawer',
  headerMode: 'none',
});

I did, however, have some weird flickering when changing routes, and I had some issues with trying to navigate out of a nested view (in this example, going from the nested Log screen to the Password screen) so for the time being I went back to ex-navigation but I'm sure I'll be back soon :-)