Revision history [back]

The styling of the header in React Navigation can be modified using the navigationOptions object in the component where the header is defined.

For example, to change the background color of the header, we can add the following code to the navigationOptions object:

static navigationOptions = {
  headerStyle: {
    backgroundColor: 'blue',
  },
};

Similarly, to change the color of the text in the header, we can add the following code:

static navigationOptions = {
  headerTitleStyle: {
    color: 'white',
  },
};

Other style properties that can be modified include the headerTintColor (color of the back button arrow), headerTitleAlign (alignment of the title), and headerRight (custom component for the right side of the header).

All of these style properties can be added to the navigationOptions object in the component where the header is defined.