Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-29T08:41:54.000Z (8 months ago)
- Last Synced: 2024-05-01T22:56:33.517Z (7 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. ![](https://img.shields.io/github/stars/Shopify/flash-list.svg?style=social&label=Star) (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.