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.
- Run
npm install react-native-viewpager --save
- Code like this:
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,isLoop
:true
to run in infinite scroll mode,locked
:true
to disable touch scroll,renderPageIndicator
: render custom ViewPager indicator.
hasTouch(hasTouch)
: callback when touch interaction state changes, passes a boolean that describes whether the touch is active or inactiveonChangePageStart(nextPageIndex)
: callback for the start of a page transition. Passes the index for the page being transitioned toonChangePage(currentPageIndex)
: callback for the completion of a page transition. Passes the index for the new current pageonMove(gestureStateDX)
: callback that fires through the full swipe interaction and provides the current gestureState.dx value of the swipe
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