(React Native) Undefined is not an object (evaluating 'navigation.navigate')-CodePudding

From App.js, I declare the "FollowingScreen", which is made of a module that exports "Following"

export const FollowingScreen = ({route, navigation}) => {
return (
    <ScrollView style={styles.scrollView}>
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: "#262423" }}>
       <Following />
      </View>
    </ScrollView>
  );
}

"Following" is exported by a file called "following.js". From "following.js" I want to navigate to ProfileScreen:

import { useNavigation } from '@react-navigation/native';

class Following extends Component {

...
...


renderItem = ({item}, navigation) => (
<ListItem bottomDivider>
    <ListItem.Content style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
    <ListItem.Title>{item.title}</ListItem.Title>
    <TouchableOpacity 
        onPress={() => navigation.navigate("ProfileScreen", {userInfo: {uri: item.probability, username: item.country_id, id_user: item.id_user}})} 
        style={{ flexDirection: 'row'}}
    >
        <Image
        style={{ borderRadius: 50 }}
        source={{ uri: item.probability, width: 48, height: 48 }}
        />
    </TouchableOpacity>
    <TouchableOpacity 
        onPress={() => navigation.navigate("ProfileScreen", {userInfo: {uri: item.probability, username: item.country_id, id_user: item.id_user}})} 
        style={{ flexDirection: 'row'}}
    >
        <ListItem.Subtitle style={{color: '#000'}}>
        <Text style={{fontFamily: 'Montserrat_600SemiBold' }}>{item.name} {item.surname}</Text>
        {"\n"}
        <Text style={{fontFamily: 'Montserrat_600SemiBold' }}>@{item.country_id}</Text>
        {"\n"}
        {"\n"}
        <Text style={{fontFamily: 'Montserrat_600SemiBold' }}>{item.followers}</Text>
        {"\n"}
        <Text style={{fontFamily: 'Montserrat_600SemiBold' }}>{item.total}</Text> Total
        </ListItem.Subtitle>
    </TouchableOpacity>
    <Button
        buttonStyle={{backgroundColor: "#a6aba7", padding: 9, textAlign: "right", borderRadius: 10, display: item.isFollowing=="Same user" ? "none" : "flex"}}
        title={item.isFollowing}
        onPress={() => {
        if(item.isFollowing=="Follow"){
            this.follow(item.id_user);
        }
        else if(item.isFollowing=="Unfollow"){
            this.unfollow(item.id_user);
        }
        else if(item.isFollowing=="Same user"){
            //alert("Same user");
        }
        }}
    />
    </ListItem.Content>
</ListItem>
);
}

unfortunately, I get "undefined is not an object (evaluating 'navigation.navigate')"

CodePudding user response：

You are not passing navigation as a prop to the Following component so change your FollowingScreen component likewise :

export const FollowingScreen = ({route, navigation}) => {
  {/** Rest Of Code **/}

   <Following navigation={navigation}/>

  {/** Rest of Code **/}
 }

Then in Following class use this.props.navigation.navigate(....).

CodePudding user response：

You need to declare "navigation" before calling it:

const navigation = useNavigation();

right before

renderItem = (...)