{"id":28169454,"url":"https://github.com/around25/react-native-swipe-pager","last_synced_at":"2025-05-15T16:17:59.159Z","repository":{"id":57098809,"uuid":"138720222","full_name":"Around25/react-native-swipe-pager","owner":"Around25","description":null,"archived":false,"fork":false,"pushed_at":"2018-06-28T08:50:34.000Z","size":152,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-15T16:17:16.614Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Around25.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-26T10:06:56.000Z","updated_at":"2019-10-08T09:58:36.000Z","dependencies_parsed_at":"2022-08-20T17:31:22.000Z","dependency_job_id":null,"html_url":"https://github.com/Around25/react-native-swipe-pager","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/Around25%2Freact-native-swipe-pager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Around25%2Freact-native-swipe-pager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Around25%2Freact-native-swipe-pager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Around25%2Freact-native-swipe-pager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Around25","download_url":"https://codeload.github.com/Around25/react-native-swipe-pager/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254374529,"owners_count":22060614,"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":"2025-05-15T16:17:15.364Z","updated_at":"2025-05-15T16:17:59.147Z","avatar_url":"https://github.com/Around25.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @around25/react-native-swipe-pager\n\n![npm](https://img.shields.io/npm/v/@around25/react-native-swipe-pager.svg) ![npm](https://img.shields.io/npm/l/@around25/react-native-swipe-pager.svg) ![npm](https://img.shields.io/npm/dw/@around25/react-native-swipe-pager.svg) ![npm](https://img.shields.io/npm/dt/@around25/react-native-swipe-pager.svg)\n\nThis component is a implementation of pager for React Native. It allows you to swipe between pages, turn on auto play, to set timeout for auto plat and so on.\n\n  - works on iOS and Android\n\n### Features\n  - can render hundreds of pages\n  - set auto play\n  - lock swipe action\n  - set timeout for auto play\n  - render custom page indicator\n  - enable/disable loop\n\n### Installation\n\n```sh\n$ npm i @around25/react-native-swipe-pager --save\n```\n\n### Options\n\n| Option | iOS    | Android | Description | Default | Options | Type\n|:------:|:------:|:-------:|:----:|:-------------:|:--------:|:----:|\n| `dataSource` | YES | YES | ***Required*** - Provide pages data | - | - | -\n| `renderSwipePage` | YES | YES | Render page view  | - | - | **{component}**\n| `autoPlay` | YES | YES | If is set to `true`, pages will change automatically | ***false*** | *true*, *false* | **{boolean}**\n| `initialPage` | YES | YES | The initial page to display. It requires the index of the page. | ***0*** | - | **{number}**\n| `isLoop` | YES | YES | If is set to `true`, infinite swipe is enabled | ***false*** | *true*, *false* | **{boolean}**\n| `locked` | YES | YES | If is set to `true`, swipe to change pages is disabled | ***false*** | *true*, *false* | **{boolean}**\n| `renderPageIndicator` | YES | YES | If is set to `true`, indicator will hide. If is set to nothing, it will show the default indicator with dots. Custom component can be passed instead of `false` | -  | *false*, *\u003cCustomComponent/\u003e* | **{boolean/component}**\n| `autoPlayTimeout` | YES | YES | Specify the timeout of auto play. | ***5000***  | - | **{number(miliseconds)}**\n| `animation` | YES | YES | Pass custom function with animation, if not, the default animation will be applied. | -  | - | **{function}**\n\n### Methods\n| Method | Description | Type\n|:------:|:-----------:|:----:|\n| `onSwipe` | Callback when the page is changed | ***{function}***\n\n### Example \n\n## App.js\n\n```javascript\nimport React, { Component } from 'react';\nimport { Text, View, Animated, Easing } from 'react-native';\nimport RNSwipePager from '@around25/react-native-swipe-pager';\n\nimport styles from './styles';\n\nexport default class App extends Component {\n  constructor(props) {\n    let dataSource = new RNSwipePager.DataSource({\n      pageHasChanged: (p1, p2) =\u003e p1 !== p2,\n    });\n    super(props);\n    this.state = {\n      dataSource: dataSource.cloneWithPages([{name: 'Kidgarten'}, {name: 'Engage'}, {name: 'Around25'}, {name: 'CleverWash'}])\n    }\n  }\n  \n  /**\n   * @description Function called when page is changed\n   * @param pageIndex\n   */\n  onSwipe = (pageIndex) =\u003e {\n    // Do whatever you want\n  };\n  \n  \n  /**\n   * @description Render page with content\n   * @param data\n   * @return {XML}\n   */\n  renderPage = (data) =\u003e {\n    return (\n      \u003cView style={styles.page}\u003e\n        \u003cText style={styles.name}\u003e{data.name}\u003c/Text\u003e\n      \u003c/View\u003e\n    )\n  };\n  \n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cRNSwipePager\n          style={styles.pager}\n          dataSource={this.state.dataSource}\n          renderSwipePage={this.renderPage}\n          renderPageIndicator={false}\n          autoPlay={true}\n          autoPlayTimeout={1000}\n          locked={true}\n          onSwipe={this.onSwipe}\n        /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\n```\n\n## styles.js\n```javascript\nimport { StyleSheet } from 'react-native';\n\nexport default StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  page: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: 'gray',\n    height: '100%',\n    width: '100%'\n  },\n  pager: {\n    flex: 1,\n    backgroundColor: 'red',\n    width: '100%',\n    height: '100%'\n  },\n  name: {\n    fontSize: 40\n  }\n});\n\n```\n## An example with `animation` \n``` javascript\n\u003cRNSwipePager\n          style={styles.pager}\n          dataSource={this.state.dataSource}\n          renderSwipePage={this.renderPage}\n          isLoop={true}\n          animation={(animatedValue, toValue, gestureState) =\u003e {\n            let velocity = Math.abs(gestureState.vx);\n            let baseDuration = 300;\n            let duration = (velocity \u003e 1) ? 1 / velocity * baseDuration : baseDuration;\n            \n            return Animated.timing(animatedValue,\n              {\n                toValue: toValue,\n                duration: duration,\n                easing: Easing.out(Easing.exp),\n                bounce: 10\n              });\n          }}\n          onSwipe={this.onSwipe}\n          autoPlay={false}\n        /\u003e\n```\n\n# License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faround25%2Freact-native-swipe-pager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faround25%2Freact-native-swipe-pager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faround25%2Freact-native-swipe-pager/lists"}