@shopify/flash-list

What is @shopify/flash-list?

@shopify/flash-list is a high-performance list component for React Native, designed to handle large datasets efficiently. It provides smooth scrolling and optimized rendering, making it suitable for applications that require handling extensive lists of data.

What are @shopify/flash-list's main functionalities?

Basic Usage

This code demonstrates the basic usage of the FlashList component to render a simple list of items.

import { FlashList } from '@shopify/flash-list';
import React from 'react';
import { View, Text } from 'react-native';

const data = [
  { key: '1', name: 'Item 1' },
  { key: '2', name: 'Item 2' },
  { key: '3', name: 'Item 3' }
];

const App = () => (
  <FlashList
    data={data}
    renderItem={({ item }) => (
      <View>
        <Text>{item.name}</Text>
      </View>
    )}
    keyExtractor={item => item.key}
  />
);

export default App;

Custom Item Layout

This code demonstrates how to customize the layout of each item in the FlashList component using styles.

import { FlashList } from '@shopify/flash-list';
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const data = [
  { key: '1', name: 'Item 1' },
  { key: '2', name: 'Item 2' },
  { key: '3', name: 'Item 3' }
];

const App = () => (
  <FlashList
    data={data}
    renderItem={({ item }) => (
      <View style={styles.itemContainer}>
        <Text style={styles.itemText}>{item.name}</Text>
      </View>
    )}
    keyExtractor={item => item.key}
  />
);

const styles = StyleSheet.create({
  itemContainer: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc'
  },
  itemText: {
    fontSize: 18
  }
});

export default App;

Handling Large Datasets

This code demonstrates how to use the FlashList component to handle and render a large dataset efficiently.

import { FlashList } from '@shopify/flash-list';
import React from 'react';
import { View, Text } from 'react-native';

const data = Array.from({ length: 1000 }, (_, index) => ({ key: String(index), name: `Item ${index}` }));

const App = () => (
  <FlashList
    data={data}
    renderItem={({ item }) => (
      <View>
        <Text>{item.name}</Text>
      </View>
    )}
    keyExtractor={item => item.key}
  />
);

export default App;

Other packages similar to @shopify/flash-list

react-native-recyclerview-list

react-native-recyclerview-list is a high-performance list component for React Native that leverages the RecyclerView from Android. It is designed to handle large datasets efficiently, similar to @shopify/flash-list. However, it is more Android-centric and may not provide the same level of performance on iOS.

react-native-virtualized-view

react-native-virtualized-view is another package designed to handle large lists efficiently in React Native. It provides a virtualized list view that only renders items that are currently visible on the screen, similar to @shopify/flash-list. However, it may require more configuration and customization to achieve optimal performance.

react-native-largelist

react-native-largelist is a high-performance list component for React Native that is optimized for handling large datasets. It provides smooth scrolling and efficient rendering, similar to @shopify/flash-list. However, it may have a steeper learning curve and require more effort to integrate into an existing project.

README

Website • Discord • Getting started • Usage • Performance • Writing performant components • Known Issues

Fast & performant React Native list. No more blank cells.

Swap from FlatList in seconds. Get instant performance.

Installation

Add the package to your project via yarn add @shopify/flash-list and run pod install in the ios directory.

Usage

We recommend reading the detailed documentation for using FlashList here.

But if you are familiar with FlatList, you already know how to use FlashList. You can try out FlashList by changing the component name and adding the estimatedItemSize prop or refer to the example below:

import React from "react";
import { View, Text } from "react-native";
import { FlashList } from "@shopify/flash-list";

const DATA = [
  {
    title: "First Item",
  },
  {
    title: "Second Item",
  },
];

const MyList = () => {
  return (
    <FlashList
      data={DATA}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      estimatedItemSize={200}
    />
  );
};

To avoid common pitfalls, you can also follow these steps for migrating from FlatList, based on our own experiences:

1. Switch from FlatList to FlashList and render the list once. You should see a warning about missing estimatedItemSize and a suggestion. Set this value as the prop directly.
2. Important: Scan your renderItem hierarchy for explicit key prop definitions and remove them. If you’re doing a .map() use indices as keys.
3. Check your renderItem hierarchy for components that make use of useState and verify whether that state would need to be reset if a different item is passed to that component (see Recycling)
4. If your list has heterogenous views, pass their types to FlashList using getItemType prop to improve performance.
5. Do not test performance with JS dev mode on. Make sure you’re in release mode. FlashList can appear slower while in dev mode due to a small render buffer.

App / Playground

The fixture is an example app showing how to use the library.

Changelog

[1.7.1] - 2024-08-07

• Add recomputeViewableItems method
  • https://github.com/Shopify/flash-list/pull/1296
• Fix first sticky header is not rendering when data changed
  • https://github.com/Shopify/flash-list/issues/814