Awesome
react-native-page-control
Page Control for React Native, like iOS UIPageControl, APIs are same as UIPageControl
Installation
$ npm install react-native-page-control --save
Demo
Example
import PageControl from 'react-native-page-control';
<PageControl
style={{position:'absolute', left:0, right:0, bottom:10}}
numberOfPages={3}
currentPage={1}
hidesForSinglePage
pageIndicatorTintColor='gray'
currentPageIndicatorTintColor='white'
indicatorStyle={{borderRadius: 5}}
currentIndicatorStyle={{borderRadius: 5}}
indicatorSize={{width:8, height:8}}
onPageIndicatorPress={this.onItemTap}
/>
API (props)
| Prop | Required | Default | Type | Description |
|---|---|---|---|---|
| numberOfPages | YES | 0 | number | The number of pages the receiver shows (as dots) |
| currentPage | NO | 0 | number | The current page, shown by the receiver as a white dot |
| hidesForSinglePage | NO | false | bool | A Boolean value that controls whether the page control is hidden when there is only one page |
| pageIndicatorTintColor | NO | gray | string | The tint color to be used for the page indicator. |
| currentPageIndicatorTintColor | NO | white | string | The tint color to be used for the current page indicator. |
| indicatorStyle | NO | {} | object | style for the page indicator |
| currentIndicatorStyle | NO | {} | object | style for the current page indicator. |
| onPageIndicatorPress | NO | function(index){} | func | page indicator press hook function. param: index current press indicator index |
Development
$ yarn
$ npm run init
$ npm run start
$ react-native run-ios