React-native-chi-page-control NPM

react-native-chi-page-control

Cool page control with custom animations written in React Native and inspired by Native iOS framework CHIPageControl

Installation

Using npm:

$ npm install react-native-chi-page-control --save

Using yarn:

$ yarn add react-native-chi-page-control

Usage

import { 
  PageControlAji,
  PageControlAleppo,
  PageControlJaloro,
  PageControlPoblano 
} from 'react-native-chi-page-control';

<PageControlAji progress={0.5} numberOfPages={3} />
<PageControlAleppo progress={0.5} numberOfPages={3} />
<PageControlJaloro progress={0.5} numberOfPages={3} />
<PageControlPoblano progress={0.5} numberOfPages={3} />

Examples

FlatList react-native-swiper

Properties for all components

Prop	Description	Default
`numberOfPages`	Number of pages show in page control.	`0`
`progress`	Progress of page. A number between 0 and 1.	`0`
`animationDuration`	Page scroll animation speed.	`50`
`margin`	Space between pages.	`6`
`activeTintColor`	Color of moving page.	`black`
`hidesForSinglePage`	If set true then if page control will have one page, will be hidden.	`true`

PageControlAji & PageControlAleppo

All of the props under Properties in addition to the following:

Prop	Description	Default
`radius`	Page radius.	`6`
`inactiveTransparency`	Inactive page opacity.	`0.4`
`inactiveBorderColor`	Inactive page border color.	None
`inactiveTintColor`	Inactive page color.	`black`

PageControlJaloro

All of the props under Properties in addition to the following:

Prop	Description	Default
`width`	Width of page.	`15`
`height`	Height of page.	`6`
`borderRadius`	Page border radius.	`3`
`inactiveTransparency`	Inactive page opacity.	`0.4`
`inactiveTintColor`	Inactive page color.	`black`