Everything You Need To Know About FlatList in React Native

FlatList is a component used to render large lists of data in React Native. It is used to create a simple list of components that can be scrolled either vertically or horizontally. It is a very important component for creating efficient user interfaces in React Native. It is also an optimized way to display large lists of data as compared to other components like ListView.

In this tutorial, we will learn about the FlatList component and its features in React Native. We will also be building a basic todo app to demonstrate the use of FlatList. We will cover topics such as vertical lists, horizontal FlatList, pull to refresh, empty lists, handling user actions, pagination, performance optimizations, and optimizing images and videos in FlatList.

We are leveraging a lot of the features listed in this article at Instamobile, to build our highly performant React Native templates.

Vertical Lists in React Native

In React Native, a vertical list is a component that displays a list of components in a vertical order. It is implemented using the FlatList component.

To create a simple vertical list, we need to use the FlatList component and pass in the data array as a prop. We also need to pass in a renderItem prop to render the items in the list.

Below is an example of a simple vertical list using the FlatList component.

import React, { useState } from 'react';
import { FlatList, View, Text } from 'react-native';

const dataArray = [
  {
    id: '1',
    title: 'Item 1',
  },
  {
    id: '2',
    title: 'Item 2',
  },
  {
    id: '3',
    title: 'Item 3',
  },
];
const VerticalList = () => {
  return (
    <FlatList
      data={dataArray}
      keyExtractor={item => item.id}
      renderItem={({ item }) => (
        <View>
          <Text>{item.title}</Text>
        </View>
      )}
    />
  );
};
export default VerticalList;

In the above example, we have imported the FlatList component from React Native. We have then declared a data array containing id and title of items. We have then used the FlatList component to render the data array in the form of a vertical list. We have also used the renderItem prop to render each item in the list.

Horizontal FlatList in React Native

In React Native, a horizontal list is a component that displays a list of components in a horizontal order. It is implemented using the FlatList component.

To create a simple horizontal list, we need to use the FlatList component and pass in the data array as a prop. We also need to pass in a renderItem prop to render the items in the list. We also need to set the horizontal prop to true to make the list display in a horizontal order.

Below is an example of a simple horizontal list using the FlatList component.

import React, { useState } from 'react';
import { FlatList, View, Text } from 'react-native';

const dataArray = [
  {
    id: '1',
    title: 'Item 1',
  },
  {
    id: '2',
    title: 'Item 2',
  },
  {
    id: '3',
    title: 'Item 3',
  },
];
const HorizontalList = () => {
  return (
    <FlatList
      horizontal={true}
      data={dataArray}
      keyExtractor={item => item.id}
      renderItem={({ item }) => (
        <View>
          <Text>{item.title}</Text>
        </View>
      )}
    />
  );
};
export default HorizontalList;

In the above example, we have imported the FlatList component from React Native. We have then declared a data array containing id and title of items. We have then used the FlatList component to render the data array in the form of a horizontal list. We have also set the horizontal prop to true to make the list display in a horizontal order. We have also used the renderItem prop to render each item in the list.

Pull to Refresh

Pull to refresh is a feature that allows users to refresh the list of data by pulling down on the list. It is implemented using the onRefresh prop of the FlatList component.

To implement pull to refresh, we need to set the onRefresh prop of the FlatList component to a function that will be executed when the user pulls down on the list. We also need to set the refreshing prop of the FlatList component to true when the refresh is in progress and false when the refresh is complete.

Below is an example of pull to refresh using the FlatList component.

import React, { useState } from 'react';
import { FlatList, View, Text, RefreshControl } from 'react-native';

const dataArray = [
  {
    id: '1',
    title: 'Item 1',
  },
  {
    id: '2',
    title: 'Item 2',
  },
  {
    id: '3',
    title: 'Item 3',
  },
];
const ListWithRefreshControl = () => {
  const [refreshing, setRefreshing] = useState(false);
  const onRefresh = () => {
    setRefreshing(true);
    // fetch data
    setRefreshing(false);
  };
  return (
    <FlatList
      data={dataArray}
      keyExtractor={item => item.id}
      renderItem={({ item }) => (
        <View>
          <Text>{item.title}</Text>
        </View>
      )}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
    />
  );
};
export default ListWithRefreshControl;

In the above example, we have imported the FlatList and RefreshControl components from React Native. We have then declared a data array containing id and title of items. We have then used the FlatList component to render the data array. We have also set the refreshing prop to a useState hook and the onRefresh prop to a function that will be executed when the user pulls down on the list. We have also used the RefreshControl component to enable the pull to refresh feature.

Empty Lists in React Native

In React Native, an empty list is a component that displays a message when the list is empty. It is implemented using the ListEmptyComponent prop of the FlatList component.

To implement an empty list, we need to set the ListEmptyComponent prop of the FlatList component to a component that will be displayed when the list is empty.

Below is an example of an empty list using the FlatList component.

import React, { useState } from 'react';
import { FlatList, View, Text } from 'react-native';

const dataArray = [];
const EmptyList = () => {
  return (
    <FlatList
      data={dataArray}
      ListEmptyComponent={() => (
        <View>
          <Text>List is empty</Text>
        </View>
      )}
      keyExtractor={item => item.id}
      renderItem={({ item }) => (
        <View>
          <Text>{item.title}</Text>
        </View>
      )}
    />
  );
};
export default EmptyList;

In the above example, we have imported the FlatList component from React Native. We have then declared an empty data array. We have then used the FlatList component to render the empty data array. We have also used the ListEmptyComponent prop to render a component that will be displayed when the list is empty.

Handling User Actions in FlatList

In React Native, handling user actions in a list is a feature that allows users to interact with a list item. It is implemented using the onPress prop of the FlatList component.

