React Native FlatList Cheatsheet

React Native FlatList is a core component designed for efficient display of vertically scrolling lists of changing data. It is built to be efficient, flexible and extensible. This React Native FlatList Cheatsheet will help you to get started with FlatList and understand the usage.

What Is FlatList in React Native?

React Native FlatList is a simple ListView. It is designed to be efficient, powerful, and customizable. It supports vertical scrolling, horizontal scrolling, section headers, sticky section headers, pull to refresh, and much more.

To use FlatList in React Native, you need to import the FlatList from react-native package.

import { FlatList } from "react-native";

How to Use FlatList in React Native?

Using FlatList in React Native is simple and straightforward. Here is a basic example of how to use FlatList in React Native:

import { FlatList } from "react-native";

const data = [
  {
    id: 1,
    title: "Item 1"
  },
  {
    id: 2,
    title: "Item 2"
  },
  {
    id: 3,
    title: "Item 3"
  },
  {
    id: 4,
    title: "Item 4"
  }
];

const App = () => {
  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      keyExtractor={item => item.id}
    />
  );
};

Horizontal FlatList in React Native

You can create a horizontal FlatList by setting the horizontal prop to true.

import { FlatList } from "react-native";

const data = [
  {
    id: 1,
    title: "Item 1"
  },
  {
    id: 2,
    title: "Item 2"
  },
  {
    id: 3,
    title: "Item 3"
  },
  {
    id: 4,
    title: "Item 4"
  }
];

const App = () => {
  return (
    <FlatList
      data={data}
      horizontal={true}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      keyExtractor={item => item.id}
    />
  );
};

FlatList with Section Headers in React Native

You can add section headers to your FlatList by setting the ListHeaderComponent prop.

import { FlatList } from "react-native";

const data = [
  {
    id: 1,
    title: "Item 1"
  },
  {
    id: 2,
    title: "Item 2"
  },
  {
    id: 3,
    title: "Item 3"
  },
  {
    id: 4,
    title: "Item 4"
  }
];

const App = () => {
  return (
    <FlatList
      data={data}
      ListHeaderComponent={() => <Text>Section Header</Text>}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      keyExtractor={item => item.id}
    />
  );
};

FlatList with Sticky Headers in React Native

You can make your section headers sticky by setting the stickySectionHeadersEnabled prop to true.

import { FlatList } from "react-native";

const data = [
  {
    id: 1,
    title: "Item 1"
  },
  {
    id: 2,
    title: "Item 2"
  },
  {
    id: 3,
    title: "Item 3"
  },
  {
    id: 4,
    title: "Item 4"
  }
];

const App = () => {
  return (
    <FlatList
      data={data}
      ListHeaderComponent={() => <Text>Section Header</Text>}
      stickySectionHeadersEnabled={true}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      keyExtractor={item => item.id}
    />
  );
};

FlatList with Pull to Refresh in React Native

You can enable pull to refresh on your FlatList by setting the refreshing prop and providing a onRefresh callback.

import { FlatList } from "react-native";

const data = [
  {
    id: 1,
    title: "Item 1"
  },
  {
    id: 2,
    title: "Item 2"
  },
  {
    id: 3,
    title: "Item 3"
  },
  {
    id: 4,
    title: "Item 4"
  }
];

const App = () => {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = () => {
    setRefreshing(true);

    // Refresh data here

    setRefreshing(false);
  };

  return (
    <FlatList
      data={data}
      refreshing={refreshing}
      onRefresh={onRefresh}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      keyExtractor={item => item.id}
    />
  );
};

FlatList with Infinite Scroll in React Native

You can enable infinite scroll on your FlatList by setting the onEndReached prop and providing a onEndReachedThreshold prop.

import { FlatList } from "react-native";

const data = [
  {
    id: 1,
    title: "Item 1"
  },
  {
    id: 2,
    title: "Item 2"
  },
  {
    id: 3,
    title: "Item 3"
  },
  {
    id: 4,
    title: "Item 4"
  }
];

const App = () => {
  const [page, setPage] = useState(1);

  const onEndReached = () => {
    // Load more data here
    setPage(page + 1);
  };

  return (
    <FlatList
      data={data}
      onEndReached={onEndReached}
      onEndReachedThreshold={0.5}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      keyExtractor={item => item.id}
    />
  );
};

FlatList with Custom Header & Footer in React Native

You can add custom header and footer components to your FlatList by setting the ListHeaderComponent and ListFooterComponent props.

import { FlatList } from "react-native";

const data = [
  {
    id: 1,
    title: "Item 1"
  },
  {
    id: 2,
    title: "Item 2"
  },
  {
    id: 3,
    title: "Item 3"
  },
  {
    id: 4,
    title: "Item 4"
  }
];

const App = () => {
  return (
    <FlatList
      data={data}
      ListHeaderComponent={() => <Text>Header</Text>}
      ListFooterComponent={() => <Text>Footer</Text>}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      keyExtractor={item => item.id}
    />
  );
};

Empty State in FlatList in React Native

You can add an empty state to your FlatList by setting the ListEmptyComponent prop.

import { FlatList } from "react-native";

const data = [
  {
    id: 1,
    title: "Item 1"
  },
  {
    id: 2,
    title: "Item 2"
  },
  {
    id: 3,
    title: "Item 3"
  },
  {
    id: 4,
    title: "Item 4"
  }
];

const App = () => {
  return (
    <FlatList
      data={data}
      ListEmptyComponent={() => <Text>No items found.</Text>}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      keyExtractor={item => item.id}
    />
  );
};

As you can see, React Native FlatList is a powerful and flexible component that can be used for many different use cases. With this React Native FlatList Cheatsheet, you should now be able to get started with FlatList and understand the different props and features available.