How do I change the back button image in stack navigator in react native?

Question

I've already seen documents but I don't really understand and I want somebody to show me how to change the image of the back button in react native. enter image description here

I want to change the back arrow to a chevron or something. Could you please show me the code on how to do this?

Answer 1

In your StackNavigator, provide the screenOptions prop with headerBackImageSource set to the back arrow icon or image you want.

    <Stack.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerBackImageSource: `...image source...`
      }}
    >

Answer 2

The way I handle the default header of stack navigator is by creating a custom one. Every component in the main stack exports a back method so you can use it to create a event listener for your custom arrow like in the example below.

MAIN COMPONENT:

function Home({ navigation }) {

  return(
    <>
       <CustomHeader
         title="Home Page"
         handleBack={() => {
           navigation.goBack()
         }}
       />  
    </>
  )
}

export default Home

CUSTOM HEADER COMPONENT:

function CustomHeader(props) {
  const title = props.title

  const handleBack = () => {
    props.handleBack()
  }

  return(
    <View>
      <Pressable
        onPress={handleBack}
      >
        <Image
          source={backArrowIcon}
          resizeMode="contain"
        />
      </Pressable>
      <Text>
        {title}
      </Text>
    </View>
  )
}

export default CustomHeader

You just need to style that and import all the components like View, Text, CustomHeader etc.