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