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

Question

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.

Answer 1

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,
    },
  },
});

Answer 2

You can hide the navigator header in the component of the screen attribute with:

static navigationOptions = {
    header: null
};