react-native-pages

Easy to use page view component for React Native

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

npm install --save react-native-pages

Usage

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

class Example extends Component {
  render() {
    return (
      <Pages>
        <View style={{ flex: 1, backgroundColor: 'red' }} />
        <View style={{ flex: 1, backgroundColor: 'green' }} />
        <View style={{ flex: 1, backgroundColor: 'blue' }} />
      </Pages>
    );
  }
}

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

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 (
      <Indicator {...options} />
    );
  };

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

    return (
      <Pages {...props} renderPager={this._renderPager}>
        {children}
      </Pages>
    );
  }
}

For implementation details take look at Indicator 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

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

Copyright 2017-2019 Alexander Nazarov. All rights reserved.