Is there a way to change react navigation's default back button Color on IOS header?

Question

static navigationOptions = {
    headerTitle:'Booking',
    headerTitleStyle: {color:'white'},
    headerStyle: {backgroundColor:'orange'}
  }

My header looks like this. I want to change the color of default back button icon on IOS. I can change the color of the title, but there's no option to change the color of icon. I was wondering if there's a way to change the color or implementing my own headerLeft property is a better option?

Answer 1

There is a property headerTintColor in navigationOptions which can be used to change the back button icon color

static navigationOptions = {
        headerTitle:'Booking',
        headerTitleStyle: {color:'white'},
        headerTitleAlign: 'center',
        headerStyle: {backgroundColor:'orange'},
        headerTintColor: 'blue'
      }

Doc: https://reactnavigation.org/docs/elements/#headertintcolor

Answer 2

The solution for me was to update react navigation's theme: https://reactnavigation.org/docs/themes/

import * as React from 'react';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';

const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: 'rgb(255, 45, 85)',
  },
};

export default function App() {
  return (
    <NavigationContainer theme={MyTheme}>{/* content */}</NavigationContainer>
  );
}

As a result, your default back button color is rgb(255, 45, 85)

Answer 3

I am using react navigation v6 and and my solution was this:

<Stack.Screen
    name="OlvidoContraseña"
    component={OlvidoContraseñaScreen}
     options={{headerTransparent: true,
     headerTitle:'Inicio',
     headerTintColor:
        theme.colors.greenHigh  
    }}
/>

Answer 4

To style the button of navigationOptions by following code:

static navigationOptions = ({ navigation }) => {
        const { navigate } = navigation
        return{
            title: 'Review Jobs',
            headerRight:() =>{ 
                return(
                    <Button title='Settings' 
                        onPress = { ()=>{navigate('setting')}}
                        titleStyle = {{
                        color : "rgba(0,122,255,1)"
                        }}
                        buttonStyle= {{backgroundColor : "rgba(0,0,0,0)",}}
                    /> 
                )
            },
            headerTitleStyle: {
                backgroundColor : "rgba(0,0,0,0)",
                        color : "rgba(0,122,255,1)"
            }
        }
    }