rnp

react-native-pages

npm i react-native-pages

Readme

react-native-pages

npm license travis codeclimate

Easy to use page view component for React Native

example

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

namedescriptiontypedefault
horizontalScroll directionBooleantrue
rtlRTL mode for horizontal scrollBooleanfalse
startPageStart pageNumber0
indicatorColorPage indicator colorStringrgb(255, 255, 255)
indicatorOpacityPage indicator opacity (inactive dots)Number0.30
indicatorPositionPage indicator positionStringbottom
containerStyleStyle for container viewObject-
progressAnimated.Value updated with progressObject-
onScrollStartScroll start callbackFunction-
onScrollEndScroll end callbackFunction-
onHalfwayDominant page change callbackFunction-
renderPagerRender pager callbackFunction-

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

Methods

namedescriptionreturns
scrollToPageScroll to page with optional animation-
isDraggingReturns whether the user has begun scrollingBoolean
isDeceleratingReturns whether content is moving after scrollingBoolean

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

namedescriptiontype
indexPage indexNumber
pagesPage countNumber
progressAnimated.Value with current progressObject

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

BSD License

Copyright 2017-2019 Alexander Nazarov. All rights reserved.

Jump To