'React native flatlist return only one item from firestore
I'm new with react native. I'm using a flatlist to render data from firebase (v9).
Everything works well, there isn't any error but, the list show only one item. After searching on differents topic, I think the problem is from the keyExtractor. But i don't know how to solve it.
The Key Extractor from the code :
keyExtractor={item => item.id}
Here is the code :
const Liste = () => {
const [users, setUsers] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [isLoading, setIsLoading] = useState(false);
const querySnapshot = await getDocs(collection(db, "form"));
querySnapshot.forEach((doc) => {
setUsers([...users, doc.data()] );
});
}
const renderItem = ({ item }) => {
return(
<View>
<View>
<Text>{`${item.Address}`}</Text>
<Text>{`${item.Prix}`}</Text>
<Text>{`${id}`}</Text>
</View>
</View>
);
};
const renderLoader = () => {
return (
isLoading ?
<View style={styles.loaderStyle}>
<ActivityIndicator size="large" color="#aaa" />
</View> : null
);
};
const loadMoreItem = () => {
setCurrentPage(currentPage + 1);
};
return (
<View
<StatusBar backgroundColor="#000" />
<FlatList
data={users}
renderItem={renderItem}
keyExtractor={item => item.id}
ListFooterComponent={renderLoader}
onEndReached={loadMoreItem}
onEndReachedThreshold={0}
/>
</View>
)}
export default Liste;
Firestore :
The screen of the app :
Can you please help me ?? Thanks a lot !!
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|


