React Native ListView to FlatList Migration

Question

So I started learning react-native from videos and they have used ListView but as the ListView will be deprecated soon and will be removed. I get to know that FlatList will be the proper replacement but being a beginner I am not able to migrate to Flatlist.

import React, { Component } from "react";
import { ListView } from 'react-native';
import { connect } from 'react-redux';
import ListItem from './ListItem';

class LibraryList extends Component {

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

        this.dataSource =ds.cloneWithRows(this.props.libraries);
    }

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

        );
    }
}

const mapStateToProps = state => {

    return { libraries: state.libraries };

}; 

export default connect(mapStateToProps) (LibraryList);   

Answer 1

Welcome to stackoverflow.

Migrating should be pretty straightforward, you don't need a dataSource anymore. You can pass your array of items directly to the Component.

import React, { Component } from "react";
import { FlatList } from 'react-native';
import { connect } from 'react-redux';
import ListItem from './ListItem';

class LibraryList extends Component {
    renderRow({item}) {
        return <ListItem library = { item } />;
    }
    render() {
        return(
            <FlatList
                data = {this.props.libraries}
                renderItem = {this.renderRow}
            />
        );
    }
}

const mapStateToProps = state => {

    return { libraries: state.libraries };

}; 

export default connect(mapStateToProps) (LibraryList); 

Header over to the documentation here to find out more.