taathy
taathy

Reputation: 265

Displaying data from Firestore into React Native FlatList did not work

I'm using the React Native FlatList module to show data that is stored in an firestore collection. This data should rendered into an content box with an colored background. Actually, when I render the corresponding Screen, I get as many content boxes as objects are stored into database, but no single field is rendered into the view. I also can print the data object to the console, so querying data should work.

    useEffect(() => {
        const unsubscribe = onSnapshot(query(collection(db, 'Announcement')), (querySnap) => {
            const announcements = []
            querySnap.forEach((announcement) => {
                announcements.push({ ...announcement.data() })
                console.log(announcement.data())
                setContent(announcements)
                setLoading(false)
            })
        })
        unsubscribe()
    },[])


    const renderAnnouncement = ({ item }) => {
        return(
            <View style={ styles.boxItem }>
                <Text style={ styles.date }>{ item.date }</Text>
                <Text style={ styles.title }>{ item.title }</Text>
                <Text style={ styles.body }>{ item.body }</Text>
            </View>
        )
    }


    return (
        <SafeAreaView style={ styles.container }>
            <FlatList
                data={ content }
                renderItem={ renderAnnouncement }
                keyExtractor={ item => item.id }
                ListEmptyComponent={ handleEmptyList }
            />
        </SafeAreaView>
    )
}

I have structured my data in firestore on the following way:

Announcements
    - Document-ID
        - message
            - title: string
            - body: string
            - date: string
            - id: number

    - Document-ID
        - message
            - title: string
            - body: string
            - date: string
            - id: number

... and so on

I read related topics here, but all the hints given there, did not solve my issue. Did someone of you have an hint?

Upvotes: 0

Views: 187

Answers (1)

Rogelio Monter
Rogelio Monter

Reputation: 1222

As commented by @taathy:

I fixed the issue after removing the "message" node in my data structure. With this the code above works.

Upvotes: 2

Related Questions