{"id":13577895,"url":"https://github.com/marcocesarato/react-native-big-list","last_synced_at":"2025-05-15T13:08:04.798Z","repository":{"id":36983236,"uuid":"374202286","full_name":"marcocesarato/react-native-big-list","owner":"marcocesarato","description":"This is a high performance list view for React Native with support for complex layouts using a similar FlatList usage to make easy the replacement. This list implementation for big list rendering on React Native works with a recycler focused on performance and memory usage and so it permits processing thousands items on the list.","archived":false,"fork":false,"pushed_at":"2025-03-13T15:00:21.000Z","size":13087,"stargazers_count":536,"open_issues_count":49,"forks_count":44,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-10T20:01:48.111Z","etag":null,"topics":["android","big","data","expo","fast","flatlist","ios","javascript","js","large","list","massive","memory","performance","react","react-native","react-native-big-list","sticky-headers","web"],"latest_commit_sha":null,"homepage":"https://marcocesarato.github.io/react-native-big-list-docs/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marcocesarato.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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-06-05T20:03:07.000Z","updated_at":"2025-05-01T23:37:05.000Z","dependencies_parsed_at":"2024-01-16T20:29:14.832Z","dependency_job_id":"330c231b-0da6-4669-96ea-2d20e8b86a62","html_url":"https://github.com/marcocesarato/react-native-big-list","commit_stats":null,"previous_names":[],"tags_count":47,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcocesarato%2Freact-native-big-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcocesarato%2Freact-native-big-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcocesarato%2Freact-native-big-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcocesarato%2Freact-native-big-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcocesarato","download_url":"https://codeload.github.com/marcocesarato/react-native-big-list/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254346624,"owners_count":22055808,"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":["android","big","data","expo","fast","flatlist","ios","javascript","js","large","list","massive","memory","performance","react","react-native","react-native-big-list","sticky-headers","web"],"created_at":"2024-08-01T15:01:25.236Z","updated_at":"2025-05-15T13:07:59.789Z","avatar_url":"https://github.com/marcocesarato.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg alt=\"React Native Big List\" src=\"https://github.com/marcocesarato/react-native-big-list/raw/master/assets/header.png\" /\u003e\n\n### If this project has helped you out, please support us with a star 🌟\n\n\u003cbr\u003e\n\n[![NPM version](http://img.shields.io/npm/v/react-native-big-list.svg?style=for-the-badge)](http://npmjs.org/package/react-native-big-list)\n[![js-prittier-style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://prettier.io/)\n[![Compatibility](https://img.shields.io/badge/platform-android%20%7C%20ios%20%7C%20Web%20%7C%20expo-blue.svg?style=for-the-badge)](http://npmjs.org/package/react-native-big-list)\n\n\u003c!--[![Package Quality](https://npm.packagequality.com/shield/react-native-big-list.svg?style=for-the-badge)](https://packagequality.com/#?package=react-native-big-list)--\u003e\n\n[Documentation](https://marcocesarato.github.io/react-native-big-list-docs/)\n\n\u003c/div\u003e\n\n## 📘 Description\n\n#### What is this?\n\nThis is a high performance list view for React Native with support for complex layouts using a similar FlatList usage to make easy the replacement.\nThis list implementation for big list rendering on React Native works with a recycler focused on performance and memory usage and so it permits processing thousands items on the list.\n\nYou can also try it on the published web app: [Demo](https://marcocesarato.github.io/react-native-big-list/)\n\n#### Why another list library?\n\nReact Native's FlatList is great but when it comes to big lists it has some flaws because of its item caching.\nExists some alternatives like `react-native-largelist` and `recyclerlistview` but both have some issues.\n\nThe `react-native-largelist` isn't compatible with web and Expo, has native code that sometimes need to be readjusted and maintained, have a weird list item recycles (because it never has blank items), need data restructure and have some issues when trying to process a lot of data (eg: 100,000 items) because it would freeze the CPU.\n\nThe `recyclerlistview` is performant but suffers from an empty frame on mount, weird scroll positions when trying to scroll to an element on mount, and the implementation of sticky headers conflicts with `Animated`.\n\n#### How it works?\n\nRecycler makes it easy to efficiently display large sets of data. You supply the data and define how each item looks, and the recycler library dynamically creates the elements when they're needed.\nAs the name implies, the recycler recycles those individual elements. When an item scrolls off the screen, the recycler doesn't destroy its view. Instead, the recycler reuses the view for new items that have scrolled onscreen. This reuse vastly improves performance, improving your app's responsiveness and reducing power consumption.\n\nWhen list can't render your items fast enough the non-rendered components will appear as blank space.\n\nThis library is fully JS native, so it's compatible with all available platforms: _Android, iOS, Windows, MacOS, Web and Expo_.\n\n## 📖 Install\n\nInstall the library from npm or yarn just running one of the following command lines:\n\n| npm                                        | yarn                             |\n| ------------------------------------------ | -------------------------------- |\n| `npm install react-native-big-list --save` | `yarn add react-native-big-list` |\n\n## 💻 Usage\n\n\u003e Read also [How to migrate from FlatList](https://marcocesarato.github.io/react-native-big-list-docs/extras/migrate-flatlist/)\n\nBasic example:\n\n```javascript\nimport BigList from \"react-native-big-list\";\n// ...\nconst MyExample = ({ data }) =\u003e {\n  const renderItem = ({ item, index }) =\u003e \u003cMyListItem item={item} /\u003e;\n  return \u003cBigList data={data} renderItem={renderItem} itemHeight={50} /\u003e;\n};\n```\n\nFor more examples check the `example` directory the `list` directory or check the [Documentation](https://marcocesarato.github.io/react-native-big-list-docs/basics/standard-list)\n\n## 🎨 Screenshots\n\n| BigList vs FlatList                                                                                                            | Section List                                                                                                                            |\n| ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |\n| \u003cimg src=\"https://github.com/marcocesarato/react-native-big-list/raw/master/assets/screenshots/performance.gif\" width=\"500\" /\u003e | \u003cimg src=\"https://github.com/marcocesarato/react-native-big-list/raw/master/assets/screenshots/example-section-list.jpg\" width=\"500\" /\u003e |\n\n## ⚡️ Example\n\n### Snippets\n\n- [Standard List](https://marcocesarato.github.io/react-native-big-list-docs/basics/standard-list)\n- [Columns List](https://marcocesarato.github.io/react-native-big-list-docs/basics/columns-list)\n- [Sections List](https://marcocesarato.github.io/react-native-big-list-docs/basics/sections-list)\n\n### Expo\n\nClone or download repo and after:\n\n```shell\ncd Example\nyarn install # or npm install\nexpo start\n```\n\nOpen Expo Client on your device. Use it to scan the QR code printed by `expo start`. You may have to wait a minute while your project bundles and loads for the first time.\n\nYou can also try it on the published web app: [Demo](https://marcocesarato.github.io/react-native-big-list/)\n\n## 💡 Props and Methods\n\nThe list has the same props of the [ScrollView](https://reactnative.dev/docs/scrollview#props) in addition to its specific [Props](https://marcocesarato.github.io/react-native-big-list-docs/props) and [Methods](https://marcocesarato.github.io/react-native-big-list-docs/methods).\n\n## 🤔 How to contribute\n\nHave an idea? Found a bug? Please raise to [ISSUES](https://github.com/marcocesarato/react-native-big-list/issues) or [PULL REQUEST](https://github.com/marcocesarato/react-native-big-list/pulls).\nContributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.\n\n\u003cp align=\"center\"\u003e\n    \u003cbr\u003e\n    \u003ca href=\"https://nodei.co/npm/react-native-big-list/\" rel=\"nofollow\"\u003e\n        \u003cimg align=\"center\" src=\"https://nodei.co/npm/react-native-big-list.png?downloads=true\u0026downloadRank=true\" width=\"384\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcocesarato%2Freact-native-big-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcocesarato%2Freact-native-big-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcocesarato%2Freact-native-big-list/lists"}