I can set the header options "universally" for some things, such as making the header color white:
// example screens const SettingsScreen = () => <View><Text>SettingsScreen...</Text></View> const List = () => <View><Text>List...</Text></View> const Item = () => <View><Text>Item...</Text></View> // create an object to pass on to relevant screens const navigationOptions = { header: { style: { backgroundColor: '#fff' } }, } // MAIN SCREEN : a screen showing a list with ability to click on an list item and go to a detail page // ============================ const ListScreens = StackNavigator({ List: { screen: List, navigationOptions: navigationOptions }, //show a hamburger menu Item: { screen: Item, navigationOptions: navigationOptions }, // this is a detail page, so don not show a hamburger menu, rather show a back button }); const SettingsContainer = StackNavigator({ Settings: { screen: SettingsScreen }, }); // LOGGED IN DRAWER VIEW : top-level component is a drawer with two menu items (main and settings) // ============================ const LoggedIn = DrawerNavigator({ Main: { screen: ListScreens }, Settings: { screen: SettingsContainer }, }); //... do stuff for root component What is the best practice for adding a hamburger menu to all routes at the DrawerNavigation menu level? I want to have this pop open the drawer. There is no access to props.navigation unless I'm inside of each of the components...just state and params. Do I need to duplicate the code in each of those files?
static navigationOptions = { title: ({ state }) => { if (state.params.mode === 'info') { return `${state.params.user}'s Contact Info`; } return `Chat with ${state.params.user}`; }, header: ({ state, setParams }) => { // The navigation prop has functions like setParams, goBack, and navigate. let right = ( <Button title={`${state.params.user}'s info`} onPress={() => setParams({ mode: 'info' })} /> ); if (state.params.mode === 'info') { right = ( <Button title="Done" onPress={() => setParams({ mode: 'none' })} /> ); } return { right }; }, .. relevant issues (maybe):
https://github.com/react-community/react-navigation/issues/165
