Skip to content
Related Articles

Related Articles

Improve Article

React Native FlatList Component

  • Last Updated : 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 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




My Personal Notes arrow_drop_up
Recommended Articles
Page :