React Navigation 5: Header background and header title color

Last updated on June 3, 2020 A Goodman Loading... Post a comment

When using React Navigation 5 to route and navigate your React Native apps, the header bar background color and the header title color is totally up to you.

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-native-gesture-handler';

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

const MainStack = createStackNavigator();

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. Happy coding 🙂

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles