# 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.

 ![react native flatlist](https:&#x2F;&#x2F;devbrite.io&#x2F;media&#x2F;cover5.jpg)

## 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 &#96;FlatList&#96; from &#96;react-native&#96; package.

&#96;&#96;&#96;javascript
import { FlatList } from &quot;react-native&quot;;
&#96;&#96;&#96;

## 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](https:&#x2F;&#x2F;medium.com&#x2F;@devbrite&#x2F;everything-you-need-to-know-about-flatlist-in-react-native-b875c5256230) in React Native:

&#96;&#96;&#96;javascript
import { FlatList } from &quot;react-native&quot;;

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

const App = () =&gt; {
  return (
    &lt;FlatList
      data={data}
      renderItem={({ item }) =&gt; &lt;Text&gt;{item.title}&lt;&#x2F;Text&gt;}
      keyExtractor={item =&gt; item.id}
    &#x2F;&gt;
  );
};
&#96;&#96;&#96;

## Horizontal FlatList in React Native

You can create a horizontal FlatList by setting the &#96;horizontal&#96; prop to &#96;true&#96;.

&#96;&#96;&#96;javascript
import { FlatList } from &quot;react-native&quot;;

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

const App = () =&gt; {
  return (
    &lt;FlatList
      data={data}
      horizontal={true}
      renderItem={({ item }) =&gt; &lt;Text&gt;{item.title}&lt;&#x2F;Text&gt;}
      keyExtractor={item =&gt; item.id}
    &#x2F;&gt;
  );
};
&#96;&#96;&#96;

## FlatList with Section Headers in React Native

You can add section headers to your [FlatList](https:&#x2F;&#x2F;reactnative.dev&#x2F;docs&#x2F;flatlist) by setting the &#96;ListHeaderComponent&#96; prop.

&#96;&#96;&#96;javascript
import { FlatList } from &quot;react-native&quot;;

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

const App = () =&gt; {
  return (
    &lt;FlatList
      data={data}
      ListHeaderComponent={() =&gt; &lt;Text&gt;Section Header&lt;&#x2F;Text&gt;}
      renderItem={({ item }) =&gt; &lt;Text&gt;{item.title}&lt;&#x2F;Text&gt;}
      keyExtractor={item =&gt; item.id}
    &#x2F;&gt;
  );
};
&#96;&#96;&#96;

## FlatList with Sticky Headers in React Native

You can make your section headers sticky by setting the &#96;stickySectionHeadersEnabled&#96; prop to &#96;true&#96;.

&#96;&#96;&#96;javascript
import { FlatList } from &quot;react-native&quot;;

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

const App = () =&gt; {
  return (
    &lt;FlatList
      data={data}
      ListHeaderComponent={() =&gt; &lt;Text&gt;Section Header&lt;&#x2F;Text&gt;}
      stickySectionHeadersEnabled={true}
      renderItem={({ item }) =&gt; &lt;Text&gt;{item.title}&lt;&#x2F;Text&gt;}
      keyExtractor={item =&gt; item.id}
    &#x2F;&gt;
  );
};
&#96;&#96;&#96;

## FlatList with Pull to Refresh in React Native

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

&#96;&#96;&#96;javascript
import { FlatList } from &quot;react-native&quot;;

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

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

  const onRefresh = () =&gt; {
    setRefreshing(true);

    &#x2F;&#x2F; Refresh data here

    setRefreshing(false);
  };

  return (
    &lt;FlatList
      data={data}
      refreshing={refreshing}
      onRefresh={onRefresh}
      renderItem={({ item }) =&gt; &lt;Text&gt;{item.title}&lt;&#x2F;Text&gt;}
      keyExtractor={item =&gt; item.id}
    &#x2F;&gt;
  );
};
&#96;&#96;&#96;

## FlatList with Infinite Scroll in React Native

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

&#96;&#96;&#96;javascript
import { FlatList } from &quot;react-native&quot;;

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

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

  const onEndReached = () =&gt; {
    &#x2F;&#x2F; Load more data here
    setPage(page + 1);
  };

  return (
    &lt;FlatList
      data={data}
      onEndReached={onEndReached}
      onEndReachedThreshold={0.5}
      renderItem={({ item }) =&gt; &lt;Text&gt;{item.title}&lt;&#x2F;Text&gt;}
      keyExtractor={item =&gt; item.id}
    &#x2F;&gt;
  );
};
&#96;&#96;&#96;

## FlatList with Custom Header &amp; Footer in React Native

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

&#96;&#96;&#96;javascript
import { FlatList } from &quot;react-native&quot;;

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

const App = () =&gt; {
  return (
    &lt;FlatList
      data={data}
      ListHeaderComponent={() =&gt; &lt;Text&gt;Header&lt;&#x2F;Text&gt;}
      ListFooterComponent={() =&gt; &lt;Text&gt;Footer&lt;&#x2F;Text&gt;}
      renderItem={({ item }) =&gt; &lt;Text&gt;{item.title}&lt;&#x2F;Text&gt;}
      keyExtractor={item =&gt; item.id}
    &#x2F;&gt;
  );
};
&#96;&#96;&#96;

## Empty State in FlatList in React Native

You can add an empty state to your FlatList by setting the &#96;ListEmptyComponent&#96; prop.

&#96;&#96;&#96;javascript
import { FlatList } from &quot;react-native&quot;;

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

const App = () =&gt; {
  return (
    &lt;FlatList
      data={data}
      ListEmptyComponent={() =&gt; &lt;Text&gt;No items found.&lt;&#x2F;Text&gt;}
      renderItem={({ item }) =&gt; &lt;Text&gt;{item.title}&lt;&#x2F;Text&gt;}
      keyExtractor={item =&gt; item.id}
    &#x2F;&gt;
  );
};
&#96;&#96;&#96;

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.

React Native Flatlist Cheatsheet

About

Legal

Products

Resources

Category: