Need help using goBack() in react native-CodePudding

I am having trouble with the back button in the stack navigator. I am getting an error saying undefined is not an object (evaluating '_this.props'). Please help.

This is what I have so far:

function HomeScreen({ navigation }) {
      
        return (
          <WebView
            source={{
              uri: 'https://www.stoodnt.com/'
            }}
            style={{ marginTop: -120 }}
          />
        );
         
}

const HomeStack = createStackNavigator();
function HomeStackScreen() {
 return (
   <HomeStack.Navigator>
    <HomeStack.Screen name="Home"
         component={HomeScreen}
         options={{
         headerLeft: () => (
           <HeaderBackButton
            onPress={() => this.props.navigation.goBack(null)}
            
           />
        ),
    }}
/>
   </HomeStack.Navigator>
  );
}

CodePudding user response：

try the below code :

function HomeScreen(props) {
      
        return (
          <WebView
            source={{
              uri: 'https://www.stoodnt.com/'
            }}
            style={{ marginTop: -120 }}
          />
        );
         
}

const HomeStack = createStackNavigator();
function HomeStackScreen() {
 return (
   <HomeStack.Navigator>
    <HomeStack.Screen name="Home"
         component={HomeScreen}
        options={({ route, navigation }) => ({
         headerLeft: () => (
           <HeaderBackButton
            onPress={() => navigation.goBack(null)}
           />
        ),        
      })}

/>
   </HomeStack.Navigator>
  );
}```

CodePudding user response：

In functional components, you do not have access to "this". You should either pass navigation from the screen options or use useNavigation.

<HomeStack.Screen
   ...
   options={({navigation}) => (
      headerLeft: () => (
      // you can use navigation.goBack() here
      )
)}

    // this should be added right under function HomeStackScreen, 
    // right above the return and you will be able to use it in the screens
    const navigation = useNavigation()