React Native рендеринг компонента дважды, но renderItem не обновляет значения?

Я пытаюсь заполнить FlatList пользовательских компонентов (<EventCard>) на экране, однако ни один из элементов компонентов не отображается. Пример: компонент titlein my пуст, а не «Тестовое событие», как показано в выводе терминала.

Внутри componentWillMount() я запрашиваю свою базу данных для заполнения массива, который затем используется в renderItem для заполнения FlatList

Вывод терминала показывает начальный render() с пустым массивом, а затем второй render() с данными.

Моя предполагаю состоит в том, что компоненты пытаются извлечь данные из пустого массива, в результате чего они становятся пустыми. Я сбит с толку, потому что второй вызов render() регистрируется, так что компонент не будет отображаться снова? с полным массивом?

После некоторых исследований я думаю, что мне может понадобиться вызвать forceUpdate() или что-то подобное, чтобы получить обновленные данные из массива. Я также пытался возиться с componentWillReceiveProps(), но я тоже не могу заставить это работать (Источник). Честно говоря, я не уверен, использую ли я renderItem, это может способствовать моей проблеме.

Я не включил EventCard.js, так как совершенно уверен, что это не источник ошибки, но могу по запросу.

18:00:16: RENDER
18:00:16: Array []
18:00:17: RENDER
18:00:17: Array [
18:00:17:   Object {
18:00:17:     "date": "Fri Dec 07 2018",
18:00:17:     "host": "Test host",
18:00:17:     "key": "-L4mE_YKKbrvaMVNaA2T",
18:00:17:     "location": "",
18:00:17:     "time": "08:30",
18:00:17:     "title": "Test event",
18:00:17:     "volunteersHave": 1,
18:00:17:     "volunteersNeed": "20",
18:00:17:   },
18:00:17: ]

Соответствующий файл Dashboard.js

import React from 'react';
import { Button, FlatList, StyleSheet, Text, View} from 'react-native';
import { Icon } from 'react-native-elements';
import EventCard from './EventCard';    
import * as firebase from 'firebase';

export default class Dashboard extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            eventArr: [],
        }
    }

    componentWillMount = () => {
        var tempArr = [];
        firebase.database().ref('/events/').once('value').then((snapshot) => {
            tempArr = this.snapshotToArray(snapshot);
            this.setState({
                eventArr: tempArr
            });
        });
    }

    snapshotToArray = snapshot => {
        var retArr = [];
        snapshot.forEach(childSnapshot => {
            var item = childSnapshot.val();
            item.key = childSnapshot.key;
            retArr.push(item);
        });
        return retArr;
    };

    render(){
        console.log('RENDER')
        console.log(this.state.eventArr)
        return (
            <View>
                <FlatList
                    data={this.state.eventArr}
                    renderItem={({item}) =>
                        <EventCard>
                            title={item.title}
                            date={item.date}
                            location={item.location}
                            rsvp={item.volunteersHave}
                            time={item.time}
                            onPress={() => navigate('EventPage')}
                        </EventCard>}
                />
            </View>
        );
    }
}
//styles omitted
const styles = StyleSheet.create({
});