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

n4kz/react-native-pages

n4kz

Reviews

Repository Details