How to set headerMode on some routes but not others. (React Navigation)

react-native, react-navigation

Solution

You can wrap your app navigator in a root navigator, set `navigationOptions.header` to `null` to hide all wrapped navigators header, then set `navigationOptions.headerTitle` on screen that you want to display header.

This answer is based from react-navigation version v1.0.0-beta.9

const App = StackNavigator({
  PhotoView: {
    screen: Photos,
  },
  ListView: {
    screen: List,
    navigationOptions: {
      headerTitle: 'ListView',
    },
  }
});

export const Root = StackNavigator({
  Root: { 
    screen: App,
    navigationOptions: {
      header: null,
    },
  },
});

Problem

With React Navigation Is it possible to define certain routes with a headerMode and others without? The majority of my pages don't use the header and I found how to turn it off globally. ``` export const App = StackNavigator({ PhotoView: { screen: Photos }, ListView: { screen: List } }, { headerMode: 'none' }); ``` But if I wanted to show the header on `ListView` for example, how would I do that? I've tried several approaches from the docs but no luck.

Original source