{"id":13412342,"url":"https://github.com/Shopify/flash-list","last_synced_at":"2025-03-14T18:31:24.118Z","repository":{"id":41326685,"uuid":"440224087","full_name":"Shopify/flash-list","owner":"Shopify","description":"A better list for React Native","archived":false,"fork":false,"pushed_at":"2024-04-29T08:41:54.000Z","size":177437,"stargazers_count":4930,"open_issues_count":175,"forks_count":233,"subscribers_count":242,"default_branch":"main","last_synced_at":"2024-05-01T22:56:33.517Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://shopify.github.io/flash-list/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Shopify.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-20T15:48:14.000Z","updated_at":"2024-05-06T09:36:15.193Z","dependencies_parsed_at":"2024-01-14T14:50:06.830Z","dependency_job_id":"2e70e7c5-7f54-476f-9395-837d2012455b","html_url":"https://github.com/Shopify/flash-list","commit_stats":{"total_commits":578,"total_committers":31,"mean_commits":18.64516129032258,"dds":0.7698961937716263,"last_synced_commit":"e5113fa472a7092a51c4fa9fb2f8e421ae5ea826"},"previous_names":[],"tags_count":48,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shopify%2Fflash-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shopify%2Fflash-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shopify%2Fflash-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shopify%2Fflash-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Shopify","download_url":"https://codeload.github.com/Shopify/flash-list/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243625122,"owners_count":20321236,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T20:01:23.615Z","updated_at":"2025-03-14T18:31:24.112Z","avatar_url":"https://github.com/Shopify.png","language":"TypeScript","readme":"![FlashList Image](./FlashList.png)\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://shopify.github.io/flash-list/\"\u003eWebsite\u003c/a\u003e •\n  \u003ca href=\"https://discord.gg/k2gzABTfav\"\u003eDiscord\u003c/a\u003e •\n  \u003ca href=\"https://shopify.github.io/flash-list/docs/\"\u003eGetting started\u003c/a\u003e •\n  \u003ca href=\"https://shopify.github.io/flash-list/docs/usage\"\u003eUsage\u003c/a\u003e •\n  \u003ca href=\"https://shopify.github.io/flash-list/docs/performance-troubleshooting\"\u003ePerformance\u003c/a\u003e •\n  \u003ca href=\"https://shopify.github.io/flash-list/docs/fundamentals/performant-components\"\u003eWriting performant components\u003c/a\u003e •\n  \u003ca href=\"https://shopify.github.io/flash-list/docs/known-issues\"\u003eKnown Issues\u003c/a\u003e\n\u003cbr\u003e\u003cbr\u003e\n\n**Fast \u0026 performant React Native list. No more blank cells.**\n\nSwap from FlatList in seconds. Get instant performance.\n\n\u003c/div\u003e\n\n## React Native's new architecture support\n\nFlashList 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.\n\n## Installation\n\nAdd the package to your project via `yarn add @shopify/flash-list` and run `pod install` in the `ios` directory.\n\n## Usage\n\nWe recommend reading the detailed documentation for using `FlashList` [here](https://shopify.github.io/flash-list/docs/usage).\n\nBut 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:\n\n```jsx\nimport React from \"react\";\nimport { View, Text } from \"react-native\";\nimport { FlashList } from \"@shopify/flash-list\";\n\nconst DATA = [\n  {\n    title: \"First Item\",\n  },\n  {\n    title: \"Second Item\",\n  },\n];\n\nconst MyList = () =\u003e {\n  return (\n    \u003cFlashList\n      data={DATA}\n      renderItem={({ item }) =\u003e \u003cText\u003e{item.title}\u003c/Text\u003e}\n      estimatedItemSize={200}\n    /\u003e\n  );\n};\n```\n\nTo avoid common pitfalls, you can also follow these steps for migrating from `FlatList`, based on our own experiences:\n\n1. 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.\n2. **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.\n3. 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))\n4. 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.\n5. 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.\n\n## App / Playground\n\nThe [fixture](https://github.com/Shopify/flash-list/tree/main/fixture) is an example app showing how to use the library.\n","funding_links":[],"categories":["TypeScript","Components","UI Components"],"sub_categories":["List","Lists \u0026 Tables"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FShopify%2Fflash-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FShopify%2Fflash-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FShopify%2Fflash-list/lists"}