Get List item information onClick Firebase data and React Native

Viewed 296

I'm working on to do app with React Native and firebase/firestore, I'm still learning.

I want to open a new screen when I click on the card/item in my list and that the item that I clicked on show more specific information about this item. So here is my listingScreen which is working and getting the data from firebase/firestore :

export default function listingScreen({ navigation }) {
    
  const [entities, setEntities] = useState([])
  const entityRef = firebase.firestore().collection('entities');
  const [loading, setLoading] = useState(true)

  
  useEffect(() => {
      entityRef
          .orderBy('createdAt', 'desc')
          .onSnapshot(
              querySnapshot => {
                  const newEntities = []
                  querySnapshot.forEach(doc => {
                      const entity = doc.data()
                      entity.id = doc.id
                      newEntities.push(entity)
                  });
                  setEntities(newEntities)
                  setLoading(false)
              },
              error => {
                  console.log(error)
                  setLoading(false)
              }
          );
          
  }, [])


  const renderEntity = ({item}) => {
      return (
              <Card
              title={item.text}
              subTitle={item.description}
              onPress={() => navigation.navigate(routes.LISTING_DETAILS, item)}
              >
                  {item.text} - 
                  {item.category} - 
                  {item.location} - 
                  {item.description}
              </Card>
      )
  }
  
  return (
    <Screen style={styles.screen}>
        <View style={styles.header}>
          <AppLogo/> 
        </View>
      
      <View style={styles.container}>
          { entities && (
              <View style={styles.listContainer}>
                  <FlatList
                      data={entities}
                      renderItem={renderEntity}
                      keyExtractor={(item) => item.id}
                      removeClippedSubviews={true}
                      
                  />
              </View>
          )}
          
      </View>
    </Screen>
      
  )
  
}

So onPress on the Card component the navigation is sent to this screen but I want to get the data of this specific item that I click on. How can I do that?

function ListingDetailsScreen({navigation}) {
  

return (
    <View>
      
      <View style={styles.detailsContainer}>
        <Text style={styles.title}>Test</Text>
        <Text style={styles.description}>Description</Text>
        <Image style={styles.image}
        tint="light"
        source={require('../assets/bateau.jpg')} />
        <View style={styles.userContainer}>
        <FlatList
                    data={   }             //I don't know what data should I put and keyExtractor
                    keyExtractor={    }
                    ItemSeparatorComponent={ListItemSeparatorComponent}
                    renderItem={({item }) => 
                        <ListItem
                        
                            title={item.title}
                            subTitle={item.subTitle}
                            IconComponent={
                                <Icon 
                                    name={item.icon.name} 
                                    backgroundColor={item.icon.backgroundColor}
                                />
                            }
                        />
                    }
                />
        </View>
      </View>
      
    </View>
  );
}

Thank you very much

1 Answers

Use the route.params in your component called item:

const {item} = route.params;

In your component import the useNavigation from "@react-navigation/core" or check this Passing parameters to routes doc for more information.

Related