Is there a way that I can change the back button icon for stack navigator in react?-CodePudding

I want to change the arrow icon for going back to the previous screen in stack navigator to a different icon (e.g home icon) and the icon's color

View the image here

code for one of the stack screens:

<Stack.Screen name="Bone cancer" component={BoneCancerScreen} options={{ headerStyle: { backgroundColor: "#000000", height: RFValue(102) }, headerTintStyle: { fontWeight: "bold" }, headerTitleStyle: { marginLeft: RFValue(72), fontFamily: "Aldrich-Regular", color: "white" } }} />

code for stack navigator and screenOptions:

<Stack.Navigator initialRouteName="Home screen" screenOptions={{headerShown: true,}}>

CodePudding user response：

Use headerBackImage in your screenOptions.

Function which returns a React Element to display custom image in header's back button. When a function is used, it receives the tintColor in it's argument object. Defaults to Image component with back image source, which is the default back icon image for the platform (a chevron on iOS and an arrow on Android).

Source: https://reactnavigation.org/docs/stack-navigator/#headerbackimage

CodePudding user response：

Using headerLeft option you can change the back icon. From headerLeft you can return any component and it will override the default back button.

<Stack.Screen 
  name="Bone cancer" 
  component={BoneCancerScreen} 
  options={{ 
    headerStyle: { backgroundColor: "#000000", height: RFValue(102) }, 
    headerTintStyle: { fontWeight: "bold" }, 
    headerTitleStyle: { 
      marginLeft: RFValue(72), 
      fontFamily: "Aldrich-Regular", 
      color: "white" 
    },
    headerLeft: () => /* your icon code goes here */ 
  }} 
/>

Reference: Official Reference