{"id":4177,"url":"https://github.com/rishabhbhatia/react-native-swipeview","last_synced_at":"2025-08-04T00:32:23.641Z","repository":{"id":57147281,"uuid":"102388314","full_name":"rishabhbhatia/react-native-swipeview","owner":"rishabhbhatia","description":"The best SwipeView component for React Native.","archived":false,"fork":false,"pushed_at":"2017-10-01T12:53:19.000Z","size":11,"stargazers_count":89,"open_issues_count":1,"forks_count":11,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-07-20T04:41:56.006Z","etag":null,"topics":["android","component","ios","react-native","swipe-to-delete","swipeview"],"latest_commit_sha":null,"homepage":null,"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/rishabhbhatia.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}},"created_at":"2017-09-04T18:00:43.000Z","updated_at":"2025-06-13T15:48:06.000Z","dependencies_parsed_at":"2022-09-05T16:50:13.145Z","dependency_job_id":null,"html_url":"https://github.com/rishabhbhatia/react-native-swipeview","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/rishabhbhatia/react-native-swipeview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rishabhbhatia%2Freact-native-swipeview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rishabhbhatia%2Freact-native-swipeview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rishabhbhatia%2Freact-native-swipeview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rishabhbhatia%2Freact-native-swipeview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rishabhbhatia","download_url":"https://codeload.github.com/rishabhbhatia/react-native-swipeview/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rishabhbhatia%2Freact-native-swipeview/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268634063,"owners_count":24281895,"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","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","component","ios","react-native","swipe-to-delete","swipeview"],"created_at":"2024-01-05T20:17:03.531Z","updated_at":"2025-08-04T00:32:23.109Z","avatar_url":"https://github.com/rishabhbhatia.png","language":"JavaScript","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"react-native-swipeview\" src=\"http://res.cloudinary.com/rishabhbhatia/image/upload/c_scale,w_200/v1504552231/swipeview/react-native-swipeview.png\"\u003e\n\u003c/p\u003e\n\n# React Native SwipeView\n\n### Todo-list app built with SwipeView [(Watch it on YouTube)](https://youtu.be/Dql1nQ73CY4)\n\n![alt text](http://res.cloudinary.com/rishabhbhatia/image/upload/c_scale,w_200/v1506861923/swipeview/todo-app-v1.0.gif)\n\n\n## Getting Started\n\n- [Installation](#installation)\n- [Basic Usage](#basic-usage)\n- [Properties](#properties)\n- [Todo-list Project](https://github.com/rishabhbhatia/react-native-todo)\n\n### Installation\n```bash\n$ npm i react-native-swipeview --save\n```\n\n### Basic Usage\n```jsx\nimport React, {Component} from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\n\nimport SwipeView from 'react-native-swipeview';\n\nexport default class App extends Component {\n\n  render() {\n\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cSwipeView\n          renderVisibleContent={() =\u003e \u003cText style={styles.text}\u003eSwipeMe\u003c/Text\u003e}\n        /\u003e\n      \u003c/View\u003e\n    );\n  };\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  text: {\n    backgroundColor: 'whitesmoke',\n    padding: 20,\n  }\n});\n\n```\n![alt text](http://res.cloudinary.com/rishabhbhatia/image/upload/c_scale,w_200/v1504599144/swipeview/swipeview-basic-v1.0.1.gif)\n\n### Properties\n\n#### Basic\n\n| Prop  | Type | Description | Default|\n| :------------ |:---------------:| :---------------:| :-----|\n| leftOpenValue | `number` | TranslateX: How much view opens from the left when swiping left-to-right (positive number). | 0 |\n| rightOpenValue | `number` | TranslateX: How much view opens from the right when swiping right-to-left (negative number). | 0 |\n| swipeDuration | `number` | Duration of the slide out swipe animation. | 250 |\n| swipeToOpenPercent | `number` | What % of the left/right openValue does the user need to swipe past to trigger onSwipedLeft/onSwipedRight actions. | 35 |\n| disableSwipeToLeft | `bool` | Disable ability to swipe view to left. | false |\n| disableSwipeToRight | `bool` | Disable ability to swipe view to right. | false |\n| onSwipedLeft | `func` | Called when left swipe is completed. | - |\n| onSwipedRight | `func` | Called when right swipe is completed. | - |\n| previewSwipeDemo | `bool` | Should the view do a slide out preview to show that it is swipe-able. | false |\n| previewDuration | `number` | Duration of the slide out preview animation. | 300 |\n| previewOpenValue | `number` | TranslateX value for the slide out preview animation. | -60 |\n| previewOpenDelay | `number` | Delay before starting preview animation. | 350 |\n| previewCloseDelay | `number` | Delay before closing preview animation. | 300 |\n| swipingLeft | `bool` | Should swiping initialize with right-to-left. This should be useful for swipe previews ex: +ve previewOpenValue `swipingLeft: false` \u0026 -ve previewOpenValue `swipingLeft: true`. | true |\n| recalculateHiddenLayout | `bool` | Enable hidden row onLayout calculations to run always. | false |\n| directionalDistanceChangeThreshold | `number` | Change the sensitivity of the row. | 2 |\n\n#### Views\n| Prop  | Type | Description | Default|\n| :------------ |:---------------:| :---------------:| :-----|\n| renderVisibleContent | `func` | Main Content view. | - |\n| renderLeftView | `func` | Left view to render behind the right view. | - |\n| renderRightView | `func` | Right view to render behind the item view. | - |\n\n## Contribution\n\n- [@rishabhbhatia](mailto:rishabh.bhatia08@gmail.com) Author.\n\n## Credits\n\nInspiration: react-native-swipe-list-view [(Github)](https://github.com/jemise111/react-native-swipe-list-view)\n\n## Questions\n\nFeel free to [Contact me](mailto:rishabh.bhatia08@gmail.com) or [Create an issue](https://github.com/rishabhbhatia/react-native-swipeview/issues/new)\n\n## License\n\nReleased under the [Mit License](https://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frishabhbhatia%2Freact-native-swipeview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frishabhbhatia%2Freact-native-swipeview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frishabhbhatia%2Freact-native-swipeview/lists"}