lancygoyal / react-native-page-control

Page Control for React Native, like iOS UIPageControl, APIs are same as UIPageControl

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