gem-hunter
Language: JavaScript
[Deprecated] ViewPager component for React Native
@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 --savevar 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