How to navigate to a specific users profile page after selecting him/her from a list of multiple users?

Question

How do I code this functionality in react-native?

eg. In Instagram when you go to your followers' page, you can view a whole list. You can tap on any of them and you will navigate to that user's specific profile.

I was wondering if it has something to do with React-Navigation like passing some unique id or code, but I am still unclear, please help me out.

PS I am using cloud firestore from firebase as my database.

Answer 1

The way I would do this is as follows:

1) Create a FlatList:

<FlatList
  data={//list of users}
  renderItem={this.renderList}
  keyExtractor={(item, index) => index.toString()}
/>

2) Every element in the FlatList is a custom component. Navigation props is also passed to the component along with the data. The handler function for renderItem is given below:

renderList = ({ item }) => (
  <UserSummary data={item} navigation={this.props.navigation} />
);

3) UserSummary is in fact a Touchable element (say Touchable Opacity) and the onPress event handler for that is given below:

onPress={() =>
    props.navigation.navigate("UserDetailsScreen", {
      userDetails: props.data
    })

Note that I have also passed some data along with the navigation. Let's say, it's some userID that is unique. This information can be used in the UserDetailsScreen to render the details of the user.

Hope this will give you an idea.

Answer 2

you can refer this link. You can pass id as parameter as this.props.navigation.navigate('RouteName', { /* params go here */ }) .