DrawerItems not showing from StackNavigator (react-navigation)

Question

Currently Im trying to make a drawer using react-navigation. my react-navigation version is : "^1.0.0-beta.7"

Basically my structure of react-navigation look like this

StackNavigator as the root.. DrawerNavigator as the 2nd layer.. and another StackNavigator as the 3rd layer..

My problem is that when I put my component inside DrawerNavigator, The Component header will not show up after navigate to the component.. So, Im hoping anyone who can pointed to me how to make header visible when I put my component inside DrawerNavigator. If I did not put any component inside DrawerNavigator and all the screen inside the inner StackNavigator, the header will be visible but then the DrawerItems doesnt have any props thus not showing inside the drawer.

const rootNav = StackNavigator({
  MainDrawerNavigator: { screen: MainDrawerNavigator }
}, {
  headerMode: 'screen',
  navigationOptions: { header: null }
})

const MainDrawerNavigator = DrawerNavigator({
  Home: { screen: HomeNavigator },
  Logout: { screen: Logout }
},{
  initialRouteName: 'Home',
  drawerWidth: 270,
  headerMode: 'screen',
  contentComponent: (props) => {
      return(
        <ScrollView>
          <DrawerItems {...props} />
        </ScrollView>
      )
  },
  contentOptions: {
    style: {
      marginTop: 0,
    }
  }
})

const HomeNavigator = StackNavigator({
    HomeMenu: { screen: HomeMenu },
    StartJourney: { screen : StartJourney },
    JournalList: { screen: JournalList },
)}

Hope anyone can help me with this. Thanks!

Gintama Gintama · Accepted Answer · 2017-05-20T02:54:33

I'm trying to achieve where DrawerOpen the header will not show

I don' understand which header here is?

but when I navigate the route from Drawer and it open a screen, then the header will show up

If you're talking about navigator header, it's header of HomeNavigator, you can do like you did with rootNav navigationOptions: { header: null }

 const HomeNavigator = StackNavigator({
    HomeMenu: { screen: HomeMenu },
    StartJourney: { screen : StartJourney },
    JournalList: { screen: JournalList },
},{
navigationOptions: { header: null }
})

And current react-navigation document is for beta.9 / beta.10 I don't know if these props work on beta.7. There are some big changes on style and props from beta.7 to beta.8

DrawerItems not showing from StackNavigator (react-navigation)

1 Answers