node package manager
Stop wasting time. Easily manage code sharing in your team. Create a free org »

react-native-pages

react-native-pages

npm license

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

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 -
onScrollEnd Scroll end 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

class Example extends Component {
  renderPager({ pages, progress, indicatorPosition }) {
    if ('none' === indicatorPosition) {
      return null;
    }
 
    return (
      <MyIndicator pages={pages} progress={progress} position={indicatorPosition} />
    );
  }
 
  render() {
    let { children, ...props } = this.props;
 
    return (
      <Pages {...props} renderPager={this.renderPager.bind(this)}>
        {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 Alexander Nazarov. All rights reserved.