Drawer + nested StackNavigator issue about react-navigation HOT 10 CLOSED

Ha!
I found the workaround, I just hide the header from the top AppStackNavigator:

const ApplianceStackNavigator = StackNavigator({
  ApplianceListScreen: { screen: ApplianceListScreen },
  NewApplianceScreen: { screen: NewApplianceScreen }
}, {
  initialRouteName: 'ApplianceListScreen',
  headerMode: 'screen'
})

const MainDrawerNavigator = DrawerNavigator({
  ApplianceStackNavigator: { screen: ApplianceStackNavigator }
}, {
  initialRouteName: 'ApplianceStackNavigator',
  headerMode: 'screen'
})

const AppStackNavigator = StackNavigator({
  SplashScreen: { screen: SplashScreen },
  AuthScreen: { screen: AuthScreen },
  MainDrawerNavigator: { screen: MainDrawerNavigator }
}, {
  headerMode: 'screen',
  navigationOptions: { header: { visible: false } } // ADDED THIS
})

Not sure if this is the "right" solution or just a workaround though... In my opinion, It should be possible nesting two StackNavigator without doubling the Header (just like in ex-navigator)... what do you think?

from react-navigation.

Hi ,
Drawer nested navigation is working. please help
Below is my routing configuration

import React from 'react';
import { TabNavigator, StackNavigator, DrawerNavigator } from 'react-navigation';
import Login from '../containers/Login/LoginScreen';
import HomeContainer from '../containers/Home';
import ProfileContainer from '../containers/Profile';
import CreateProject from '../containers/CreateProject';
import DrawerMenu from '../components/DrawerMenu';
import Dimensions from 'Dimensions';

const HomeStackNavigator = StackNavigator({
Home: { screen: HomeContainer },
CreateProject: { screen: CreateProject }
}, {
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
});

const MainDrawerNavigator = DrawerNavigator({
HomeStackNavigator: { screen: HomeStackNavigator },
Profile: { screen: ProfileContainer }
},{
contentComponent: DrawerMenu,
drawerWidth: Dimensions.get('window').width - 100
}, {
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
});

const Root = StackNavigator({
Login: { screen: Login },
Authorize: { screen: MainDrawerNavigator }
}, {
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
});

export default Root;
Thanks in Advance

from react-navigation.

Can you check if it's fixed now?

from react-navigation.

Closing this since this has been fixed.

from react-navigation.

Sorry @satya164 , I couldn't try it this weekend!
Thanks for the fast reply, I tried to use the Master branch and the drawer works... but it shows me a double navigation bar now 👼

from react-navigation.

@mmazzarolo yeah, feel free to open a new issue for that

from react-navigation.

Actually I opened #88 for that

from react-navigation.

{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
}); not working still there is header with white color arise on drawer pages

from react-navigation.

@pr4deep94
Format your code

from react-navigation.

Hello 👋
I have created a working example on react-navigation version-5.x.x, nesting different navigators -- stack, drawer & bottom-tabs. The overall approach has also been detailed in my blog section.

Link to github repo:
https://github.com/mvpbuddy/react-native-nested-navigators/

For a more detailed overview, you can checkout my blog on this:
https://mvpbuddy.io/blog/detail/how-to-build-an-app-with-nested-stack-drawer-bottom-tab-navigators

from react-navigation.