Customize the StackNavigator

Customize the StackNavigator Header with React Navigation in a React Native App

React Navigation’s StackNavigator has a default header, which you may or may not want for your application. We’ll look at how to totally disable the header, as well as how to customize the default header on a per-screen basis.

Configuration

Stack navigation adds an automatic header, which contains the back button to go back to the previous screen. This can be turned off per component by adding static navigationOptions = { header: null }.

class MyComponent extends Component {
  static navigationOptions = { header: null }
  ...
}

Other config options can also be specified in navigationOptions - such as title, headerStyle and tintColor.

These options can also be passed as a second argument to the createStackNavigator function, if you would like them to generally apply to all components in the stack.

createStackNavigator({
  Home: { screen: RestaurantList },
  Info: { screen: RestaurantInfo }
}, {
  header: null
})

🐦   Previous   💼   Next