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
Contact Us