react-native-carousel-pager
![license](https://camo.githubusercontent.com/e581ac49b7e1e99fb951242be63f6fdc6ebbc20c89a97fca0de99e1f2e6ae87e/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6d6173686170652f6170697374617475732e737667)
npm install react-native-carousel-pager --save
or
yarn add react-native-carousel-pager
import {View} from 'react-native';
import React, {Component} from 'react';
import CarouselPager from 'react-native-carousel-pager';
export default class Pager extends Component {
onClickSomething() {
this.carousel.goToPage(2);
}
render() {
return (
<View style={{flex: 1}}>
<CarouselPager ref={ref => this.carousel = ref} initialPage={2} pageStyle={{backgroundColor: '#fff'}}>
<View key={'page0'}></View>
<View key={'page1'}></View>
<View key={'page2'}></View>
<View key={'page3'}></View>
</CarouselPager>
</View>
);
}
}
Name |
propType |
default value |
description |
initialPage |
number |
0 |
Initial page to display on render |
vertical |
boolean |
false |
Set to true if carousel should be vertical |
blurredZoom |
number |
0.8 |
Zoom (number between 0 and 1) to apply to blurred pages |
blurredOpacity |
number |
0.8 |
Opacity (number between 0 and 1) to apply to blurred pages |
animationDuration |
number |
150 |
Animation duration between page changes |
containerPadding |
number |
30 |
Container padding (used to display part of preceding and following pages) |
pageSpacing |
number |
10 |
Space between pages |
pageStyle |
object |
null |
Style to apply to each page |
onPageChange |
function |
(page) => {} |
When current page changes, call onPageChange with parameter |
Name |
propType |
description |
goToPage |
number |
Scrolls to the given page |