CODEWITHSUNDEEP
reactjsreact-nativereact-navigationreact-native-flatlistreact-native-navigation
Gurmukh Singh
Gurmukh Singh

Reputation: 2017

React Native - Passing navigation into a child component

I have a screen with the following:

function Intereset ({ navigation }) {
    function ReturnMyFunction () {
    if (!var.length) {
        return ( <NoILikes /> )
    } else {
        return (
            <FlatList
                data={Ilike}
                keyExtractor={item => item._id}
                ItemSeparatorComponent={() => <Divider />}
                renderItem={UserRow}
            /> 
        )
    }
}

return ( <ReturnILikeOrNoILike /> )
}
export default Interest

Here is my UserRow component below:

const UserRow = ({ item, navigation }) => (
  <TouchableOpacity onPress={() => navigation.navigate("ProfileDetailScreenSingle", { userID: item.likeTo })}>
    <View style={styles.row}>
        <Image style={styles.avatar}
            resizeMode={"cover"}
            source={{ uri: item.likeToProfileImage }}
        />
        <View style={styles.textContainer}>
            <Text style={styles.name}>{item.likeToName}, <Text>{item.likeToAge}</Text></Text>
        </View>
        <Text style={styles.viewProfileText}>View Profile</Text>
        <AntDesign name="right" size={14} color="black" />
    </View>
</TouchableOpacity>

)

When I click on the UserRow to navigate I get the following issue.

enter image description here

Upvotes: 0

Views: 135

Answers (2)

Vu Phung
Vu Phung

Reputation: 707

I'm using useNavigation to redirect screen in stack:

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

const UserRow = ({ item }) => {
  const navigation = useNavigation()

  const onGoToProfileDetailScreenSingle = () => navigation.navigate("ProfileDetailScreenSingle", { userID: item.likeTo })

  return (
    <TouchableOpacity onPress={onGoToProfileDetailScreenSingle}>
      ...
    </TouchableOpacity>
  );
}

const renderItem = ({ item }) => <UserRow item={item} />

return (
  <FlatList
    data={Ilike}
    renderItem={renderItem}
    ...
  />
)

Upvotes: 1

user18309290
user18309290

Reputation: 8300

Use onPress handler instead and perform navigation on the screen.

const UserRow = ({ item, onPress }) => (
  <TouchableOpacity onPress={onPress}>
...
  </TouchableOpacity>
);

const renderItem = ({ item }) => {
  return (
    <UserRow
      item={item}
      onPress={() => navigation.navigate(...)}
    />
  );
};

<FlatList
  data={Ilike}
  renderItem={renderItem}
...
/>

Upvotes: 0

Related Questions