react-native-page-control
Page Control for React Native, like iOS UIPageControl, APIs are same as UIPageControl
Installation
$ npm install react-native-page-control --saveDemo
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
