'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?



Solution 1:[1]

As commented by @taathy:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1