change color of back arrow in navigation header

user_9079411 0
Viewed 4873

I've modified the standard behavior of back button in navigation bar

using this code :

export class QuranSouratesPage extends React.Component{
  static navigationOptions =({ navigation }) => ({
    title: 'Le noble Coran',
    headerLeft: <HeaderBackButton onPress={() => {navigation.navigate('SearchPage')}}/>,
});

now i have the right behavior except for the color of the arrow which became black now, i'cant find a way to change the color of the the arrow i've tried to style using tintColor but no result.

react-navigation react-native
2 Answers

Add tintColor prop to HeaderBackButton

export class QuranSouratesPage extends React.Component{
  static navigationOptions =({ navigation }) => ({
    title: 'Le noble Coran',
    headerLeft: <HeaderBackButton tintColor={'white'} onPress={() => {navigation.navigate('SearchPage')}}/>,
});

Demo

user_38588060

You can add headerTintColor in your Stack.Navigator

<Stack.Screen name="YourPage" component={YourComponent}
    options={{ headerTintColor: '#ffffff'}}
/>
user_128351510
Related