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