React Native - ListView - FlatList


React Native ListView is a view component which contains the list of items and displays in a vertical scrollable list.

But this Listview component is deprecated. We have other Listview components like

  • FlatList
  • SectionList

In this chapter we will learn about FlatList component in React Native.

The FlatList component displays a scrolling list of changing, but similarly structured, data. FlatList works well for long lists of data, where the number of items might change over time. Unlike the more generic ScrollView, the FlatList only renders elements that are currently showing on the screen, not all the elements at once.

The FlatList component requires two props: data and renderItem. data is the source of information for the list. renderItem takes one item from the source and returns a formatted component to render.

 

Lets create a Simple FlatList Example

import React, {useState} from 'react';

import {StyleSheet, View, Text, FlatList, ListView} from 'react-native';

import {Component} from 'react';

 

export default class Views extends Component {

  state = {

    names: [

      {name: 'Name1', key: '1'},

      {name: 'Name2', key: '2'},

      {name: 'Name3', key: '3'},

      {name: 'Name4', key: '4'},

      {name: 'Name5', key: '5'},

      {name: 'Name6', key: '6'},

    ],

  };

 

  render() {

    return (

      <View>

        

 <View style={mystyle.header}>

          <Text style={mystyle.boldText}>FlatList Example</Text>

        </View>

        <FlatList

          style={mystyle.list}

          data={this.state.names}

          renderItem={({item}) => (

            <View style={mystyle.listitems}>

              <Text style={mystyle.boldText}>{item.name}</Text>

            </View>

          )}

        />

      </View>

    );

  }

}

const mystyle = StyleSheet.create({

 list: {

    backgroundColor: '#CCD1D1',

    height: '100%',

  },

  listitems: {

    backgroundColor: '#2ECC71',

    borderRadius: 8,

    margin: 5,

    padding: 10,

    minHeight: 40,

  },

boldText: {

    fontWeight: 'bold',

    color: 'white',

    fontSize: 20,

  },

 header: {

    backgroundColor: '#117864',

    width: '100%',

    alignContent: 'center',

    alignItems: 'center',

    padding: 20,

  },

});

 

Output

 


Subscribe For Daily Updates