Now with Partition Management

    react-native-pages

    0.9.0 • Public • Published

    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

    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.

    Install

    npm i react-native-pages

    DownloadsWeekly Downloads

    1,431

    Version

    0.9.0

    License

    BSD-3-Clause

    Unpacked Size

    17.1 kB

    Total Files

    13

    Last publish

    Collaborators

    • n4kz