https://github.com/Shopify/flash-list

A better list for React Native
https://github.com/Shopify/flash-list

Last synced: 3 months ago
JSON representation

A better list for React Native

• Host: GitHub
• URL: https://github.com/Shopify/flash-list
• Owner: Shopify
• License: mit
• Created: 2021-12-20T15:48:14.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-04-29T08:41:54.000Z (9 months ago)
• Last Synced: 2024-05-01T22:56:33.517Z (9 months ago)
• Language: TypeScript
• Homepage: https://shopify.github.io/flash-list/
• Size: 169 MB
• Stars: 4,930
• Watchers: 242
• Forks: 233
• Open Issues: 175
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-react-native - flash-list - A better list for React Native.  (Components / List)

README

        
![FlashList Image](./FlashList.png)



  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](https://shopify.github.io/flash-list/docs/usage).

But if you are familiar with [FlatList](https://reactnative.dev/docs/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:

```jsx

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 (

     {item.title}}

      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`](https://shopify.github.io/flash-list/docs/usage/#renderitem) hierarchy for explicit `key` prop definitions and remove them. If you’re doing a `.map()` use indices as keys.

3. Check your [`renderItem`](https://shopify.github.io/flash-list/docs/usage/#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](https://shopify.github.io/flash-list/docs/recycling))

4. If your list has heterogenous views, pass their types to `FlashList` using [`getItemType`](https://shopify.github.io/flash-list/docs/usage/#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](https://github.com/Shopify/flash-list/tree/main/fixture) is an example app showing how to use the library.