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?

JimmyWj4EHiM · Accepted Answer · 2020-02-27 05:45:04Z

9

this works too

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

answered Feb 27, 2020 at 5:45

JimmyWj4EHiM

4136 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Beep Boop Over a year ago

thank you. this one solved the issue for me. very simple and straight forward.

Darío Gutiérrez · Accepted Answer · 2020-09-10 20:37:23Z

6

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',
      },
    }}
/>

answered Sep 10, 2020 at 20:37

Darío Gutiérrez

2413 silver badges5 bronze badges

Comments

Can Poyrazoğlu · Accepted Answer · 2019-06-06 10:47:23Z

5

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.

answered Jun 6, 2019 at 10:47

Can Poyrazoğlu

35.3k55 gold badges212 silver badges432 bronze badges

Comments

NAVNEET CHANDAN · Accepted Answer · 2022-02-23 05:53:47Z

2

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.

answered Feb 23, 2022 at 5:53

NAVNEET CHANDAN

2973 silver badges8 bronze badges

Comments

Morris S · Accepted Answer · 2021-05-21 19:34:42Z

0

You can create your own Button with image

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

answered May 21, 2021 at 19:34

Morris S

2,62430 silver badges34 bronze badges

Collectives™ on Stack Overflow

React Navigation headerBackImage not working

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related