{"id":3957,"url":"https://github.com/race604/react-native-viewpager","last_synced_at":"2025-05-15T00:06:29.622Z","repository":{"id":57152966,"uuid":"44003468","full_name":"race604/react-native-viewpager","owner":"race604","description":"[Deprecated] ViewPager component for React Native","archived":false,"fork":false,"pushed_at":"2022-07-19T07:20:18.000Z","size":1847,"stargazers_count":1407,"open_issues_count":107,"forks_count":373,"subscribers_count":47,"default_branch":"master","last_synced_at":"2025-04-13T19:50:02.542Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/race604.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":"2015-10-10T09:10:39.000Z","updated_at":"2025-04-09T09:57:52.000Z","dependencies_parsed_at":"2022-09-03T18:21:50.149Z","dependency_job_id":null,"html_url":"https://github.com/race604/react-native-viewpager","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/race604%2Freact-native-viewpager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/race604%2Freact-native-viewpager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/race604%2Freact-native-viewpager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/race604%2Freact-native-viewpager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/race604","download_url":"https://codeload.github.com/race604/react-native-viewpager/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254179903,"owners_count":22027884,"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:16:56.525Z","updated_at":"2025-05-15T00:06:29.556Z","avatar_url":"https://github.com/race604.png","language":"JavaScript","funding_links":[],"categories":["Components","组件","Libraries","JavaScript","Android 开发中的日常积累","Others"],"sub_categories":["UI","图形动画","React Native 与 Weex 专题"],"readme":"# react-native-viewpager\n\n[![npm version](https://img.shields.io/npm/v/react-native-viewpager.svg?style=flat-square)](https://www.npmjs.com/package/react-native-viewpager)\n[![npm downloads](https://img.shields.io/npm/dm/react-native-viewpager.svg?style=flat-square)](https://www.npmjs.com/package/react-native-viewpager)\n\n\u003e @Deprecated This repo is no more maintenance.\n\nThis is the `ViewPager` componnent in React Native both for Android and iOS.\nThis is a JavaScript-only implementation of pager for React Native. Like `ListView`,\nthis can render hundreds of pages without performance issue. Better than the one in\nAndroid, this `ViewPager` can **auto play** -- turn page automaticly, **loop** -- make infinite scrolling.\n\n## Demo\n![](./art/demo.jpg)\n![](./art/anim.gif)\n\nDemo project is [here](./Sample).\n\n## Usage\n\n1. Run `npm install react-native-viewpager --save`\n2. Code like this:\n\n```\nvar ViewPager = require('react-native-viewpager');\n\u003cViewPager\n    dataSource={this.state.dataSource}\n    renderPage={this._renderPage}/\u003e\n```\n\n## More configuration\n\n* **`dataSource`**: this is require to provide pages data,\n* **`renderPage`**: this is require to render page view,\n* **`autoPlay`**: `true` to turn page automatically,\n* **`initialPage`**: to set the index of the first page to load,\n* **`isLoop`**: `true` to run in infinite scroll mode,\n* **`locked`**: `true` to disable touch scroll,\n* **`onChangePage`**: page change callback,\n* **`renderPageIndicator`**: render custom ViewPager indicator.\n* **`initialPage`**: show initially some other page than first page.\n\n## Page Transition Animation Controls\n\n* **`animation`**: function that returns a React Native Animated configuration.\n\nExample:\n```\nvar ViewPager = require('react-native-viewpager');\n\u003cViewPager\n    dataSource={this.state.dataSource}\n    renderPage={this._renderPage}\n    animation = {(animatedValue, toValue, gestureState) =\u003e {\n    // Use the horizontal velocity of the swipe gesture\n    // to affect the length of the transition so the faster you swipe\n    // the faster the pages will transition\n    var velocity = Math.abs(gestureState.vx);\n    var baseDuration = 300;\n    var 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    });\n  }}\n/\u003e\n```\n\n## Licensed\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frace604%2Freact-native-viewpager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frace604%2Freact-native-viewpager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frace604%2Freact-native-viewpager/lists"}