How to navigate back to parent page from inside an custom component in React Native - react-native

Question

Greeting everyone,
I'm writing a React Native application and have stumbled into something interesting.
This is the simplified version of my code:
//import statements
...
const Profile = (props) => {
return(
<Text>Hey {props.name}!</Text>
<TouchableOpacity onPress={() => navigation.goBack();}>Go back</TouchableOpacity>
);}
export function ScreenOne({ navigation }) {
<Profile name="HUFF">
}
export function ScreenTwo({ navigation }) {
//blah blah blah
}
export default function App(){
//rest of the code
...
}
So basically, I'm trying to use react-navigation to navigate between screens of my App. But the button inside of my Profile component doesn't work.
Consider that I navigate from ScreenTwo to ScreenOne
Thanks in Advance.

Answer 1

React navigation has useNavigation hook
import { useNavigation } from '#react-navigation/native'
// if you are not using react-navigation 5 or 6
// then there is package https://github.com/react-navigation/hooks
const Profile = (props) => {
const navigation = useNavigation();
return(
<Text>Hey {props.name}!</Text>
<TouchableOpacity onPress={() => navigation.goBack()}>Go back</TouchableOpacity>
);
}

Answer 2

For this, you might have to specify navigation via props on the Profile JSX tag, so it can access the parent's navigation inside the component. E.g.:
//import statements
...
const Profile = (props) => {
return(
<Text>Hey {props.name}!</Text>
<TouchableOpacity onPress={() => props.navigation.goBack()}>Go back</TouchableOpacity>
);
}
function ScreenOne({ navigation }) {
<Profile name="HUFF" navigation={navigation}>
}
function ScreenTwo({ navigation }) {
//blah blah blah
}
export default function App(){
//rest of the code
...
}