I keep getting errors that "navigation" is not defined - react-native

Question

I am trying to create a login button that navigates to another page but I keep getting errors that "navigation" is not defined
here's the screenshot of the error:
screenshot here
screenshot here
that's the app component:
export default function App({navigation}) {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Image
source={logo}
style={styles.stretch}
/>
<Image
source={logo2}
style={styles.stretch2}
/>
<Button title="Login" style={[styles.buttonContainer, styles.loginButton,styles.top]} onPress={() => navigation.navigate("Details")} >
<Text style={styles.loginText}>LOG IN</Text>
</Button>
<TouchableHighlight style={[styles.buttonContainer2, styles.loginButton2,styles.top2]} >
<Text style={styles.loginText2}>Register</Text>
</TouchableHighlight>
<NavigationContainer>
<Stack.Navigator >
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={Details} />
</Stack.Navigator>
</NavigationContainer>
</View>
);
}
here I got stuck after using the navigation Ref method:
link here

Answer 1

there is no this.props in function components:
export default function App({navigation}) {
const { navigate } = this.props.navigation;
this should be
export default function App({navigation}) {
const { navigate } = navigation;
notice that you already destructured navigation from props in the function signature

Answer 2

Your App component is a React hook, so calling this.props won't work. You can just use navigation from your App's params.
The navigation prop is only available to components wrapped within your <NavigationContainer> component. You'll probably still get an error trying to call navigate from the App component since <NavigationContainer> is a child of it.
Your best bet is to only use the navigation prop on components within a <NavigationContainer> or accessing it like this based on the documentation:
https://reactnavigation.org/docs/navigating-without-navigation-prop
EDIT:
If you want to access navigation outside of the navigation container, you'll need a ref pointing to it.
import React, { useRef } from "react";
export default function App({}) {
const navigationRef = useRef(null)
// Then wherever you wanna call navigate you do this:
// () => navigationRef.current.navigate("Details")
// make sure you do a null check on navigationRef.current if you want to be extra safe
return (
<NavigationContainer ref={navigationRef}>
....
</NavigationContainer>
)
}