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