How can I navigate react native pages using stack screen headerLeft and headerRight?

Question

I am working on a react native project and I would like to customize the react stack navigator. The default "back button" of a stack navigator screen gives the name of the previous screen and a back arrow. I would like to change the name and more importantly remove the back button carrot.

I visited the React Native documentation and the answer seems to be using the "headerLeft" option, but I don't know how to navigate back to my previous screen. If I use onPress={() => navigation.navigate({routeName: 'Home'})}

then I get an error saying ReferenceError: Can't find variable: navigation

So how I can I navigate my stack navigator using headerLeft and headerRight?

The piece of code giving the error is:

      <Stack.Screen
        name="ChoresOptionsPage"
        component={ChoresOptionsPage}
        options={{
          headerBackTitle: "Cancel",
          headerTitle: "Add Chores",
          headerLeft: () => (
            <Button
              onPress={() => navigation.navigate({routeName: 'Home'})}
              title="Cancel"
              color="#fff"
            />
          ),
        }}
      />

Here is my file code: -- App.js --

const Stack = createStackNavigator();


export default function App() {
  return (
    <NavigationContainer>
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: "#FFA06A"
        },
        headerTintColor: "#fff",
        headerTitleStyle: {
          fontWeight: "bold",
        },
      }}
    >
      <Stack.Screen
        name="Home"
        component={Home}
        options={{
          headerTitle: (props) => <Title></Title>,
        }}
      />
      <Stack.Screen
        name="ChoresOptionsPage"
        component={ChoresOptionsPage}
        options={{
          headerBackTitle: "Cancel",
          headerTitle: "Add Chores",
          headerLeft: () => (
            <Button
              onPress={() => navigation.navigate({routeName: 'Home'})}
              title="Cancel"
              color="#fff"
            />
          ),
        }}
        
      />
      <Stack.Screen
        name="ChoreLibrary"
        component={ChoreLibrary}
        options={{
          headerTitle: "Chore Library",
          headerBackTitle: "Cancel",
          headerRight: () => (
            <Button
              onPress={() => alert('This is a button!')}
              title="Save"
              color="#fff"
            />
          ),
        }}
      />
            <Stack.Screen
        name="CustomChore"
        component={CustomChore}
        options={{
          headerTitle: "Custom Chore",
          headerBackTitle: "Cancel",
          headerRight: () => (
            <Button
              onPress={() => alert('This is a button!')}
              title="Save"
              color="#fff"
            />
          ),
        }}
      />

    </Stack.Navigator>
  </NavigationContainer>
  )
    
}

Answer 1

I think you can pass a function that expects the navigation object, to the options prop, kind of what is done in this example from the docs.

So the result, for your piece of code, would be something like:

<Stack.Screen
  name="ChoresOptionsPage"
  component={ChoresOptionsPage}
  options={({navigation}) => ({
    headerBackTitle: "Cancel",
    headerTitle: "Add Chores",
    headerLeft: () => (
      <Button
        onPress={() => navigation.navigate({routeName: 'Home'})}
        title="Cancel"
        color="#fff"
      />
    ),
    })}
/>