Package Exports

react-native-chi-page-control

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-chi-page-control) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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`

PageControlPoblano

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

Prop	Description	Default
`radius`	Page radius.	`6`
`activeTransparency`	Page view opacity.	`1`
`inactiveBorderColor`	Inactive page color.	`black`

Page Controls 🌶️🌶️🌶️

PageControlAji

PageControlAleppo

PageControlJaloro

PageControlPoblano

License

MIT