How to use an icon instead of the original back button in React Navigation?-CodePudding

I'm trying to display a FontAwesome icon instead of the default chevron icon in the header of React Navigation.

I've tried to override the headerLeft prop in the screenOptions, but the back button was displayed all the time, and lost the ability to go back to the previous screen. I just want to keep the original back button behaviour (displayed only on nested screens), but with a custom icon.

I've came up with this (doesn't work of course):

const Stack = createStackNavigator();

const screenOptions = {
  headerBackTitleVisible: false,
  headerBackImageSource: () => (
    <FontAwesomeIcon icon={faArrowAltCircleLeft} color="#fff" size={24} />
  ),
};

export const CategoriesStackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={screenOptions}>
      <Stack.Screen name={Routes.Categories} component={Categories} />
      <Stack.Screen
        name={Routes.Category}
        component={Category}
        options={({ route }) => ({ title: route.params.id })}
      />
      <Stack.Screen
        name={Routes.CategoryAbout}
        component={CategoryAbout}
        options={({ route }) => ({ title: route.params.category })}
      />
    </Stack.Navigator>
  );
};

The doc is a bit unclear on this topic and I don't find good exemple on the web. Any help would be greatly appreciated!

CodePudding user response：

Try this

const screenOptions = {
  headerBackImage: () => (
    <FontAwesomeIcon icon={faArrowAltCircleLeft} color="#fff" size={24} />
  ),
};

here is slack demo