{"id":15019756,"url":"https://github.com/web-ridge/react-native-ridge-list","last_synced_at":"2025-10-24T16:31:31.535Z","repository":{"id":57339638,"uuid":"381996128","full_name":"web-ridge/react-native-ridge-list","owner":"web-ridge","description":"FlatList abstraction which uses react-window on the web to create better list performance","archived":false,"fork":false,"pushed_at":"2022-05-18T19:21:50.000Z","size":481,"stargazers_count":9,"open_issues_count":3,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-31T03:13:33.792Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/web-ridge.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-07-01T10:31:07.000Z","updated_at":"2022-12-16T10:36:19.000Z","dependencies_parsed_at":"2022-09-12T03:20:34.490Z","dependency_job_id":null,"html_url":"https://github.com/web-ridge/react-native-ridge-list","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-ridge%2Freact-native-ridge-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-ridge%2Freact-native-ridge-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-ridge%2Freact-native-ridge-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-ridge%2Freact-native-ridge-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/web-ridge","download_url":"https://codeload.github.com/web-ridge/react-native-ridge-list/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237999764,"owners_count":19399938,"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-09-24T19:54:02.091Z","updated_at":"2025-10-24T16:31:30.728Z","avatar_url":"https://github.com/web-ridge.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# react-native-ridge-list\nFlatList abstraction which uses [bvaughn/react-window](https://github.com/bvaughn/react-window) on the web to create better list performance\n\n## Supported props\n- ListHeaderComponent (you have to provide height in the ListHeaderComponentStyle, it understands height + marginTop, marginBottom etc.\n- ListHeaderComponentStyle\n- numColumns \n- maxToRenderPerBatch\n- data\n- renderItem\n- getItemLayout\n- onEndReached\n- inverted\n- testID\n\n\n## Caveats\n- you are required to provide the getItemLayout\n- inverted FlatList always reverse scroll on Mac devices but don't understand other scroll behaviours in browsers other than Safari, because we can only detect this in Safari.\n    - https://bugs.chromium.org/p/chromium/issues/detail?id=156551\n    - https://github.com/w3c/uievents/issues/57\n## Installation\n```sh\nyarn add react-native-ridge-list\n```\nor\n```sh\nnpm install react-native-ridge-list\n```\n\n\n## Usage\n\n```js\nimport RidgeList from \"react-native-ridge-list\";\n\nconst ITEM_HEIGHT = 65\n\nfunction getDefaultItemLayout(\n  data,\n  index,\n) {\n  return {\n    length: ITEM_HEIGHT,\n    offset: ITEM_HEIGHT * index,\n    index,\n  };\n}\n\n// ...\n\n\u003cRidgeList\n        data={DATA}\n        renderItem={renderItem}\n        keyExtractor={item =\u003e item.id}\n        getItemLayout={getDefaultItemLayout}\n      /\u003e\n```\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb-ridge%2Freact-native-ridge-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweb-ridge%2Freact-native-ridge-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb-ridge%2Freact-native-ridge-list/lists"}