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

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?

CodePudding user response：

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...`
      }}
    >

CodePudding user response：

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