@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 project is here.
npm install react-native-viewpager --save
var ViewPager = require('react-native-viewpager');
<ViewPager
dataSource={this.state.dataSource}
renderPage={this._renderPage}/>
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.animation
: function that returns a React Native Animated configuration.Example:
var ViewPager = require('react-native-viewpager');
<ViewPager
dataSource={this.state.dataSource}
renderPage={this._renderPage}
animation = {(animatedValue, toValue, gestureState) => {
// 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)
});
}}
/>
MIT License