Home

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

page control 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)

PropRequiredDefaultTypeDescription
numberOfPagesYES0numberThe number of pages the receiver shows (as dots)
currentPageNO0numberThe current page, shown by the receiver as a white dot
hidesForSinglePageNOfalseboolA Boolean value that controls whether the page control is hidden when there is only one page
pageIndicatorTintColorNOgraystringThe tint color to be used for the page indicator.
currentPageIndicatorTintColorNOwhitestringThe tint color to be used for the current page indicator.
indicatorStyleNO{}objectstyle for the page indicator
currentIndicatorStyleNO{}objectstyle for the current page indicator.
onPageIndicatorPressNOfunction(index){}funcpage indicator press hook function. param: index current press indicator index

Development

$ yarn
$ npm run init
$ npm run start
$ react-native run-ios