@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 • Known Issues

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

Swap from FlatList in seconds. Get instant performance.

FlashList v2

FlashList v2 has been rebuilt from the ground up for RN's new architecture and delivers fast performance, higher precision, and better ease of use compared to v1. We've achieved all this while moving to a JS-only solution! One of the key advantages of FlashList v2 is that it doesn't require any estimates. It also introduces several new features compared to v1. To know more about what's new in v2 click here.

⚠️ IMPORTANT: FlashList v2.x has been designed to be new architecture only and will not run on old architecture. If you're running on old architecture or using FlashList v1.x, you can access the documentation specific to v1 here: FlashList v1 Documentation.

Why use FlashList?

🚀 Superior Performance

• No more blank cells: FlashList uses view recycling to ensure smooth scrolling without visible blank areas.
• Fast initial render: Optimized for quick first paint.
• Efficient memory usage: Recycles views instead of destroying them, reducing memory overhead.
• Supports view types: Great performance even if different types of components make up the list.
• Dynamic sizes: Super fast and doesn't need any estimates.

🎯 Developer Experience

• Drop-in replacement for FlatList: Simply change the component name - if you know FlatList, you already know FlashList.
• No size estimates required in v2: Unlike v1, FlashList v2 automatically handles item sizing.
• Type-safe: Full TypeScript support with comprehensive type definitions.

📱 Advanced Features

• Masonry layout support: Create Pinterest-style layouts with varying item heights and column spans.
• Maintain visible content position: Automatically handles content shifts when adding items (enabled by default in v2).
• Multiple recycling pools: Optimizes performance for lists with different item types using getItemType.
• Built for React Native's new architecture: FlashList v2 is designed specifically for the new architecture.

⚡ Real-world Benefits

• Reduced frame drops: Maintains 60 FPS even with complex item components.
• Lower CPU usage: Efficient recycling reduces computational overhead.
• Smoother scrolling: Predictable performance even with thousands of items.
• JS-only solution in v2: No native dependencies, making it easier to maintain while delivering fast performance.

Installation

Add the package to your project via yarn add @shopify/flash-list.

Usage

But if you are familiar with FlatList, you already know how to use FlashList. You can try out FlashList by changing the component name 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>}
    />
  );
};

To avoid common pitfalls, you can also follow these steps for migrating from FlatList.

App / Playground

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