{"id":4144,"url":"https://github.com/sunnylqm/react-native-swiper2","last_synced_at":"2025-08-04T00:32:21.299Z","repository":{"id":57340604,"uuid":"44215031","full_name":"sunnylqm/react-native-swiper2","owner":"sunnylqm","description":null,"archived":true,"fork":true,"pushed_at":"2016-09-29T07:16:47.000Z","size":4580,"stargazers_count":83,"open_issues_count":6,"forks_count":15,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-11-15T13:46:10.631Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"leecade/react-native-swiper","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sunnylqm.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":"2015-10-14T00:56:43.000Z","updated_at":"2024-05-18T01:46:10.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/sunnylqm/react-native-swiper2","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sunnylqm%2Freact-native-swiper2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sunnylqm%2Freact-native-swiper2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sunnylqm%2Freact-native-swiper2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sunnylqm%2Freact-native-swiper2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sunnylqm","download_url":"https://codeload.github.com/sunnylqm/react-native-swiper2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228576898,"owners_count":17939645,"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-01-05T20:17:02.453Z","updated_at":"2024-12-07T07:31:28.086Z","avatar_url":"https://github.com/sunnylqm.png","language":"JavaScript","funding_links":[],"categories":["Components","JavaScript"],"sub_categories":["UI"],"readme":"# react-native-swiper2\n\n[![npm version](http://img.shields.io/npm/v/react-native-swiper2.svg?style=flat-square)](https://npmjs.org/package/react-native-swiper2 \"View this project on npm\")\n\n![logo](http://i.imgur.com/P4cRUgD.png)\n\n## [react-native-swiper](https://github.com/leecade/react-native-swiper) is now active again, so swiper2 will stop maintaining.\n\n## Changelogs\n\n- **[v2.0.7]**\n  + correct onPageChange index. \u003chttps://github.com/sunnylqm/react-native-swiper2/pull/12\u003e\n\n- **[v2.0.6]**\n  + support RN 0.25+. ([@xirc](https://github.com/xirc)).\n\n- **[v2.0.5]**\n  + add scrollTo for android. ([@LeeChSien](https://github.com/LeeChSien)).\n\n- **[v2.0.4]**\n  + fix scrollTo warning.\n\n- **[v2.0.3]**\n  + support pagination on android.\n\n- **[v2.0.2]**\n  + add simple support for android.\n\n- **[v2.0.1]**\n  + fix the dimensions module error.\n  + fix the keys warning when render dots.\n\n- **[v1.3.0]**\n  + [8d6d75c](https://github.com/leecade/react-native-swiper/commit/8d6d75c00edf87b603c218aad0018932277814b5) inject `state` in ScrollResponders (@thanks [@smothers](https://github.com/smothers)).\n\n- [v1.2.2]\n  + [890c0ce](https://github.com/leecade/react-native-swiper/commit/890c0ce64e2192c2ca7830e6699f67b88171e74b) ensure `onMomentumScrollEnd` synchronous update `index`.\n\n- [v1.2.0]\n  + [838b24c](https://github.com/leecade/react-native-swiper/commit/838b24cbeaf49b9ca1dabb4eed8305e314503fb1) Re-design a loop model for avoid img flickering.\n  + [9cb91c5](https://github.com/leecade/react-native-swiper/commit/9cb91c58c84034b0b8b874dbfc2a44da982686a8) fixes [#7](https://github.com/leecade/react-native-swiper/issues/6) `onMomentumScrollEnd` lost `event` param. (thanks [@smothers](https://github.com/smothers))\n\n- [v1.1.1]\n  + [21f0b00](https://github.com/leecade/react-native-swiper/commit/21f0b00138b6936cd3dfac2eb107a14c99c7392b) fixes [#6](https://github.com/leecade/react-native-swiper/issues/6) a define-propType error. (thanks [@benjamingeorge](https://github.com/benjamingeorge))\n\n- [v1.1.0]\n  + [44ec630](https://github.com/leecade/react-native-swiper/commit/44ec630b62844dbeaccee73adaa0996e319ebffb) fixes [#4](https://github.com/leecade/react-native-swiper/issues/4) `onMoementumScrollEnd` gets overridden. (thanks [@subpublicanders](https://github.com/subpublicanders))\n  + [5de06a7](https://github.com/leecade/react-native-swiper/commit/5de06a7aa86318ad38720728022b80e5cf98a2ab) New prop: `renderPagination`. (thanks [@aksonov](https://github.com/aksonov))\n\n- [v1.0.4]\n  + [21cb373](https://github.com/leecade/react-native-swiper/commit/21cb3732578588f9d47ee7ddda541577ad691970) fixes [#2](https://github.com/leecade/react-native-swiper/issues/2) Solve the problem of installation. (thanks [@jamwaffles](https://github.com/jamwaffles))\n\n- [v1.0.3]\n  + [0f796f3](https://github.com/leecade/react-native-swiper/commit/0f796f3557b5aeb1772573cd7ecae2e835bccc0b) fixes [#1](https://github.com/leecade/react-native-swiper/issues/1) Two 'horizontal' in propTypes. (thanks [@MacyzZ](https://github.com/MacyzZ))\n\n## Show Cases\n\n\u003e Try these cases by yourself very easy, Just open `examples/swiper.xcodeproj` with Xcode, then press `Cmd + R`; you may edit `examples/index.ios.js` for switch cases.\n\n### [examples/basic.js](https://github.com/leecade/react-native-swiper/blob/master/examples/examples/basic.js)\n\n![](http://i.imgur.com/zrsazAG.gif =300x)\n\n### [examples/swiper.js](https://github.com/leecade/react-native-swiper/blob/master/examples/examples/swiper.js)\n\n![](http://i.imgur.com/hP3f3oO.gif =300x)\n\n### [examples/swiper_number.js](https://github.com/leecade/react-native-swiper/blob/master/examples/examples/swiper_number.js)\n\n![](http://i.imgur.com/0rqESVb.gif =300x)\n\n### [examples/phone.js](https://github.com/leecade/react-native-swiper/blob/master/examples/examples/phone.js)\n\n![](http://i.imgur.com/c1BhjZm.gif =300x)\n\n## Getting Started\n\n- [Installation](#installation)\n- [Basic Usage](#basic-usage)\n- [Properties](#properties)\n  + [Basic](#basic)\n  + [Custom basic style \u0026 content](#custom-basic-style--content)\n  + [Pagination](#pagination)\n  + [Autoplay](#autoplay)\n  + [Control buttons](#control-buttons)\n  + [Props of Children](#props-of-children)\n  + [Basic props of `\u003cScrollView /\u003e`](#basic-props-of-scrollview-)\n  + [Supported ScrollResponder](#supported-scrollresponder)\n- [Examples](#examples)\n- [Development](#development)\n\n### Installation\n\n```bash\n$ npm i react-native-swiper2 --save\n```\n\n### Basic Usage\n\n- Install `react-native-cli` first\n\n```bash\n$ npm i react-native-cli -g\n```\n\n- Initialization of a react-native project\n\n```bash\n$ react-native init myproject\n```\n\n- Then, edit `myproject/index.ios.js`, like this:\n\n```jsx\nvar Swiper = require('react-native-swiper2')\n// es6\n// import Swiper from 'react-native-swiper2'\n\nvar React = require('react-native');\nvar {\n  AppRegistry,\n  StyleSheet,\n  Text,\n  View,\n} = React;\n\nvar styles = StyleSheet.create({\n  wrapper: {\n  },\n  slide1: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#9DD6EB',\n  },\n  slide2: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#97CAE5',\n  },\n  slide3: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#92BBD9',\n  },\n  text: {\n    color: '#fff',\n    fontSize: 30,\n    fontWeight: 'bold',\n  }\n})\n\nvar swiper = React.createClass({\n  render: function() {\n    return (\n      \u003cSwiper style={styles.wrapper} showsButtons={true}\u003e\n        \u003cView style={styles.slide1}\u003e\n          \u003cText style={styles.text}\u003eHello Swiper\u003c/Text\u003e\n        \u003c/View\u003e\n        \u003cView style={styles.slide2}\u003e\n          \u003cText style={styles.text}\u003eBeautiful\u003c/Text\u003e\n        \u003c/View\u003e\n        \u003cView style={styles.slide3}\u003e\n          \u003cText style={styles.text}\u003eAnd simple\u003c/Text\u003e\n        \u003c/View\u003e\n      \u003c/Swiper\u003e\n    )\n  }\n})\n\nAppRegistry.registerComponent('swiper', () =\u003e swiper)\n```\n\n### Properties\n\n#### Basic\n\n| Prop  | Default  | Type | Description |\n| :------------ |:---------------:| :---------------:| :-----|\n| horizontal | true | `bool` | If `true`, the scroll view's children are arranged horizontally in a row instead of vertically in a column. |\n| loop | true | `bool` | Set to `true` to enable continuous loop mode. |\n| index | 0 | `number` | Index number of initial slide. |\n| showsButtons | false | `bool` | Set to `true` make control buttons visible. |\n| autoplay | false | `bool` | Set to `true` enable auto play mode. |\n\n#### Custom basic style \u0026 content\n\n| Prop  | Default  | Type | Description |\n| :------------ |:---------------:| :---------------:| :-----|\n| width | - | `number` | If no specify default enable fullscreen mode by `flex: 1`. |\n| height | - | `number` | If no specify default fullscreen mode by `flex: 1`. |\n| style | {...} | `style` | See default style in source. |\n\n#### Pagination\n\n| Prop  | Default  | Type | Description |\n| :------------ |:---------------:| :---------------:| :-----|\n| showsPagination | true | `bool` | Set to `true` make pagination visible. |\n| paginationStyle | {...} | `style` | Custom styles will merge with the default styles. |\n| renderPagination | - | `function` | Complete control how to render pagination with three params (`index`, `total`, `context`) ref to `this.state.index` / `this.state.total` / `this`, For example: show numbers instead of dots. |\n| dot | `\u003cView style={{backgroundColor:'rgba(0,0,0,.2)', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /\u003e` | `element` | Allow custom the dot element. |\n| activeDot | `\u003cView style={{backgroundColor: '#007aff', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /\u003e` | `element` | Allow custom the active-dot element. |\n\n#### Autoplay\n\n| Prop  | Default  | Type | Description |\n| :------------ |:---------------:| :---------------:| :-----|\n| autoplay | true | `bool` | Set to `true` enable auto play mode. |\n| autoplayTimeout | 2.5 | `number` | Delay between auto play transitions (in second). |\n| autoplayDirection | true | `bool` | Cycle direction control. |\n\n#### Control buttons\n\n| Prop  | Default  | Type | Description |\n| :------------ |:---------------:| :---------------:| :-----|\n| showsButtons | true | `bool` | Set to `true` make control buttons visible. |\n| buttonWrapperStyle | `{backgroundColor: 'transparent', flexDirection: 'row', position: 'absolute', top: 0, left: 0, flex: 1, paddingHorizontal: 10, paddingVertical: 10, justifyContent: 'space-between', alignItems: 'center'}` | `style` | Custom styles. |\n| nextButton | `\u003cText style={styles.buttonText}\u003e›\u003c/Text\u003e` | `element` | Allow custom the next button. |\n| prevButton | `\u003cText style={styles.buttonText}\u003e‹\u003c/Text\u003e` | `element` | Allow custom the prev button. |\n\n#### Props of Children\n\n| Prop  | Default  | Type | Description |\n| :------------ |:---------------:| :---------------:| :-----|\n| style | {...} | `style` | Custom styles will merge with the default styles. |\n| title | {\u003cText numberOfLines={1}\u003e...\u003c/Text\u003e} | `element` | If this parameter is not specified, will not render the title. |\n\n#### Basic props of `\u003cScrollView /\u003e`\n\n| Prop  | Default  | Type | Description |\n| :------------ |:---------------:| :---------------:| :-----|\n| horizontal | true | `bool` | If `true`, the scroll view's children are arranged horizontally in a row instead of vertically in a column. |\n| pagingEnabled | true | `bool` | If true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination.  |\n| showsHorizontalScrollIndicator | false | `bool` | Set to `true` if you want to show horizontal scroll bar. |\n| showsVerticalScrollIndicator | false | `bool` |  Set to `true` if you want to show vertical scroll bar. |\n| bounces | false | `bool` | If `true`, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. If `false`, it disables all bouncing even if the alwaysBounce* props are true.  |\n| scrollsToTop | false | `bool` | If true, the scroll view scrolls to top when the status bar is tapped.  |\n| removeClippedSubviews | true | `bool` | If true, offscreen child views (whose overflow value is hidden) are removed from their native backing superview when offscreen. This canimprove scrolling performance on long lists.  |\n| automaticallyAdjustContentInsets | false | `bool` | Set to `true` if you need adjust content insets automation. |\n\n\u003e @see: http://facebook.github.io/react-native/docs/scrollview.html\n\n#### Supported ScrollResponder\n\n| Prop  | Params  | Type | Description |\n| :------------ |:---------------:| :---------------:| :-----|\n| onMomentumScrollBegin | `e` / `state` / `context` | `function` | When animation begins after letting up |\n| onMomentumScrollEnd | `e` / `state` / `context` | `function` | Makes no sense why this occurs first during bounce |\n| onTouchStartCapture | `e` / `state` / `context` | `function` | Immediately after `onMomentumScrollEnd` |\n| onTouchStart | `e` / `state` / `context` | `function` | Same, but bubble phase |\n| onTouchEnd | `e` / `state` / `context` | `function` | You could hold the touch start for a long time |\n| onResponderRelease | `e` / `state` / `context` | `function` | When lifting up - you could pause forever before * lifting |\n\n\u003e Note: each ScrollResponder be injected with two params: `state` and `context`, you can get `state` and `context`(ref to swiper's `this`) from params, for example:\n\n```jsx\nvar swiper = React.createClass({\n  _onMomentumScrollEnd: function (e, state, context) {\n    console.log(state, context.state)\n  },\n  render: function() {\n    return (\n      \u003cSwiper style={styles.wrapper}\n      onMomentumScrollEnd ={this._onMomentumScrollEnd}\n     ...\n      \u003c/Swiper\u003e\n    )\n  }\n})\n```\n\n\u003e More ScrollResponder info, see: https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollResponder.js\n\n### Examples\n\n@TODO, see code in [examples](https://github.com/leecade/react-native-swiper/tree/master/examples/examples) first.\n\n### Development\n\n```bash\n$ npm start\n```\n\n## Contribution\n\n- [@leecade](mailto:leecade@163.com) The main author of the original version .\n\n## Questions\n\nFeel free to [create an issue](https://github.com/sunnylqm/react-native-swiper2/issues/new)\n\n\u003e Inspired by [nolimits4web/Swiper](https://github.com/nolimits4web/swiper/) \u0026 Design material from [Dribbble](https://dribbble.com/) \u0026 made with ♥.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsunnylqm%2Freact-native-swiper2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsunnylqm%2Freact-native-swiper2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsunnylqm%2Freact-native-swiper2/lists"}