Populate ReactNative ListView with Firebase data - firebase

Question

I've been struggling for a few days to get this working. I want to populate a ListView in React Native with data from my Firebase database. I have this setup:
const ListItem = require('./profileRow');
var database = firebase.database();
var userId, dataKey;
class Selection extends Component {
constructor(props) {
super(props);
userId = firebase.auth().currentUser.uid;
this.dataRef = firebase.database().ref('/users/' + userId + '/profiles_info');
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
})
};
}
listenForProfiles(dataRef){
dataRef.on('value', (snap) => {
var profiles = [];
snap.forEach((child) => {
profiles.push({
name: child.val().forename,
_key: child.key
});
});
alert(profiles);
this.setState({
dataSource: this.state.dataSource.cloneWithRows(profiles)
});
});
}
componentDidMount() {
this.listenForProfiles(this.dataRef);
}
render() {
return (
<Image source={require('../assets/bg.png')} style={styles.container}>
<View style={{flex: 1, flexDirection:'column'}}>
<Text>
Select a profile to view:
</Text>
</View>
<View style={{flex: 1}}>
<ListView dataSource={this.state.dataSource} renderRow={this._renderItem.bind(this)} enableEmptySections={true} style={styles.listview}> </ListView>
</View>
</Image>
);
}
_renderItem(item) {
return (
<ListItem item={item}/>
);
}
}
The datastructure looks like this:
So what I'm trying to do here is populate each row of the ListView with the "forename" String of each "profile" directory (0,1,2).
But on my alert() I am returned: [object Object],[object Object],[object Object] which must mean it is only fetching the directories as Objects from "profiles_info" and not each "forename" String from those directories.
This is where I am stuck, I hope someone can shed some light on this. I know what the solution should be, I just don't know how to apply it in code.
Thanks in advance!

Answer 1

You are pushing objects into your profiles array here, so it makes sense that your alerts are showing objects:
profiles.push({
name: child.val().forename,
_key: child.key
});
If you use alert(JSON.stringify(profiles)); instead of alert(profiles); you should see an array of objects with fields name and key. Accessing profiles[0].name would give the actual name.
Side note, if you use console.log instead of alert you get some more meaningful information.

Answer 2

Try Following Tutorial. may be help you.
react-native-firebase-tutorial-list