React Native component onPress navigation Button Native-Base - react-native

Question

I am developing an android app with React Native and Native-Base.
In my component button i can't get onpress to work to change page.
import React from "react";
import { StyleSheet, View, TouchableOpacity } from "react-native";
import { NativeBaseProvider, Button, Text } from "native-base";
const ButtonAPP = (props) => {
//const linkBottom = props.linkBottom;
const textBottom = props.textBottom;
return (
<NativeBaseProvider>
<View style={styles.viewButtonAPP}>
<Button
shadow={2}
style={styles.buttonAPP}
onPress={() => props.navigation.navigate("Home")}
>
<Text style={styles.textButton}>{textBottom}</Text>
</Button>
</View>
</NativeBaseProvider>
);
};
const styles = StyleSheet.create({
styles....
});
export default ButtonAPP;
THe error is:
navigate is not defined
I don't understand why for pages in my app it works but for a component like the button it doesn't

Answer 1

The navigation object will be passed as props by the navigation framework only to components that are defined as screens inside a navigator. If this is not the case, then the navigation object will not be passed to this component.
You have three choices.
1) Use the useNavigation hook
const ButtonAPP = (props) => {
const navigation = useNavigation();
...
<Button
shadow={2}
style={styles.buttonAPP}
onPress={() => navigation.navigate("Home")}
>
}
2) Pass the navigation object as a prop from a parent that is a screen defined in a navigator
Assume that ScreenA is a screen that is defined in a navigator, e.g. a Stack. This would look like the following snippet.
const Stack = createStackNavigator();
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name="ScreenA" component={ScreenA} />
</Stack.Navigator>
);
}
Assume that ButtonApp is used as a child in ScreenA. Then, we can pass the prop manually, since the framework will not do this.
const ScreenA = (props) => {
return <ButtonApp navigation={props.navigation} />
}
const ButtonAPP = (props) => {
...
<Button
shadow={2}
style={styles.buttonAPP}
onPress={() => props.navigation.navigate("Home")}
>
}
3) Let ButtonApp be a screen inside a navigator
This choice usually does only make sense for actual views in the application and not for individual components. However, this is still an option.
Using the same example as in 2). However, this will work with any navigator.
const Stack = createStackNavigator();
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name="ButtonApp" component={ButtonAPP} />
</Stack.Navigator>
);
}
Accessing the navigation object via props as you have tried initially works in this case as well.