Skip to content
Related Articles

Related Articles

React Native FlatList Component

View Discussion
Improve Article
Save Article
  • 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.



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.


import React  from 'react';
import{ StyleSheet,
      } from 'react-native';
const DATA = [
    title:"Data Structures"
const Item = ({title}) => {
    <View style={styles.item}>
export default function App() {
const renderItem = ({item})=>( 
  <Item title={item.title}/>
return (
  <View style={styles.container}>
       keyExtractor={item =>}
const styles = StyleSheet.create({
  container: {
  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. 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!