Using a custom image for the back button

[narcismihaitech]

Current Behavior
I am trying to set a custom image for the back button. I am working in a bare RN project (no Expo). This is my code:

const Stack = createStackNavigator();

const MyCustomHeaderBackImage = () => <Image
          source={require('../../../res/images/back-button.png')}
          style={{width: 22, height: 22, tintColor: '#f00'}}
        />
function AppNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Screen1">
        <Stack.Screen
          name="Screen1"
          component={Screen1}
          options={{headerShown: false}}
          key="landing"
        />
        <Stack.Screen
          name="Screen2"
          component={Screen2}
          options={{headerShown: false}}
        />
        <Stack.Screen
          name="Screen3"
          component={Screen3}
          options={{
            headerBackTitleVisible: false,
            title: '',
            headerTintColor: '#fff',
            headerStyle: {
              backgroundColor: colors.blue,
              shadowColor: 'transparent',
            },
            headerBackImage: MyCustomHeaderBackImage,
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

The app fails with the message: Invariant violation: Element type is invalid: expected a string or a class but got: object. Check the render method of HeaderBackButton

I checked the render method of HeaderBackButton - apparently, it uses its own back button image - https://github.com/react-navigation/react-navigation/blob/master/packages/stack/src/views/Header/HeaderBackButton.tsx#L71

Expected Behavior

I expect the back button to be replaced by my local image.

How to reproduce

Set an Image element to the headerBackImage property. Make sure to specify a source for the Image.

Your Environment

software	version
iOS or Android	iOS
@react-navigation/native	5.0.9
@react-navigation/stack	5.1.1
react-native-gesture-handler	1.6.0
react-native-safe-area-context	0.7.3
react-native-screens	2.2.0
react-native	0.61.5
expo	not using Expo
node	12.5.0
npm or yarn	yarn 1.21.1

[github-actions]

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on snack.expo.io. If it's not possible to repro it on snack.expo.io, then you can also provide the repro in a GitHub repository.

[narcismihaitech]

I created the Snack and, for whatever reason, it worked. :) You can check it out at https://snack.expo.io/@narcis/custom-back-button . I will close this issue.