Итак, я хочу получить все эти данные в своем коде и затем отобразить их

Я также прочитал много других вопросов и темкак документация Firebase, но все еще не понял, как это сделать правильно
Итак, у меня сейчас есть эта база данных выше и этот код ниже.
Но проблема в том, что она отображает только белый цветэкран, и я не могу найти свою ошибку.
Как я могу это исправить?
import firebase from "react-native-firebase";
import _ from 'lodash';
export default class Messagesss extends React.Component {
state = {
loading: false,
users: []
};
componentWillMount() {
var allMessages = firebase.database().ref(`/users`);
allMessages.once('value').then(snapshot => {
this.setState({ users: snapshot.val(), loading:false })
})
}
renderItem({item}) {
return (
<View style = {styles.contactContainer}>
<View style={styles.userRow}>
<View style={styles.userImage}>
<Avatar
width={60}
rounded
source={{
uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Matterhorn_from_Domhütte_-_2.jpg/1200px-Matterhorn_from_Domhütte_-_2.jpg"
}}
/>
</View>
<View>
<View style={styles.emailBackground}>
<Text
style = {styles.contact} >
{item.email}
</Text>
</View>
<Text
style = {styles.message} >
Da inne lauft öpis...
</Text>
</View>
</View>
</View>
)
}
render() {
if (this.state.loading) {
return (
<View style={{alignItems: 'center', justifyContent: 'center', flex: 1}}>
<ActivityIndicator size="large" color="dodgerblue" />
</View>
)
}
return (
<View style={styles.container}>
<Header
centerComponent={{ text: 'Nachrichten', style: { color: '#FF0000', fontSize: 20, fontWeight: 'bold' } }}
outerContainerStyles={{ backgroundColor: '#ffffff' }}
/>
<FlatList
data={this.state.users}
renderItem={this.renderItem}
keyExtractor={item => item.uid}
/>
</View>
);
}
}