CODEWITHSUNDEEP
react-nativereact-navigation
DoneDeal0
DoneDeal0

Reputation: 6257

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

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!

Upvotes: 3

Views: 5875

Answers (1)

Nilesh Patel
Nilesh Patel

Reputation: 3317

Try this

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

here is slack demo

Upvotes: 4

Related Questions