https://github.com/silentcloud/react-native-page-control

Page Control for React Native, like iOS UIPageControl, APIs are same as UIPageControl
https://github.com/silentcloud/react-native-page-control

Last synced: 6 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/silentcloud/react-native-page-control
• Owner: silentcloud
• License: mit
• Created: 2015-06-13T11:03:00.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2020-03-11T03:02:59.000Z (almost 5 years ago)
• Last Synced: 2024-11-07T19:54:01.877Z (about 1 month ago)
• Language: JavaScript
• Size: 37.1 KB
• Stars: 170
• Watchers: 4
• Forks: 30
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-page-control ★151 - React native page control, like ios UIPageControl (Components / UI)
• awesome-reactnative-ui - react-native-page-control
• awesome-react-native - react-native-page-control ★151 - React native page control, like ios UIPageControl (Components / UI)
• awesome-reactnative-ui - react-native-page-control
• awesome-react-native - react-native-page-control ★151 - React native page control, like ios UIPageControl (Components / UI)
• awesome-react-native-ui - react-native-page-control ★86 - React native page control, like ios UIPageControl (Components / UI)
• awesome-react-native - react-native-page-control ★151 - React native page control, like ios UIPageControl (Components / UI)

README

        
# react-native-page-control

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

## Installation

```bash

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

```

## Demo

![page control demo](http://silentcloud.github.io/upload/pagecontrol.gif)

## Example

```jsx

import PageControl from 'react-native-page-control';

```

## 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

  ```bash

  $ yarn

  $ npm run init

  $ npm run start

  $ react-native run-ios

  ```