{"id":4151,"url":"https://github.com/fixt/react-native-page-swiper","last_synced_at":"2025-04-21T22:30:44.620Z","repository":{"id":57338885,"uuid":"46286846","full_name":"fixt/react-native-page-swiper","owner":"fixt","description":null,"archived":false,"fork":false,"pushed_at":"2019-11-01T18:25:54.000Z","size":119,"stargazers_count":91,"open_issues_count":12,"forks_count":47,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-05T06:05:18.550Z","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/fixt.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2015-11-16T16:22:14.000Z","updated_at":"2023-03-09T02:14:44.000Z","dependencies_parsed_at":"2022-09-12T23:52:35.012Z","dependency_job_id":null,"html_url":"https://github.com/fixt/react-native-page-swiper","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fixt%2Freact-native-page-swiper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fixt%2Freact-native-page-swiper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fixt%2Freact-native-page-swiper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fixt%2Freact-native-page-swiper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fixt","download_url":"https://codeload.github.com/fixt/react-native-page-swiper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223881184,"owners_count":17219261,"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.687Z","updated_at":"2024-11-09T20:34:37.291Z","avatar_url":"https://github.com/fixt.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":["UI"],"readme":"# react-native-page-swiper\n\nPage Swiper component for React Native.\n\n## Getting Started\n\n- [Installation](#installation)\n- [Basic Usage](#basic-usage)\n- [Properties](#properties)\n- [Examples](#examples)\n- [Development](#development)\n\n### Installation\n\n```bash\n$ npm i react-native-page-swiper --save\n```\n\n### Basic Usage\n\n- Install `react-native` first\n\n```bash\n$ npm i react-native -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-page-swiper')\n// es6\n// import Swiper from 'react-native-page-swiper'\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}\u003e\n        \u003cView style={styles.slide1}\u003e\n          \u003cText style={styles.text}\u003eHello Swiper\u003c/Text\u003e\n        \u003c/View\u003e\n        \n        \u003cView style={styles.slide2}\u003e\n          \u003cText style={styles.text}\u003eBeautiful\u003c/Text\u003e\n        \u003c/View\u003e\n        \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| Prop  | Default  | Type | Description |\n| :------------ |:---------------:| :---------------:| :-----|\n| index | `0` | `number` | Index number of initial slide. Changing this number after the component loads will cause the slide to change. |\n| pager | `true` | `boolean` | Show pager. |\n| onPageChange |  | `function` | Callback when page changes. |\n| activeDotColor | `blue` | `string` | CSS color of the dot for the current page. |\n| threshold | `25` | `number` | Threshold before the swiper captures the pan responder |\n\n\n### Examples\n\nSee code in [examples](https://github.com/fixt/react-native-page-swiper/tree/master/examples/swiper).\n\n## Questions\n\nFeel free to [contact us](mailto:code@fixt.co) or [create an issue](https://github.com/fixt/react-native-page-swiper/issues/new)\n\n\u003e Inspired by [leecade/react-native-swiper](https://github.com/leecade/react-native-swiper/) \u0026 [brentvatne/react-native-scrollable-tab-view](https://github.com/brentvatne/react-native-scrollable-tab-view).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffixt%2Freact-native-page-swiper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffixt%2Freact-native-page-swiper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffixt%2Freact-native-page-swiper/lists"}