Firestore data in a flatlist with react native-CodePudding

I've been trying to output data from my Firestore db to a Flatlist in React native but so far unsuccesfull.

I've used this Flatlist for RN and Firestore docs as reference to getting started but for some reason I am missing something here regarding the output method of the Flatlist because it wont output the flatlist itself. When I console log the locations array it shows me all the docs inside that i've queried so it does push them all into an array and my understanding is of FlatLists that they need an array to function but it does not throw any error just doesn't render. Any help more than welcome!


    useEffect(async () => {
        const locations = [];
        const querySnapshot = await getDocs(collection(db, "Location"));
        querySnapshot.forEach((doc) => {
          // doc.data() is never undefined for query doc snapshots
            locations.push(doc.data());
          console.log(locations);
        }); 
        return () => querySnapshot();
    }, []);
    

    return (
        <View style={styles.screen}>
            <Text>hello</Text>
            <FlatList data={locations}
                renderItem={({ item }) => (
                    <View >
                        <Text>name: {item.name}</Text>
                        <Text>Depth: {item.depth}m</Text>
                        <Text>GeoLocation: {item.geo}</Text>
                        <Text>id: {item.uid}</Text>
                    </View>
                )}
            />

CodePudding user response：

Your variable locations is defined in your useEffect. The FlatList can not access it. You need to create a state via useState and store the data in there once it is loaded. Setting the state will cause a rerendering of the component and the FlatList will be updated with the new data.

Here is one possible implementation.

const SomeScreen = () => {

    const [locations, setLocations] = useState([])

    useEffect(() => {
        const loadData = async () => {
            const querySnapshot = await getDocs(collection(db, "Location"));
            setLocations(querySnapshot.map(doc => doc.data()))
        }

        loadData()
    }, [setLocations]);
    

    return (
            <FlatList data={locations}
                renderItem={({ item }) => (
                    ...
                )}
            />
   )
}