What is Flatlist and how to use Flatlist in React Native

React native is the most evolving technology nowadays. It provides many built-in components. One of the important and useful components is Flatlist.

Flatlist:

Flatlist is the easiest way to render a scrollable list of items. We just have to pass the data (as an array) without any formatting to it and it will render the items. Flatlist works efficiently with large data as it renders only those items that are displaying on the screen, and not all the items at once.

Basic Props:

The list can be rendered, horizontally and vertically with custom header, footer, and separator. The basic props of flatlist are:

• data → an array of objects (items) to be rendered
• renderItem → iterates over data and renders items
• horizontal → by default, list is rendered vertically. If this property is set to true, the list will render horizontally.
• extraData → if list is dependent on any property other than data prop then mention the property here. The list will re-render itself when this property will change.
• keyExtractor → specifies which property of object should be used as key
• ItemSeparatorComponent → renders component in between item as a separator, not on top (start) and bottom (end) of the list
• ListHeaderComponent → renders custom header component
• ListFooterComponent → renders custom footer component
• ListEmptyComponent → renders empty listview

Example:

Here, below is a simple example of usage of flatlist in react native application which displays a list of employees in a software house.

import React, {Component} from 'react';
import {View, Text, FlatList, StyleSheet, TouchableOpacity} from 'react-native';
 
export default class FlatListComponent extends Component {
 constructor(props) {
   super(props);
 
   this.state = {
     refresh: false,
   };
 }
 
 componentDidMount() {
   // this.makeRemoteRequest();
 }
 
 renderHeader = () => {
   return (
     <View>
       <Text style={styles.header}>Employees</Text>
     </View>
   );
 };
 
 renderFooter = () => {
   return (
     <View>
       <Text style={styles.footer}>End</Text>
     </View>
   );
 };
 
 emptyListView = () => {
   return (
     <View>
       <Text>No records found.</Text>
     </View>
   );
 };
 
 renderSeparator = () => {
   return <View style={styles.itemSeparator}></View>;
 };
 
 onItemSelect = item => {
   console.log('item', item);
 };
 
 render() {
   let data = [
     { id: 1, name: 'John Brahm', designation: 'Project Manager' },
     { id: 2, name: 'Tom Jack', designation: 'Software Engineer' },
     { id: 3, name: 'Mark Bell', designation: 'QA Engineer' },
     { id: 4, name: 'Marshall Doe', designation: 'Software Engineer' },
     { id: 5, name: 'John Dow', designation: 'Product Manager' },
     { id: 6, name: 'Harry Jam', designation: 'Team Lead' },
     { id: 7, name: 'Oliver James', designation: 'Graphic Designer' },
     { id: 8, name: 'Ella Avery', designation: 'QA Engineer' },
     { id: 9, name: 'William Thomas', designation: 'Graphic Designer' },
     { id: 10, name: 'Edward Brian', designation: 'Team Lead' },
   ];
   return (
     <View style={styles.container}>
       <FlatList
         data={data}
         extraData={this.state}
         keyExtractor={item => item.id}
         ListHeaderComponent={this.renderHeader}
         ListFooterComponent={this.renderFooter}
         ListEmptyComponent={this.emptyListView}
         ItemSeparatorComponent={this.renderSeparator}
         renderItem={({item}) => {
           return (
             <TouchableOpacity
               onPress={() => {
                 this.onItemSelect(item);
               }}>
               <View style={styles.flatlist}>
                 <Text style={styles.heading2}>{item.name}</Text>
                 <Text style={styles.subheading}>{item.designation}</Text>
               </View>
             </TouchableOpacity>
           );
         }}
       />
     </View>
   );
 }
}
 
const styles = StyleSheet.create({
 container: {
   flex: 1,
 },
 header: {
   fontSize: 30,
   paddingVertical: 15,
   fontWeight: 'bold',
   textAlign: 'center',
   backgroundColor: '#DCDCDC',
 },
 footer: {
   fontSize: 30,
   paddingVertical: 15,
   fontWeight: 'bold',
   textAlign: 'center',
   backgroundColor: '#DCDCDC',
 },
 flatlist: {
   paddingVertical: 30,
   paddingHorizontal: 10,
 },
 heading2: {
   fontSize: 18,
 },
 subheading: {
   color: 'grey',
 },
 itemSeparator: {
   backgroundColor: 'green',
   height: 1,
 },
});

Output:

Pull to Refresh:

This feature is very important if we are going to work with lists. Users can see the latest data in the list by remaining on the same view. We have to add a refreshControl prop to the Flatlist component which calls the custom function to refresh the list. Make sure if you have not used Flatlist within ScrollView directly otherwise refreshControl will not work.

refreshControl={
           <RefreshControl
             refreshing={this.state.refreshing}
             onRefresh={() => this.onRefreshList()}
             title={'Fetching data...'}
           />
         }

And we have to create a callback function onRefreshList that will be called on the Pull to Refresh request.

onRefreshList = () => {
   this.setState({refreshing: true});
   //server call to update data object - here we are using hardcoded data
   let updatedData = this.state.data;
   updatedData.push({ id: 11, name: 'Marsh Ken', designation: 'Graphic Designer'});
   this.setState({
     refreshing: false,
     data: updatedData
   })
 };

Output: