[npm-badge]: https://img.shields.io/npm/v/react-native-pages.svg?colorB=ff6d00
[npm-url]: https://npmjs.com/package/react-native-pages
[license-badge]: https://img.shields.io/npm/l/react-native-pages.svg?colorB=448aff
[license-url]: https://raw.githubusercontent.com/n4kz/react-native-pages/master/license.txt
[travis-badge]: https://api.travis-ci.org/n4kz/react-native-pages.svg?branch=master
[travis-url]: https://travis-ci.org/n4kz/react-native-pages?branch=master
[codeclimate-badge]: https://img.shields.io/codeclimate/maintainability/n4kz/react-native-pages.svg
[codeclimate-url]: https://codeclimate.com/github/n4kz/react-native-pages
[example-source]: https://github.com/n4kz/react-native-pages/blob/master/example/app.js
[example-url]: https://cloud.githubusercontent.com/assets/2055622/25063699/68d6914e-21f4-11e7-81fe-b72d8e003530.gif
[indicator-source]: https://github.com/n4kz/react-native-pages/blob/master/src/components/indicator/index.js

react-native-pages

[![npm][npm-badge]][npm-url]
[![license][license-badge]][license-url]
[![travis][travis-badge]][travis-url]
[![codeclimate][codeclimate-badge]][codeclimate-url]

Easy to use page view component for React Native

![example][example-url]

Features

* Easy to use
* Consistent look and feel on iOS and Android
* Landscape and portrait orientation support
* Parallax and complex animation support
* Animated page indicator
* Configurable scroll direction
* Configurable page indicator position, color and opacity
* RTL support
* Pure javascript implementation

Installation

``bash npm install --save react-native-pages`

`Usage`

`javascript import React, { Component } from 'react'; import { Pages } from 'react-native-pages';

class Example extends Component { render() { return ( ); } }`

`Properties`

name | description | type | default :----------------- |:-------------------------------------- | --------:|:------------------ horizontal | Scroll direction | Boolean | true rtl | RTL mode for horizontal scroll | Boolean | false startPage | Start page | Number | 0 indicatorColor | Page indicator color | String | rgb(255, 255, 255) indicatorOpacity | Page indicator opacity (inactive dots) | Number | 0.30 indicatorPosition | Page indicator position | String | bottom containerStyle | Style for container view | Object | - progress | Animated.Value updated with progress | Object | - onScrollStart | Scroll start callback | Function | - onScrollEnd | Scroll end callback | Function | - onHalfway | Dominant page change callback | Function | - renderPager | Render pager callback | Function | -

Possible values for indicatorPosition are none, top, right, bottom and left

`Methods`

name | description | returns :-------------- |:------------------------------------------------- | -------: scrollToPage | Scroll to page with optional animation | - isDragging | Returns whether the user has begun scrolling | Boolean isDecelerating | Returns whether content is moving after scrolling | Boolean

`Replacing page indicator`

`javascript import { Indicator, Pages } from 'react-native-pages';

class Example extends Component { _renderPager = (options) => { let { rtl, pages, progress, horizontal, indicatorColor, indicatorOpacity, indicatorPosition, } = options;

if ('none' === indicatorPosition) { return null; }

return ( ); };

render() { let { children, ...props } = this.props;

return ( {children} ); } }`

For implementation details take look at [Indicator][indicator-source] component

`Parallax and other animations`

All child components receive the following props

name | description | type :-------- |:------------------------------------ | ------: index | Page index | Number pages | Page count | Number progress | Animated.Value with current progress | Object

For usage example take look at example app [source code][example-source]

`Example`

`bash git clone https://github.com/n4kz/react-native-pages cd react-native-pages/example npm install npm run ios # or npm run android``

Copyright and License

BSD License