React Native Configuring Header Bar

The static property of a screen component is called navaigationOptions. It is either an object or a function. It returns an object containing several configuration options.

Props of the header bar

Props	Description
title	It sets the title of active screen.
headerStyle	It adds style to header bar.
backgroundColor	It sets the background color of the header bar.
headerTintColor	It sets the color to header title.
headerTitleStyle	It adds style to the title of a screen.
fontWeight	It sets the font style of header title.

React Native Moving from One Screen to Other Example 1

In this example, we create two screen named as 'Home' and 'Profile'. The Home screen is set as first screen using "initialRouteName" property and Profile screen as second.

App.js

Output:

Using params in the title

To use the params (parameter) as a title, we need to make navigationOptions as a function which returns a configuration object. Use the this.props inside the navigationOptions. As it is the static property of component "this" does not refer to an instance of componen and therefore no props are available.

Making navigationOptions as a function which returns the object containing {navigation, navigationOptions, screenProps }. The navigation is the object which is passed to screen props as this.props.navigation. We can also get the params from navigation using navigation.getParam or navigation.state.params.

The navigationOtions configuration of the active screen which can also be updated from the current screen component itself.

Complete code

In this example, we create two screen "Home" and "Profile". The Profile screen set its header title using params as: title: navigation.getParam('otherParam', 'A Param Header')

App.js

---