I am using @react-navigation/native and @react-navigation/native-stack

I have the following code

    useEffect(() => {
      navigation.setOptions({
        headerLeft: (props) => <HeaderBackButton {...props} tintColor={gold} onPress={() => navigation.navigate('back)} />
      });
    }, [navigation]);

But clicking on the back button I can see the opacity effect but nothing more, no navigation, I updated my code to do more debug

    useEffect(() => {
      console.log('loaded')
      navigation.setOptions({
        headerLeft: (props) => <TouchableOpacity onPress={() => console.log('test')} ><Text style={{fontSize: 40}} >{"< Back"}</Text></TouchableOpacity>
      });
    }, []);

I was thinking the problem was related to HeaderBackButton but no, with a TouchableOpacity I have the same issue In this second code the loaded is logged but clicking on the TouchableOpacity I can see the opacity effect but the test is never logged

I am using @react-navigation/native and @react-navigation/native-stack

I have the following code

    useEffect(() => {
      navigation.setOptions({
        headerLeft: (props) => <HeaderBackButton {...props} tintColor={gold} onPress={() => navigation.navigate('back)} />
      });
    }, [navigation]);

But clicking on the back button I can see the opacity effect but nothing more, no navigation, I updated my code to do more debug

    useEffect(() => {
      console.log('loaded')
      navigation.setOptions({
        headerLeft: (props) => <TouchableOpacity onPress={() => console.log('test')} ><Text style={{fontSize: 40}} >{"< Back"}</Text></TouchableOpacity>
      });
    }, []);

I was thinking the problem was related to HeaderBackButton but no, with a TouchableOpacity I have the same issue In this second code the loaded is logged but clicking on the TouchableOpacity I can see the opacity effect but the test is never logged

• react-native
• react-navigation

2 Answers 2

If you're inside a screen component, you can access the navigation object via props or the useNavigation hook and call goBack() to return to the previous screen.

import React from 'react';
import { Button, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const MyScreen = () => {
  const navigation = useNavigation();

  return (
    <View>
      <Button
        title="Go Back"
        onPress={() => navigation.goBack()} // Navigates back to the previous screen
      />
    </View>
  );
};

export default MyScreen;

Use onPressOut instead of onPress This issue is caused by RN Screens. Check out these for more details:

• react-native-screens issue
• Expo issue