{"id":13833708,"url":"https://github.com/jemise111/react-native-swipe-list-view","last_synced_at":"2025-05-13T23:08:26.487Z","repository":{"id":37756319,"uuid":"56270304","full_name":"jemise111/react-native-swipe-list-view","owner":"jemise111","description":"A React Native ListView component with rows that swipe open and closed","archived":false,"fork":false,"pushed_at":"2023-09-19T08:24:51.000Z","size":1217,"stargazers_count":2803,"open_issues_count":64,"forks_count":522,"subscribers_count":36,"default_branch":"master","last_synced_at":"2025-05-05T20:38:30.264Z","etag":null,"topics":["android","ios","javascript","react","react-native","react-native-component","swipelistview"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-swipe-list-view","language":"JavaScript","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/jemise111.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2016-04-14T21:11:28.000Z","updated_at":"2025-04-25T18:23:53.000Z","dependencies_parsed_at":"2024-02-21T22:02:25.190Z","dependency_job_id":null,"html_url":"https://github.com/jemise111/react-native-swipe-list-view","commit_stats":{"total_commits":382,"total_committers":69,"mean_commits":5.536231884057971,"dds":0.4109947643979057,"last_synced_commit":"3c3fa95b0509af71dcf253834e367916ad688d13"},"previous_names":[],"tags_count":82,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jemise111%2Freact-native-swipe-list-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jemise111%2Freact-native-swipe-list-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jemise111%2Freact-native-swipe-list-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jemise111%2Freact-native-swipe-list-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jemise111","download_url":"https://codeload.github.com/jemise111/react-native-swipe-list-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254041647,"owners_count":22004749,"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","ios","javascript","react","react-native","react-native-component","swipelistview"],"created_at":"2024-08-04T13:00:22.852Z","updated_at":"2025-05-13T23:08:21.476Z","avatar_url":"https://github.com/jemise111.png","language":"JavaScript","funding_links":[],"categories":["组件","Uncategorized","JavaScript"],"sub_categories":["ListView\u0026ScrollView","Uncategorized"],"readme":"[![npm](https://img.shields.io/npm/v/react-native-swipe-list-view.svg)](https://www.npmjs.com/package/react-native-swipe-list-view) [![npm](https://img.shields.io/npm/dm/react-native-swipe-list-view.svg)](https://www.npmjs.com/package/react-native-swipe-list-view)\n\n# react-native-swipe-list-view\n****\n--------\n\n```\u003cSwipeListView\u003e``` is a vertical ListView with rows that swipe open and closed. Handles default native behavior such as closing rows when ListView is scrolled or when other rows are opened.\n\nAlso includes ```\u003cSwipeRow\u003e``` if you want to use a swipeable row outside of the ```\u003cSwipeListView\u003e```\n\n--------\n🔥🔥 BREAKING CHANGES 🔥🔥\n\nFor use with RN 0.60+ please use react-native-swipe-list-view@2.0.0+\n\nRN 0.60 and RNSLV 2.0.0 deprecate the use of ListView entirely, please see [`example.js`](https://github.com/jemise111/react-native-swipe-list-view/blob/master/SwipeListExample/example.js) for examples and see the [migrating-to-flatlist doc](https://github.com/jemise111/react-native-swipe-list-view/blob/master/docs/migrating-to-flatlist.md) for a migration guide if you aren't already using `FlatList`.\n\nThe `useFlatList` prop is no longer required, as `FlatList` is the default ListView used.\n\n\n--------\n\n## Example\n\n![](https://media.giphy.com/media/WrmrvmwMnvvmzN3ZpX/giphy.gif)\n\nTry it out! https://snack.expo.io/@jemise111/react-native-swipe-list-view\n\n([What's a Snack?](https://blog.expo.io/sketch-a-playground-for-react-native-16b2401f44a2))\n\n## Installation\n\n```bash\nnpm install --save react-native-swipe-list-view\n```\n\n## Running the example\n\nThe application under ./SwipeListExample will produce the above example. To run execute the following:\n\n* ```git clone https://github.com/jemise111/react-native-swipe-list-view.git```\n* ```cd react-native-swipe-list-view```\n* ```cd SwipeListExample```\n* ```yarn```\n* ```cd ios```\n* ```pod install```\n* ```cd ..```\n* ```react-native run-ios | react-native run-android```\n\n\u003e Android: If you get the [following error](https://github.com/facebook/react-native/issues/25629#issuecomment-511209583) `SwipeListExample/android/app/debug.keystore' not found for signing config 'debug'.`:\n\u003e ```bash\n\u003e cd android/app/ \u0026\u0026 keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000\n\u003e // answer the questions\n\u003e cd ../..\n\u003e ```\n\n## Usage\n\n```javascript\nimport { SwipeListView } from 'react-native-swipe-list-view';\n\n//... note: your data array objects MUST contain a key property \n//          or you must pass a keyExtractor to the SwipeListView to ensure proper functionality\n//          see: https://reactnative.dev/docs/flatlist#keyextractor\n\n  this.state.listViewData = Array(20)\n    .fill(\"\")\n    .map((_, i) =\u003e ({ key: `${i}`, text: `item #${i}` }));\n\n//...\nrender() {\n    return (\n        \u003cSwipeListView\n            data={this.state.listViewData}\n            renderItem={ (data, rowMap) =\u003e (\n                \u003cView style={styles.rowFront}\u003e\n                    \u003cText\u003eI am {data.item.text} in a SwipeListView\u003c/Text\u003e\n                \u003c/View\u003e\n            )}\n            renderHiddenItem={ (data, rowMap) =\u003e (\n                \u003cView style={styles.rowBack}\u003e\n                    \u003cText\u003eLeft\u003c/Text\u003e\n                    \u003cText\u003eRight\u003c/Text\u003e\n                \u003c/View\u003e\n            )}\n            leftOpenValue={75}\n            rightOpenValue={-75}\n        /\u003e\n    )\n}\n```\n\n*See ```example.js``` for full usage guide (including using ```\u003cSwipeRow\u003e``` by itself)*\n\n#### Note:\n\nIf your row is touchable (TouchableOpacity, TouchableHighlight, etc.)  with an ```onPress``` function make sure ```renderItem``` returns the Touchable as the topmost element.\n\nGOOD:\n```javascript\nrenderItem={ data =\u003e (\n    \u003cTouchableHighlight onPress={this.doSomething.bind(this)}\u003e\n        \u003cView\u003e\n            \u003cText\u003eI am {data.item} in a SwipeListView\u003c/Text\u003e\n        \u003c/View\u003e\n    \u003c/TouchableHighlight\u003e\n)}\n```\nBAD:\n```javascript\nrenderItem={ data =\u003e (\n    \u003cView\u003e\n        \u003cTouchableHighlight onPress={this.doSomething.bind(this)}\u003e\n            \u003cText\u003eI am {data.item} in a SwipeListView\u003c/Text\u003e\n        \u003c/TouchableHighlight\u003e\n    \u003c/View\u003e\n)}\n```\n\n## Component APIs\n\n[`\u003cSwipeListView /\u003e`](https://github.com/jemise111/react-native-swipe-list-view/blob/master/docs/SwipeListView.md)\n\n[`\u003cSwipeRow /\u003e`](https://github.com/jemise111/react-native-swipe-list-view/blob/master/docs/SwipeRow.md)\n\n## Flatlist / SectionList support\n\n`SwipeListView` now supports `FlatList` and `SectionList`! (as of v1.0.0)\n\nPlease see the [migrating-to-flatlist doc](https://github.com/jemise111/react-native-swipe-list-view/blob/master/docs/migrating-to-flatlist.md) for all details.\nAnd see [`example.js`](https://github.com/jemise111/react-native-swipe-list-view/blob/master/SwipeListExample/example.js) for a full usage example.\n\n## Also see `docs/` for help with\n * [Manually Closing Rows](https://github.com/jemise111/react-native-swipe-list-view/blob/master/docs/manually-closing-rows.md)\n * [Per Row Behavior](https://github.com/jemise111/react-native-swipe-list-view/blob/master/docs/per-row-behavior.md)\n * [Actions](https://github.com/jemise111/react-native-swipe-list-view/blob/master/docs/actions.md)\n\n## And the `examples/` folder for examples on\n * Swipe to Delete (also see \"Actions\" for an alternative way to achieve this)\n * Per Row Behavior\n * UI Based on Swipe Values\n * Actions\n\n## Core Support\n\nRN Core added a SwipeList component as of [v0.27.0](https://github.com/facebook/react-native/releases/tag/v0.27.0)\nIt is actively being worked on and has no documentation yet. So I will continue to maintain this component until a future date.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjemise111%2Freact-native-swipe-list-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjemise111%2Freact-native-swipe-list-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjemise111%2Freact-native-swipe-list-view/lists"}