React Native FlatList Component

28 Apr, 2021
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 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 2: Now create a project by the following command.
expo init myapp
Step 3: Now go into your project folder i.e. myappcd 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
Picked
React-Native
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
REST API (Introduction)
Roadmap to Learn JavaScript For Beginners
How to float three div side by side using CSS?
Difference Between PUT and PATCH Request
ReactJS | Router
Axios in React: A Guide for Beginners