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?
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
}}
/>
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)
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)"
}
}
}