Reputation: 265
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
Reputation: 1222
I fixed the issue after removing the "message" node in my data structure. With this the code above works.
Upvotes: 2