React-Native Configuring Header Bar

Syntax

The React-Native Navigation library provides a navigationOptions object that can be used to customize the header bar of a screen component.

static navigationOptions = {
  title: 'My Screen',
  headerStyle: {
    backgroundColor: '#f4511e',
    borderBottomWidth: 0,
  },
  headerTintColor: '#ffffff',
};

Example

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class MyScreen extends Component {
  static navigationOptions = {
    title: 'My Screen',
    headerStyle: {
      backgroundColor: '#f4511e',
      borderBottomWidth: 0,
    },
    headerTintColor: '#ffffff',
  };

  render() {
    return (
      <View>
        <Text>My Screen</Text>
      </View>
    );
  }
}

export default MyScreen;

Output

The above code will render a header bar with the following properties:

• The title "My Screen"
• A background color of #f4511e
• No bottom border
• A text color of #ffffff

Explanation

The navigationOptions object can be used to customize the header bar of a screen component. The available properties include:

• title: The title of the screen.
• headerStyle: An object containing styles to apply to the header bar.
• headerTintColor: The color of the header bar text and icons.

There are many other properties that can be used to customize the header bar, such as headerTitle and headerRight. These can be found in the React-Native Navigation documentation.

Use

Customizing the header bar can be useful for branding purposes and enhancing the user experience of your app.

The navigationOptions object can be set on a per-screen basis, or can be defined globally for all screens in your app.

Important Points

• headerTintColor affects the color of the back button arrow on Android devices as well as the text and icons on iOS devices.
• The headerStyle property can be used to remove the bottom border on iOS devices.
• Not all properties are supported on both iOS and Android. Check the React-Native Navigation documentation for platform-specific properties.

Summary

Customizing the header bar of a screen component in React-Native can be achieved using the navigationOptions object provided by the React-Native Navigation library. By specifying the title, header style, and header tint color, you can create a consistent look and feel for your app's header bar.