react-native-pages

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
• Configurable scroll direction
• Configurable page indicator position, color and opacity
• Animated page indicator
• Pure javascript implementation

Roadmap

0.2.0

• Parallax support
• Methods next(), prev() and currentPage()

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
indicatorColor	Page indicator color	String	rgb(255, 255, 255)
indicatorOpacity	Page indicator opacity (inactive dots)	Number	0.30
indicatorPosition	Page indicator position	String	horizontal? bottom : right
onScrollEnd	Scroll end callback	Function	-
renderPager	Render pager callback	Function	-

Example

git clone https://github.com/n4kz/react-native-pages
cd react-native-pages/example
npm install
react-native run-ios # or run-android

Copyright and License

BSD License

Copyright 2017 Alexander Nazarov. All rights reserved.