Navigating to each item in FlatList

Question

I have a list of products and need to navigate to each product from that list and show data passed from HomeScreen do DetailsScreen.I\'m trying to navigate between screens using

Answer 1

Assuming that your data is being passed as the navigation and the components are connected, and your Item Component is your DetailsScreen therefore you can do the following

openDetails = (data) => {
    this.props.navigation.navigate("Details", { 
      data  <== // ... pass the item data here
    });
  };

      <Item
        itemTitle={item.title}
        openDetails={() => this.openDetails(item)} // Get the item data by referencing as a new function to it
        itemUrl={item.imageUrl}
        data={this.state.data}
      />

DetailsScreen.js

Wrap your view in TouchableOpacity to access Touchable events

<TouchableOpacity onPress={this.props.openDetails} style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> //... Bind the openDetails function to the prop here
   <Text>{JSON.stringify(this.props.itemTitle)}</Text> //...<== Access the other props here
</TouchableOpacity>