npm install @shopify/flash-list

About @shopify/flash-list

The npm package @shopify/flash-list is a cutting-edge solution designed to replace the traditional FlatList component used in React Native applications. Developed by Shopify, FlashList offers enhanced performance, making it an invaluable tool for developers looking to optimize the rendering of large lists in mobile apps. Its primary benefit lies in its ability to significantly reduce the time it takes to render initial list items, which can drastically improve user experience by making apps feel faster and more responsive. Additionally, FlashList supports complex features like variable row heights and maintains smooth scrolling performance, even with heavy data loads.

To start using FlashList in your projects, you can easily integrate it by running the command npm install @shopify/flash-list in your project's terminal. This simple installation process adds FlashList to your React Native environment, allowing you to take advantage of its performance enhancements with minimal setup. Once installed, developers can replace FlatList with FlashList in their code, often with only minor adjustments required. This ease of integration combined with its significant performance gains makes FlashList an attractive choice for developers aiming to enhance the functionality and responsiveness of their mobile applications.

FlashList is not just about speed; it also comes with a host of additional features that set it apart from other list-rendering options. It includes out-of-the-box support for features like automatic measurement and optimized re-rendering logic, which help in handling dynamic content that changes over time. The package is also actively maintained by Shopify, ensuring it stays up-to-date with the latest developments and optimizations in React Native. This ongoing support and development reflect Shopify's commitment to providing a robust tool that meets the evolving needs of modern mobile app development.

Shopify npm packages

Find the best node modules for your project.

Search npm

@shopify/flash-list

FlashList is a more performant FlatList...

@shopify/polaris-icons

[![npm version](https://img.shields.io/npm/v/@shopify/polaris-icons.svg?style=flat)](https://www...

@shopify/polaris

Shopify’s admin product component...

@shopify/cli-kit

A set of utilities, interfaces, and models that are common across all the platform...

@shopify/cli

A CLI tool to build for the Shopify...

@shopify/draggable

The JavaScript Drag & Drop library your grandparents warned you about...

@shopify/app-bridge-core

**[Join our team and work on libraries like this one.](https://www.shopify...

@shopify/theme-check-common

@shopify/graphql-client

Shopify GraphQL Client - A lightweight generic GraphQL JS client to interact with Shopify GraphQL...

@shopify/storefront-api-client

Shopify Storefront API Client - A lightweight JS client to interact with Shopify's Storefront...

@shopify/restyle

A system for building constraint-based UI...

@shopify/theme-check-node

This is the Node.js wrapper of the runtime-agnostic [`@shopify/theme-check-common`](https://npm...

Dependencies

Core dependencies of this npm package and its dev dependencies.

recyclerlistview, tslib, @babel/core, @babel/runtime, @quilted/react-testing, @react-native-community/eslint-config, @shopify/eslint-plugin, @types/jest, @types/react, babel-jest, enhanced-resolve, eslint, gh-pages, jest, metro-react-native-babel-preset, prettier, react, react-native, react-test-renderer, typescript

Documentation

A README file for the @shopify/flash-list code repository. View Code

FlashList Image

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:

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.
Important: Scan your renderItem hierarchy for explicit key prop definitions and remove them. If you’re doing a .map() use indices as keys.
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)
If your list has heterogenous views, pass their types to FlashList using getItemType prop to improve performance.
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.