Displaying headers with DrawerNavigator in React Native - reactjs

Question

I'm looking to use DrawerNavigator along with StackNavigator so I can display a header for my screens, everything is working fine but I messed up with the router logic, my issue is that the drawer do not render items but only the first one.
const Router = StackNavigator({
Home: {screen: Screen1},
Other: {screen: Screen2}
}, {
navigationOptions: {
headerStyle: {backgroundColor: '#333333'},
headerTintColor: '#fff'
}
});
const Drawer = DrawerNavigator({
App: {screen: Router},
});
export default Drawer;
Can someone please explain why I'm only seeing the first item in drawer? When trying to fix that I added a second item to drawer config router like that
const Drawer = DrawerNavigator({
App: {screen: Router},
App: {screen: Router},
});
It add a second item to the drawer but with the wrong title, it use title for screen one but the link is correct, it redirect to the second screen. so how can I fix those labels?

Answer 1

Better way of doing this is by creating drawernavigator with custom "contentComponent". This way you will have more control of what titles you want to display in the drawer, on click of title which screen it has to navigate to, background color of the drawernavigator.

Answer 2

So the DrawerNavigator is instantiated like this (from the docs):
const MyApp = DrawerNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
});
Therefore by doing what you did the first time:
const Drawer = DrawerNavigator({
App: {screen: Router},
});
, you're telling DrawerNavigator that there is only one element to be added to the drawer menu, regardless of what that screen "Router" contains, for DrawerNavigator it is just one element.
So in order to correctly add your screens to the drawer:
const HomeRoute = StackNavigator({
Home: {screen: Screen1},
}, {
navigationOptions: { ... }
});
const OtherRoute = StackNavigator({
Other: {screen: Screen2},
}, {
navigationOptions: { ... }
});
const Drawer = DrawerNavigator({
Home: { screen: HomeRoute },
Other: { screen: OtherRoute }
});
export default Drawer;