Как обновить мой код (он имеет ListView, componentWillMount и componentWillReceiveProps) до последней версии?

Question

Я пытаюсь создать приложение, в которое я могу добавить сотрудника, который будет храниться в базе данных Firebase) и показать данные, сохраненные на сцене моего приложения. Предполагается, что в этой сцене показан только один ключ объекта.

Я попытался обновить его до FlatList самостоятельно и не смог показать на нем упомянутый ранее ключ. Он ничего не показывал, он просто записывал количество объектов, которые он должен был визуализировать. Я уже изменил componentWillMount на componentDidMount, но не совсем знал, как использовать его с моим кодом.

import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { ListView } from 'react-native';
import { employeesFetch } from '../actions';
import ListItem from './ListItem';

class EmployeeList extends Component {
    componentWillMount() {
        this.props.employeesFetch();

        this.createDataSource(this.props);
    }

    componentWillReceiveProps(nextProps) {
        this.createDataSource(nextProps);
    }

    createDataSource({ employees }) {
        const ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2
        });

        this.dataSource = ds.cloneWithRows(employees);
    }

    renderRow(employee) {
        return <ListItem employee={employee} />;
    }

    render() {
        return (
            <ListView
                enableEmptySections
                dataSource={this.dataSource}
                renderRow={this.renderRow}
            />
        );
    }
}

const mapStateToProps = state => {
    const employees = _.map(state.employees, (val, uid) => {
        return { ...val, uid };
    });

    return { employees };
};

export default connect(mapStateToProps, { employeesFetch })(EmployeeList);

Я добавлю также файл ListItem на тот случай, если вам нужно его увидеть.

import React, { Component } from 'react';
import { Text, TouchableWithoutFeedback, View } from 'react-native';
import { Actions } from 'react-native-router-flux';
import { CardSection } from './common';

class ListItem extends Component {

    render() {
        const { name } = this.props.employee;

        return (
            <CardSection>
                <Text style={styles.titleStyle}>
                    {name}
                </Text>
            </CardSection>
        );
    }
}

const styles = {
    titleStyle: {
        fontSize: 18,
        paddingLeft: 15
    }
};

export default ListItem;

Я ожидаю, что сцена покажет мне CardSection для каждого сотрудника, записанного в моей базе данных, и в этом разделе должен отображаться ключ NAME для каждого созданного экземпляра, но он показывает ошибку (поскольку ListView больше не существует. )