In this article, we are going to learn about the uses of the FlatList Component. So firstly let’s know what is FlatListt?The FlatList component is an efficient way to display items in a scrollable list view. This component has many supported features such as Scroll Loading, header/footer views support, horizontal mode, pull to refresh, etc.
Syntax:
<FlatList
data={}
renderItem={}
/> In the above syntax, we can see that the FlatList component has two required props i.e. data and renderItem.
- data: It is an array of items or data.
- renderItem: It is used to render the data into the list. It basically needs a function to take an item from the data source and returns the list component to render.
These two props of the FlatList component are compulsory to use. There are many other props in FlatList components that can also be used.
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 is 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.
Uses of FlatList:
- FlatList is used to render the items in a scrollable list view.
- Large Data: When we have a large list of data and the number of data can change over time we can use FlatList as large data affect rendering speed and using FlatList won’t affect the rendering speed.
- FlatList is used when we want to render only those elements that are currently being displayed on the screen (default: 10 items).
- For automatic memory management and to handle data changes in list we use a flat list.
- FlatList can be used when we want the separator between the list items with ItemSeparatorComponent prop.
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:
gfg
Example 1: In this example, we have created a simple flat list.
import { FlatList, StyleSheet, Text, View } 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"
},
]; export default function App() {
return (
<View style={styles.container}>
<FlatList
data={DATA}
renderItem={({ item }) => <Text style=
{styles.item}>{item.title}</Text>}
keyExtractor={(item) => item.id}/>
</View>
);
}
const styles = StyleSheet.create({ container: {
flex:1,
marginTop:30,
padding:2,
},
item: {
backgroundColor: 'green',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
fontSize: 25,
},
}); |
Step to run the application: Start the server by using the following command.
npm run android
Output:
gfg
Example 2: In this example, we have created the FlatList with a separator between each data item.
import React from "react";
import { FlatList, StyleSheet, Text, View } 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"
},
]; export default function App() {
const Separator = () => {
return <View style={{
height: 4,
backgroundColor: "red",
marginHorizontal: 3}}
/>;
};
return (
<View style={styles.container}>
<FlatList
data={DATA}
renderItem={({ item }) => <Text style=
{styles.item}>{item.title}</Text>}
keyExtractor={(item) => item.id}
ItemSeparatorComponent={Separator}
/>
</View>
);
}
const styles = StyleSheet.create({ container: {
flex:1,
marginTop:30,
padding:2,
},
item: {
backgroundColor: 'green',
padding: 20,
marginHorizontal: 16,
marginVertical:8,
fontSize: 25,
},
}); |
Explanation: In this example, we have created an array of data then we make a function called “Separator”. After that, we assign that function to ItemSeparatorComponent prop of FlatList Component which is used to add a separator between each item.
Output:
Reference: https://reactnative.dev/docs/flatlist