https://github.com/Shopify/flash-list
A better list for React Native
https://github.com/Shopify/flash-list
Last synced: about 2 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 (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-29T08:41:54.000Z (about 1 year ago)
- Last Synced: 2024-05-01T22:56:33.517Z (about 1 year 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
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.
## React Native's new architecture support
FlashList is compatible with React Native's new architecture however, it's not fully optimized for it yet. You will still gain performance benefits from using FlashList over FlatList. Stayed tuned for more improvements.
## 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.