Although the data is displaying correctly on console.log, it's not showing up on my screen. Below is a snapshot of the console log for reference.
https://i.sstatic.net/qE4mC.png
This is the code I'm using:
componentWillMount = () => {
this.getData();
}
getData(){
const { currentUser } = firebase.auth();
firebase
.database()
.ref(`/users/${currentUser.uid}/data/`)
.orderByKey()
.on('child_added', snap => {
//Is this correct or does it need to be formatted a different way?
snap.key,
snap.val().Weight
//note that the console logs below displays the data
console.log(snap.key)
console.log(snap.val().Weight)
})
}
renderRow = () => {
return (
<View style={[styles.card, styles.cardBorderTop]}>
<Text>
{snap.key} //Is this the correct way to reference this value?
</Text>
<Text style={[styles.textRight]}>
{snap.val().Weight} //Is this the correct way to reference this value?
</Text>
</View>
)
}
render() {
return (
<View style={[styles.container]}>
<FlatList
data={this.getData} //Is this the correct data reference?
renderItem={this.renderRow}
/>
</View>
);
}
}
The current output on my screen looks like this. Ideally, the data should be displayed in a FlatList. https://i.sstatic.net/0qfsW.png
Any guidance or assistance would be highly appreciated.
Additionally, I have come to understand that storing dates as ISO-8601 format will aid in better sorting. This adjustment will be made once I resolve the issue with rendering query data on my screen.
UPDATE Upon reflection, I acknowledge that my question might lack clarity and apologize for any confusion caused. My objective is to determine the appropriate references needed to display query results containing the date key and the Weight child on my FlatList. Although I can successfully retrieve this data using snap.key and snap.val().Weight in the console, I believe there might be incorrect references preventing their display on the FlatList.
For a visual representation, here is an image of my Firebase database: https://i.sstatic.net/PkkTr.jpg