React Navigation headerBackImage not working

user_811405 0
Viewed 10218

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?

react-navigation-stack react-navigation react-native
5 Answers

this works too

headerBackImage: ()=>(<YourAsset />),
user_85142260

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.

user_8114050

Even you can use a custom component, in my case a SVG icon, looks something like this:

<LoginSignUpNav.Screen
    name="Login"
    component={Login}
    options={{
      headerBackImage: () => <BackIcon width={25} height={25} />,
      headerTintColor: "black",
      headerTransparent: true,
      headerStyle: {
         backgroundColor: 'transparent',
      },
    }}
/>
user_22389170

You can create your own Button with image

headerRight: (props) => (
      <Button
      {...props}
      onPress={() => { /*Do something */ }}
       />
  ),
user_79446100

It might be because you are using Navigation 6.XX. To work it in 6.XX, try this out

headerLeft: () => (
   <TouchableOpacity
      style={styles.headerBtnContainer}
      onPress={() => props.navigation.goBack()}
   >
     <Ionicons name="close-sharp" size={24} color="white" />
   </TouchableOpacity>
),

This should work properly.

user_79970430
Related