change color of back arrow in navigation header

Question

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.

Answer 1

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

Answer 2

You can add headerTintColor in your Stack.Navigator

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