Javatpoint Logo
Javatpoint Logo

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:

React Native Configuring Header Bar React Native Configuring Header Bar

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

React Native Configuring Header Bar React Native Configuring Header Bar React Native Configuring Header Bar




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA