Проблема с загрузкой базы данных в приложении React Native Expo

Question

В настоящее время я работаю над приложением автомобильного пула с React Native и Firebase, и все работает, кроме одной функции: чата.

В частности, сообщения в чате не загружаются при первом открытии чата, я вынужден вернуться на предыдущую вкладку и снова открыть чат, чтобы увидеть предыдущие сообщения.

Кто-нибудь может понять, откуда возникла проблема? Может быть, в функции componentDidMount, но после многих тестов ничего не изменилось.

Я использую React Native Expo и Firebase для базы данных.

Это мой код:

export default class ChatScreen extends React.Component {

    static navigationOptions = ({ navigation }) => {
        return {
            title: navigation.getParam('name', null)
        }
    } 


    constructor(props){
        super(props);
        this.state = {
            person: {
                name: props.navigation.getParam('name'),
            },
            textMessage: '',
            messageList: '',
            user: 'user',
        }
    }


    componentWillMount(){

        const UserID = firebase.auth().currentUser.uid;


            firebase.database().ref(`/users/${UserID}/tchat/userinfos`)
            .on('value', snapshot => {
                    snapshot.forEach(userSnapshot => {
                    let data = userSnapshot.val();
                    this.setState ({ user : data })
                }); 
            })       

    }

    componentDidMount() {

        const msgRef = firebase.database().ref('messages').child(this.state.user).child(this.state.person.name)

        msgRef.on('child_added', (value) => {
            this.setState((prevState) => {
                return {
                    messageList: [...prevState.messageList, value.val()]
                }
            })  
        })

    }

А это моя функция "Отправить сообщение" и метод визуализации:

sendMessage = async () => {
        if(this.state.textMessage.length > 0){
            let msgId = firebase.database().ref('messages').child(this.state.user).child(this.state.person.name).push().key;
            let updates = {};
            let message = {
                message: this.state.textMessage,
                time: firebase.database.ServerValue.TIMESTAMP,
                from: this.state.user
            }
            updates['messages/' + this.state.user + '/' + this.state.person.name + '/' + msgId] = message;
            updates['messages/' + this.state.person.name + '/' + this.state.user + '/' + msgId] = message;
            firebase.database().ref().update(updates);
            this.setState({ textMessage: '' });
        }
    }

    renderRow = ({ item }) => {
        return(
            <View style= {{
                flexDirection: 'row',
                width:'60%',
                alignSelf: item.from === this.state.user ? 'flex-end' : 'flex-start',
                backgroundColor: item.from === this.state.user ? '#049DD9' : '#70CB37',
                borderRadius: 5,
                marginBottom: 10
            }}>
                <Text style={{color: '#fff', padding:7, fontSize:16}}>
                    {item.message}
                </Text>
                <Text style={{color:'#eee', padding:3, fontSize:12}}>{this.convertTime(item.time)}</Text>
            </View>
        )
    }

    render () {
        let {height, width} = Dimensions.get('window');
        return (
            <KeyboardAvoidingView behavior="padding">


                <FlatList 
                    style={{padding:10, height: height * 0.8}}
                    data={this.state.messageList}
                    renderItem={this.renderRow}
                    keyExtractor={(item,index) => index.toString()}
                />
                <KeyboardAvoidingView style={{flexDirection:'row', alignItems:'center'}}>
                    <TextInput
                        style={{
                            width: '70%',
                            height: '80%',
                            margin: '2%',
                            paddingLeft: '2%',
                            borderWidth: 1,
                            borderRadius: 5,
                            borderColor: "#CBCBCB",
                          }}
                        value={this.state.textMessage}
                        placeholder="Votre message ..."
                        onChangeText={this.handleChange('textMessage')}
                    />


                    <TouchableOpacity 
                            onPress={this.sendMessage}
                            style = {{
                                backgroundColor: '#70CB37',
                                borderRadius: 5,
                                width: '20%',
                                marginRight: '2%',
                                padding: '2%',


                            }}

                    >
                        <Text style={{ fontSize: 15, fontWeight:"800", color:"#FFFFFF", textAlign: "center" }}>Envoyer</Text>
                    </TouchableOpacity>
                </KeyboardAvoidingView>
            </KeyboardAvoidingView>
        )
    }
}

Заранее благодарен за помощь!