https://github.com/aslight0503/react-native_viewpager
[Deprecated] ViewPager component for React Native
https://github.com/aslight0503/react-native_viewpager
andrioid ios javascript react-native
Last synced: 5 months ago
JSON representation
[Deprecated] ViewPager component for React Native
- Host: GitHub
- URL: https://github.com/aslight0503/react-native_viewpager
- Owner: aslight0503
- Created: 2024-12-09T11:23:23.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-12-13T11:14:41.000Z (over 1 year ago)
- Last Synced: 2025-03-25T17:21:38.664Z (over 1 year ago)
- Topics: andrioid, ios, javascript, react-native
- Language: JavaScript
- Homepage:
- Size: 1.76 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-viewpager
[](https://www.npmjs.com/package/react-native-viewpager)
[](https://www.npmjs.com/package/react-native-viewpager)
> @Deprecated This repo is no more maintenance.
This is the `ViewPager` componnent in React Native both for Android and iOS.
This is a JavaScript-only implementation of pager for React Native. Like `ListView`,
this can render hundreds of pages without performance issue. Better than the one in
Android, this `ViewPager` can **auto play** -- turn page automaticly, **loop** -- make infinite scrolling.
## Demo
Demo project is [here](./Sample).
## Usage
1. Run `npm install react-native-viewpager --save`
2. Code like this:
```
var ViewPager = require('react-native-viewpager');
```
## More configuration
* **`dataSource`**: this is require to provide pages data,
* **`renderPage`**: this is require to render page view,
* **`autoPlay`**: `true` to turn page automatically,
* **`initialPage`**: to set the index of the first page to load,
* **`isLoop`**: `true` to run in infinite scroll mode,
* **`locked`**: `true` to disable touch scroll,
* **`onChangePage`**: page change callback,
* **`renderPageIndicator`**: render custom ViewPager indicator.
* **`initialPage`**: show initially some other page than first page.
## Page Transition Animation Controls
* **`animation`**: function that returns a React Native Animated configuration.
Example:
```
var ViewPager = require('react-native-viewpager');
{
// Use the horizontal velocity of the swipe gesture
// to affect the length of the transition so the faster you swipe
// the faster the pages will transition
var velocity = Math.abs(gestureState.vx);
var baseDuration = 300;
var duration = (velocity > 1) ? 1/velocity * baseDuration : baseDuration;
return Animated.timing(animatedValue,
{
toValue: toValue,
duration: duration,
easing: Easing.out(Easing.exp)
});
}}
/>
```
## Licensed
MIT License