To handle user actions in a list, we need to set the onPress prop of the FlatList component to a function that will be executed when the user interacts with a list item.

Below is an example of handling user actions in a list using the FlatList component.

import React, { useState } from 'react';
import { FlatList, View, Text } from 'react-native';

const dataArray = [
  {
    id: '1',
    title: 'Item 1',
  },
  {
    id: '2',
    title: 'Item 2',
  },
  {
    id: '3',
    title: 'Item 3',
  },
];
const ListWithUserActions = () => {
  const handlePress = item => {
    // handle user action
  };
  return (
    <FlatList
      data={dataArray}
      keyExtractor={item => item.id}
      renderItem={({ item }) => (
        <View>
          <Text onPress={() => handlePress(item)}>{item.title}</Text>
        </View>
      )}
    />
  );
};
export default ListWithUserActions;

In the above example, we have imported the FlatList component from React Native. We have then declared a data array containing id and title of items. We have then used the FlatList component to render the data array. We have also used the onPress prop to handle user actions in the list. We have set the onPress prop to a function that will be executed when the user interacts with a list item.

Pagination for Lists in React Native

In React Native, pagination for lists is a feature that allows users to navigate between pages of a list. It is implemented using the onEndReached prop of the FlatList component.

To implement pagination for a list, we need to set the onEndReached prop of the FlatList component to a function that will be executed when the user scrolls to the end of the list. We also need to set the onEndReachedThreshold prop of the FlatList component to the number of items that should be displayed before the onEndReached function is executed.

Below is an example of pagination for a list using the FlatList component.

import React, { useState } from 'react';
import { FlatList, View, Text } from 'react-native';

const dataArray = [
  {
    id: '1',
    title: 'Item 1',
  },
  {
    id: '2',
    title: 'Item 2',
  },
  {
    id: '3',
    title: 'Item 3',
  },
];
const ListWithPagination = () => {
  const handleEndReached = () => {
    // fetch next page of data
  };
  return (
    <FlatList
      data={dataArray}
      keyExtractor={item => item.id}
      renderItem={({ item }) => (
        <View>
          <Text>{item.title}</Text>
        </View>
      )}
      onEndReached={handleEndReached}
      onEndReachedThreshold={2}
    />
  );
};
export default ListWithPagination;

In the above example, we have imported the FlatList component from React Native. We have then declared a data array containing id and title of items. We have then used the FlatList component to render the data array. We have also used the onEndReached prop to handle pagination for the list. We have set the onEndReached prop to a function that will be executed when the user scrolls to the end of the list. We have also set the onEndReachedThreshold prop to the number of items that should be displayed before the onEndReached function is executed.

Performance Optimizations for FlatList

In React Native, performance optimizations for lists is a feature that allows users to optimize the performance of a list. It is implemented using the initialNumToRender and windowSize props of the FlatList component.

To optimize the performance of a list, we need to set the initialNumToRender prop of the FlatList component to the number of items that should be rendered initially. We also need to set the windowSize prop of the FlatList component to the number of items that should be rendered at a time.

Below is an example of performance optimizations for a list using the FlatList component.

import React, { useState } from 'react';
import { FlatList, View, Text } from 'react-native';

const dataArray = [
  {
    id: '1',
    title: 'Item 1',
  },
  {
    id: '2',
    title: 'Item 2',
  },
  {
    id: '3',
    title: 'Item 3',
  },
];
const ListWithOptimizations = () => {
  return (
    <FlatList
      data={dataArray}
      keyExtractor={item => item.id}
      renderItem={({ item }) => (
        <View>
          <Text>{item.title}</Text>
        </View>
      )}
      initialNumToRender={2}
      windowSize={2}
    />
  );
};
export default ListWithOptimizations;

In the above example, we have imported the FlatList component from React Native. We have then declared a data array containing id and title of items. We have then used the FlatList component to render the data array. We have also used the initialNumToRender and windowSize props to optimize the performance of the list. We have set the initialNumToRender prop to the number of items that should be rendered initially and the windowSize prop to the number of items that should be rendered at a time.

Optimizing Images & Videos in FlatLists

In React Native, optimizing images and videos in lists is a feature that allows users to optimize the loading of images and videos in a list. It is implemented using the onViewableItemsChanged prop of the FlatList component.

To optimize the loading of images and videos in a list, we need to set the onViewableItemsChanged prop of the FlatList component to a function that will be executed when the viewable items in the list change.

Below is an example of optimizing images and videos in a list using the FlatList component.

import React, { useState } from 'react';
import { FlatList, View, Text, Image } from 'react-native';

const dataArray = [
  {
    id: '1',
    title: 'Item 1',
    image: 'https://example.com/image1.jpg',
  },
  {
    id: '2',
    title: 'Item 2',
    image: 'https://example.com/image2.jpg',
  },
  {
    id: '3',
    title: 'Item 3',
    image: 'https://example.com/image3.jpg',
  },
];
const ListWithOptimizations = () => {
  const [viewableItems, setViewableItems] = useState([]);
  const handleViewableItemsChanged = ({ viewableItems }) => {
    setViewableItems(viewableItems);
  };
  return (
    <FlatList
      data={dataArray}
      keyExtractor={item => item.id}
      renderItem={({ item }) => (
        <View>
          <Text>{item.title}</Text>
          {viewableItems.includes(item.id) && (
            <Image source={{ uri: item.image }} />
          )}
        </View>
      )}
      onViewableItemsChanged={handleViewableItemsChanged}
    />
  );
};
export default ListWithOptimizations;

In the above example, we have imported the FlatList and Image components from React Native. We have then declared a data array containing id, title, and image.