const ResolvedPlaces = ({navigation}) => {
return(
<View style={Styles.headerWrapper}>
<TouchableOpacity navigation={navigation} onPress={()=> navigation.navigate("ProfileScreen")} >
<Text style={[Styles.header,{fontWeight:"bold"}]}>Resolved </Text>
<Text style={Styles.header}> places</Text>
</TouchableOpacity>
</View>
)
}
I have created a ResolvedPlaces function and gave a option to route to the profile screen. Also I've destructured the "navigation" in all format. But I continuously got this navgation.navigate as undefined object. the error message on the terminal
CodePudding user response:
If ResolvedPlaces
is not defined as a Screen
in a react-native-navigation navigator
, then the navigation prop
will not be passed automatically to the component ResolvedPlaces
.
If ResolvedPlaces
is nested inside a Screen
that is defined in a Navigator
, then you can use the navigation prop
directly. This could look as follows.
const SomeScreen = ({navigation}) => {
const ResolvedPlaces = () => {
return(
<View style={Styles.headerWrapper}>
<TouchableOpacity onPress={()=> navigation.navigate("ProfileScreen")} >
<Text style={[Styles.header,{fontWeight:"bold"}]}>Resolved </Text>
<Text style={Styles.header}> places</Text>
</TouchableOpacity>
</View>
)
}
return (
<ResolvedPlaces />
)
}
The component SomeScreen
must be defined in a navigator, e.g. a Stack
.
If ResolvedPlaces
is a component defined in its own file, then pass the navigation
object as a prop from the parent that is defined as a screen.
const SomeScreen = ({navigation}) => {
return <ResolvedPlaces navigation={navigation} />
}
If this is not an option than you can still use the useNavigation
hook as follows.
const ResolvedPlaces = () => {
const navigation = useNavigation()
return (
<View style={Styles.headerWrapper}>
<TouchableOpacity onPress={()=> navigation.navigate("ProfileScreen")} >
<Text style={[Styles.header,{fontWeight:"bold"}]}>Resolved </Text>
<Text style={Styles.header}> places</Text>
</TouchableOpacity>
</View>
)
}
Remarks: I have removed the navigation prop from the TouchableOpacity
since this prop does not exist for this component. The basic react-native-navigation
structure is documented here.