React Native – Header Bar Color || How to change header bar color in react native

Using options props we can change header bar code. There is following properties to change header appearance.

• headerStyle: header style object we update backgroundColor then its header color will update as well.
• headerTintColor: the back button and title both color will chnage by this prpierty.
• headerTitleStyle: we can  customize the fontFamily, fontWeight and other Text  for the title.

Example – 1

In this example we will see ‘How to change header bar color in react native’ , change header color of Home Screen and change Title as “First Screen” as well. Detail screen will remain there will no change. we will see how to change header bar code in whole screens in navigation.

// In App.js in a new project

import * as React from 'react';
import { View, Text, SafeAreaView, Pressable, Alert } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({navigation}) {
  return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' ,backgroundColor:'yellow'}}>
            <Text>Home Screen</Text>
            <Pressable onPress={()=>{
              navigation.navigate('Details', {name:"Jit", phone:'8888888888'})
            }} style={{backgroundColor: 'cyan', borderRadius:6, height:40, width:'80%', justifyContent:'center', alignItems:'center', marginTop: 20}}>
           <Text >Show Detail Screen</Text>
           </Pressable>
           
           
        </View>
   
  );
}

function DetailsScreen({navigation, route}) {
  const {name, phone} = route.params;
  return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor:'lightgray' }}>
          <Text style={{fontWeight:'bold'}}>Details Screen</Text>
          <Text>Name : {name}</Text>
          <Text>Phone : {phone}</Text>
          <Pressable onPress={()=>{
              navigation.goBack('Home')
            }} style={{backgroundColor: 'cyan', borderRadius:6, height:40, width:'80%', justifyContent:'center', alignItems:'center', marginTop: 20}}>
           <Text >Go Back To Home Screen</Text>
           </Pressable>

        </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} options={{
          title: 'My home',
          headerStyle: {
            backgroundColor: 'green',
          },
          headerTintColor: 'blue',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Output:

Example- 2

in this example we will update screenOptions props for Stack.Navigator , the color will change all screen header bars.

// In App.js in a new project

import * as React from 'react';
import { View, Text, SafeAreaView, Pressable, Alert } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({navigation}) {
  return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' ,backgroundColor:'yellow'}}>
            <Text>Home Screen</Text>
            <Pressable onPress={()=>{
              navigation.navigate('Details', {name:"Jit", phone:'8888888888'})
            }} style={{backgroundColor: 'cyan', borderRadius:6, height:40, width:'80%', justifyContent:'center', alignItems:'center', marginTop: 20}}>
           <Text >Show Detail Screen</Text>
           </Pressable>
           
           
        </View>
   
  );
}

function DetailsScreen({navigation, route}) {
  const {name, phone} = route.params;
  return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor:'lightgray' }}>
          <Text style={{fontWeight:'bold'}}>Details Screen</Text>
          <Text>Name : {name}</Text>
          <Text>Phone : {phone}</Text>
          <Pressable onPress={()=>{
              navigation.goBack('Home')
            }} style={{backgroundColor: 'cyan', borderRadius:6, height:40, width:'80%', justifyContent:'center', alignItems:'center', marginTop: 20}}>
           <Text >Go Back To Home Screen</Text>
           </Pressable>

        </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{
          headerStyle: {
            backgroundColor: 'green',
          },
          headerTintColor: 'cyan',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}>
        <Stack.Screen name="Home" component={HomeScreen}  />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Output: