React Navigation 6: Header background and header title color

When using React Navigation 6 to route and navigate your React Native apps, the header bar background color and the header title color are customizable.

To set the header background color, use this option:

headerStyle: {
   backgroundColor: '#833471', 
   // use your preferred color code
}

For the header title color, use:

headerTitleStyle: {
  color: '#fff',
  // use your preferred color code
}

Full example:

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const MainStack = createNativeStackNavigator();

const HomeScreen = props => {
  return (
    <View style={styles.screen}>
      <Text>Home Screen</Text>
    </View>
  );
};

function App() {
  return (
    <NavigationContainer>
      <MainStack.Navigator>
        <MainStack.Screen
          name="home"
          component={HomeScreen}
          options={{
            title: 'Home Title',
            headerTitleStyle: {
              color: '#fff',
            },
            headerStyle: {
              backgroundColor: '#833471',
            },
          }}
        />
      </MainStack.Navigator>
    </NavigationContainer>
  );
}

export default App;

/// Just some styles
const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Screenshot:

Hope this article can help you in some way. Further reading:

• Using Switch component in React Native (with Hooks)
• React Navigation: useRoute hook example
• React Native: Make a Button with a Loading Indicator inside
• How to set a gradient background in React Native
• How to implement tables in React Native

You can also check our React topic page and React Native topic page for the latest tutorials and examples.