React Navigation headerBackImage not working

Question

I'm using React Navigation 3.11 in my React Native app and I want to customize the back button in stack navigation. In the docs it says:

headerBackImage

React Element or Component to display custom image in header's back button. When a component is used, it receives a number of props when rendered (tintColor, title). Defaults to Image component with react-navigation/views/assets/back-icon.png back image source, which is the default back icon image for the platform (a chevron on iOS and an arrow on Android).

Here is my configuration:

let navigationRouteConfigMap : NavigationRouteConfigMap = {
      _main:
      {screen: page, navigationOptions: 
        { 
          [...]
          headerBackTitle: '',
          headerTruncatedBackTitle: '',
          headerBackImage: Images.backArrow,
        }
      }

    }
    let stackNavigatorConfig:StackNavigatorConfig = {
      headerBackTitleVisible: false
    }

    return createStackNavigator(navigationRouteConfigMap, stackNavigatorConfig)

I've got other pages as well in my config, all having the same shared navigation options with custom header back image. However, in my app it renders the default back arrow. (headerBackTitleVisible: false does work though)

What am I doing wrong?

Answer 1

I was using an actual image (from require()) instead of a React Element. Also, for some reason the navigation options weren't picked up for individual pages either. I've switched to <Image.../> and set my object as defaultNavigationOptions in StackNavigatorConfig and it worked.