React Native FlatList Component

In this article, We are going to see how to create a FlatList in react-native. For this, we are going to use FlatList component. It is used to render the items in a scrollable list view.

Syntax:

<FlatList
   data={}
   renderItem={}
/> 

Props in FlatList:

• renderItem: It is used to render the data into the list.
• data: It is basically an array of data.
• ItemSeparatorComponent: It is used to render in between each item.
• ListEmptyComponent: It is rendered when the list is empty.
• ListFooterComponent: It is rendered at the bottom of all items.
• ListFooterComponentStyle: It is used to style the internal view for ListFooterComponent.
• ListHeaderComponent: It is rendered at the top of all the items.
• ListHeaderComponentStyle: It is used to style the internal view ListHeaderComponent.
• columnWrapperStyle: It is an optional custom style for multi-item rows.
• extraData: It is the property that tells the list to re-render.
• getItemLayout: It is an optional optimization that allows skipping the measurement of dynamic content if you know the size of items.
• horizontal: If this is true then the items will be rendered horizontally instead of vertically.
• initialNumToRender: It tells how many items to render in the initial batch.
• initialScrollIndex: If it is provided then instead of starting from the top item, it will start from the initialScrollIndex item.
• inverted: It reverses the direction of the scroll.
• keyExtractor: It is used to extract the unique key for the given item.
• numColumns: It is used to render multiple columns.
• onEndReached: It is called once when the scroll position gets within the rendered content.
• onEndReachedThreshold: It tells us how far we are from the end.
• onRefresh: If provided, a standard RefreshControl will be added.
• onViewableItemsChanged: It is called when the visibility of row changes.
• progressViewOffset: It set when the offset for loading is needed. It is only available on android.
• refreshing: Set true, while waiting for new data from a refresh.
• removeClippedSubviews: This may improve scroll performance for large lists. On Android the default value is true.
• viewabilityConfigCallbackPairs: It shows the list of pairs.

Methods in FlatList:

• flashScrollIndicators(): It displays the scroll indicators momentarily.
• getNativeScrollRef(): It provides a reference to the underlying scroll component.
• getScrollResponder(): It provides a handle to the underlying scroll responder.
• getScrollableNode(): It provides a handle to the underlying scroll node.
• recordInteraction(): It tells the list of an interaction that has occurred.
• scrollToEnd(): It scrolls to the end of the content.
• scrollToIndex(): It scrolls to a particular item whose index is provided.
• scrollToItem(): It scrolls to a provided item. It requires a linear scan through data.
• scrollToOffset(): It scrolls to a specific content pixel offset in the list.

Now let’s start with the implementation:

• Step 1: Open your terminal and install expo-cli by the following command.

  npm install -g expo-cli

• Step 2: Now create a project by the following command.

  expo init myapp

• Step 3: Now go into your project folder i.e. myapp

  cd myapp

Project Structure:

Example: Now let’s implement the FlatList. Here we created a FlatList of courses.

App.js

import React  from 'react';
import{ StyleSheet,
        Text,
        View,
        FlatList,
      } from 'react-native';
const DATA = [
  {
    id:"1",
    title:"Data Structures"
  },
  {
    id:"2",
    title:"STL"
  },
  {
    id:"3",
    title:"C++"
  },
  {
    id:"4",
    title:"Java"
  },
  {
    id:"5",
    title:"Python"
  },
  {
    id:"6",
    title:"CP"
  },
  {
    id:"7",
    title:"ReactJs"
  },
  {
    id:"8",
    title:"NodeJs"
  },
  {
    id:"9",
    title:"MongoDb"
  },
  {
    id:"10",
    title:"ExpressJs"
  },
  {
    id:"11",
    title:"PHP"
  },
  {
    id:"12",
    title:"MySql"
  },
];

const Item = ({title}) => {
  return(
    <View style={styles.item}>
      <Text>{title}</Text>
    </View>
  );
}

export default function App() {


const renderItem = ({item})=>(
  <Item title={item.title}/>
);
return (
  <View style={styles.container}>
    <FlatList
       data={DATA}
       renderItem={renderItem}
       keyExtractor={item => item.id}
    />
  </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginTop:30,
    padding:2,
  },
  item: {
    backgroundColor: '#f5f520',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
});

Start the server by using the following command.

npm run android

Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again. 

Reference: https://reactnative.dev/docs/flatlist