Skip to content
Cool page control animations written in React Native
JavaScript
Branch: master
Clone or download

Latest commit

Latest commit a551f25 Mar 28, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets Update README assets Mar 16, 2020
examples Added property - animationDuration Mar 28, 2020
src Added property - animationDuration Mar 28, 2020
.babelrc setup project Mar 4, 2020
.gitignore setup project Mar 4, 2020
.npmignore Add assets Mar 8, 2020
LICENSE Initial commit Mar 4, 2020
README.md Update README.md Mar 28, 2020
index.js Add page controls Mar 7, 2020
package-lock.json setup project Mar 4, 2020
package.json Update version Mar 28, 2020

README.md

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

You can’t perform that action at this time.