Repeatedly popping "undefined is not an object (evaluating 'navigation.navigate')" after routing a particular screen

Question

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

Answer 1

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.