在路由特定屏幕后反复弹出“undefined is not an object (evaluating 'navigation.navigate')”

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, eg 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 .