ViewPager component for react-native, same api on both android and ios. 

react-native-viewpager-enhanced

import ViewPager from './viewpager/ViewPager';

import IndicatorViewPager from './viewpager/IndicatorViewPager';

import PagerDotIndicator from './viewpager/indicator/PagerDotIndicator';

import PagerTitleIndicator from './viewpager/indicator/PagerTitleIndicator';

import PagerTabIndicator from './viewpager/indicator/PagerTabIndicator';

  "name": "react-native-viewpager-enhanced",

  "description": "ViewPager component for react-native, same api on both android and ios.",

    "test": "echo \"Error: no test specified\" && exit 1;"

    "url": "git+https://github.com/jreziga/React-Native-ViewPager.git"

    "url": "https://github.com/jreziga/React-Native-ViewPager/issues"

  "homepage": "https://github.com/jreziga/React-Native-ViewPager#readme"

This module is not mine, I forked it from [ZbTang](https://github.com/zbtang/React-Native-ViewPager) and I uploaded an enhanced

version on npm called [react-native-viewpager-enhanced](https://www.npmjs.com/package/react-native-viewpager-enhanced).

- Add props `indicatorPosition` direction (possible values are `top` and `bottom`)

- Custom render tab titles on `PagerTitleIndicator` component

- Listen event `onItemPress(index, isSelected)` on `PagerTabIndicator` and `PagerTitleIndicator`

- Listen event `onPageChange(index)` on `PagerTabIndicator`, `PagerTitleIndicator` and `PagerDotIndicator`

- Add method `getCurrentPageIndex()` on `IndicatorViewPager` ref

- Add management of `topTitle[Value/Enabled/ContainerStyle/TextStyle]`, see example:

    topTitleValue="This title is static if autoUpdateTitle = false"

    topTitleContainerStyle={{backgroundColor: '#E62118'}}

    itemsContainerStyle={{backgroundColor: '#E62118'}}

    selectedBorderStyle={{backgroundColor: 'white'}}

    renderTitle={(index, title, isSelected) => {

        // I can render my own tab, here I decide to render only an icon

        if (index == 0) icon = require('../img/menu-0.png');

        else if (index == 1) icon = require('../img/menu-1.png');

        else if (index == 2) icon = require('../img/menu-2.png');

[![npm](https://img.shields.io/npm/v/rn-viewpager.svg?style=plastic)](https://npmjs.org/package/rn-viewpager) [![npm](https://img.shields.io/npm/dm/rn-viewpager.svg?style=plastic)](https://npmjs.org/package/rn-viewpager) [![npm](https://img.shields.io/npm/dt/rn-viewpager.svg?style=plastic)](https://npmjs.org/package/rn-viewpager)

ViewPager and Indicator component for react-native on both android and ios. ViewPager's props is the same as [ViewPagerAndroid](https://facebook.github.io/react-native/docs/viewpagerandroid.html#content). 

- unify \<ViewPagerAndroid\> and \<ScrollView pagingEnabled={true}\> to \<ViewPager\>, add offer same props as [ViewPagerAndroid](https://facebook.github.io/react-native/docs/viewpagerandroid.html#content). 

- \<IndicatorViewPager\> component support render indicator

- implement common indicator: DotIndicator, TitleIndicator and TabIndicator

[download demo apk file](http://fir.im/md2u)

import {StyleSheet, View, Text} from 'react-native';

import {PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from 'rn-viewpager';

export default class ViewPagerPage extends Component {

                    indicator={this._renderDotIndicator()}

import React, {Component, PropTypes} from 'react';

import {StyleSheet, View} from 'react-native';

import IndicatorViewPager from '../IndicatorViewPager';

export default class PagerDotIndicator extends Component {

        pageCount: PropTypes.number.isRequired,

        pager: PropTypes.instanceOf(IndicatorViewPager),

        selectedDotStyle: View.propTypes.style

        selectedIndex: this.props.initialPage

    shouldComponentUpdate(nextProps, nextState) {

        return this.state.selectedIndex != nextState.selectedIndex ||

            this.props.pageCount != nextProps.pageCount ||

            this.props.dotStyle != nextProps.dotStyle ||

            this.props.selectedDotStyle != nextProps.selectedDotStyle ||

            this.props.style != nextProps.style;

        let {pageCount, dotStyle, selectedDotStyle}=this.props;

        for (let i = 0; i < pageCount; i++) {

            let isSelect = i === this.state.selectedIndex;

                    style={[styles.dot, isSelect ? styles.selectDot : null, isSelect ? selectedDotStyle : dotStyle]}

                style={[styles.container, this.props.style]}

        if (this.state.selectedIndex != e.position) {

            this.setState({selectedIndex: e.position});

            if (this.props.onPageChange) {

                this.props.onPageChange(e.position);

        borderRadius: DEFAULT_DOT_RADIUS >> 1,

import {StyleSheet, View, Image, Text, TouchableOpacity} from 'react-native';

export default class PagerTabIndicator extends Component {

            initialPage: PropTypes.number,

            pager: PropTypes.instanceOf(IndicatorViewPager),

    tabs: PropTypes.arrayOf(PropTypes.shape({

            iconSource: Image.propTypes.source,

            selectedIconSource: Image.propTypes.source

            itemStyle: View.propTypes.style,

            selectedItemStyle: View.propTypes.style,

            iconStyle: Image.propTypes.style,

            selectedIconStyle: Image.propTypes.style,

            textStyle: Text.propTypes.style,

            selectedTextStyle: Text.propTypes.style

        this.onItemPress = this.onItemPress.bind(this);

    onItemPress(pager, index, isSelected) {

            this.props.onItemPress(index, isSelected);

                tabs, pager, style, itemStyle, selectedItemStyle, iconStyle,

                selectedIconStyle, textStyle, selectedTextStyle

        if (!tabs || tabs.length === 0) return null;

        let tabsView = tabs.map((tab, index) => {

            let isSelected = this.state.selectedIndex === index;

                            style={[styles.itemContainer, isSelected ? selectedItemStyle : itemStyle]}

                            activeOpacity={0.6}

                            onPress={() => {this.onItemPress(pager, index, isSelected)}}

                                style={[styles.image, isSelected ? selectedIconStyle : iconStyle]}

                                source={isSelected ? tab.selectedIconSource : tab.iconSource}

                                style={[ isSelected ? styles.textSelected : styles.text, isSelected ? selectedTextStyle : textStyle]}

import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';

export default class PagerTitleIndicator extends Component {

        titles: PropTypes.arrayOf(PropTypes.string).isRequired,

        itemTextStyle: Text.propTypes.style,

        selectedItemTextStyle: Text.propTypes.style,

        selectedBorderStyle: View.propTypes.style,

        renderTitle: React.PropTypes.func,

        autoUpdateTitle: React.PropTypes.bool,

        topTitleEnabled: React.PropTypes.bool,

        topTitleValue: React.PropTypes.string,

        topTitleContainerStyle: Text.propTypes.style,

        topTitleTextStyle: Text.propTypes.style,

        itemsContainerStyle: Text.propTypes.style,

        if (this.props.topTitleEnabled && this.props.titles && this.props.titles.length > 0) {

            topTitleValue = this.props.titles[0];

        if (this.props.topTitleValue != null) {

            topTitleValue = this.props.topTitleValue;

            selectedIndex: this.props.initialPage,

            topTitleValue: topTitleValue,

            topTitleEnabled: this.props.topTitleEnabled

        this.setTopTitle = this.setTopTitle.bind(this);

            this.props.onItemPress(index, isSelected, this);

                this.props.titles + '' != nextProps.titles + '' ||

                this.props.style != nextProps.style ||

                this.props.itemStyle != nextProps.itemStyle ||

                this.props.itemTextStyle != nextProps.itemTextStyle ||

                this.props.selectedItemTextStyle != nextProps.selectedItemTextStyle ||

                this.props.selectedBorderStyle != nextProps.selectedBorderStyle;

        let {titles, pager, itemStyle, itemTextStyle, selectedItemTextStyle, selectedBorderStyle} = this.props;

        if (!titles || titles.length === 0)return null;

        let titleViews = titles.map((title, index)=> {

                        style={[styles.titleContainer, itemStyle]}

                        activeOpacity={0.6}

                        onPress={() => {this.onItemPress(pager, index, isSelected)}}

                    {isSelected ? <View style={[styles.selectedBorder, selectedBorderStyle]}/> : null}

        if (!this.state.topTitleEnabled) {

                        {this.state.topTitleValue}

            if (this.props.autoUpdateTitle && this.props.topTitleEnabled && this.props.titles && this.props.titles.length > 0) {

                this.setState({selectedIndex: e.position, topTitleValue: this.props.titles[e.position] });

                this.setState({selectedIndex: e.position});

                this.props.onPageChange(e.position, this);

        shadowOffset: {width: 0,height: 0.2},

export default class IndicatorViewPager extends Component {

        indicatorPosition: PropTypes.string,

            this.refs["indicator"].setTopTitle(newTitle);

            return this.refs[VIEWPAGER_REF].state.currentPage;

                scrollEnabled={this.props.scrollEnabled}

                style={[styles.pager, this.props.pagerStyle]}

                onPageScroll={this._onPageScroll.bind(this)}

                onPageSelected={this._onPageSelected.bind(this)}

                    {this._renderIndicator()}

        const orderedViews = this.props.indicatorPosition == 'top' ? [indicator, container] : [container, indicator];

        let indicator = this.refs[INDICATOR_REF];

        indicator && indicator.onPageScroll && indicator.onPageScroll(params);

        this.props.onPageScroll && this.props.onPageScroll(params);

        indicator && indicator.onPageSelected && indicator.onPageSelected(params);

        this.props.onPageSelected && this.props.onPageSelected(params);

        let {indicator, initialPage} = this.props;

        return React.cloneElement(indicator, {

import {StyleSheet, View, ViewPagerAndroid, ScrollView, Platform, PanResponder} from 'react-native';

export default class ViewPager extends Component {

    static propTypes = {...ViewPagerAndroid.propTypes};

    _panResponder = PanResponder.create({

        onStartShouldSetPanResponder: () => true,

        onMoveShouldSetPanResponder: () => true,

        onPanResponderGrant: () => this._setScrollState(SCROLL_STATE.dragging),

        onPanResponderRelease: () => this._setScrollState(SCROLL_STATE.settling),

        onPanResponderTerminate: () => null,

        onPanResponderTerminationRequest: (evt, gestureState) => true,

        return Platform.OS === 'ios' ? this._renderOnIOS() : (

                onPageScroll={this._onPageScrollOnAndroid.bind(this)}

                onPageSelected={this._onPageSelectedOnAndroid.bind(this)}

        if (this.props.onPageScroll) this.props.onPageScroll(e.nativeEvent);

        if (this.props.onPageSelected) this.props.onPageSelected(e.nativeEvent);

        let childrenCount = this.props.children ? this.props.children.length : 0;

        let initialPage = Math.min(Math.max(0, this.props.initialPage), childrenCount - 1);

        let needMonitorScroll = !!this.props.onPageScroll || !!this.props.onPageSelected || !!this.props.onPageScrollStateChanged;

        let needMonitorTouch = !!this.props.onPageScrollStateChanged;

            onLayout: this._onScrollViewLayout.bind(this),

            showsHorizontalScrollIndicator: false,

            showsVerticalScrollIndicator: false,

            children: this._childrenWithOverridenStyle(),

            contentOffset: {x: this.state.width * initialPage, y: 0},

            onScroll: needMonitorScroll ? this._onScrollOnIOS.bind(this) : null,

            scrollEventThrottle: needMonitorScroll ? ( this.props.onPageScroll ? 8 : 1) : 0,

        if (needMonitorTouch) props = Object.assign(props, this._panResponder.panHandlers);

          marginHorizontal: -this.props.pageMargin / 2,

        if (this.props.style && !this.props.style.height)

            return <ScrollView {...props}/>;

            return <ScrollView {...props} style={[this.props.style, scrollViewStyle]}/>;

		{
		"name": "react-native-viewpager-enhanced",
		"version": "1.1.10",
		"version": "1.1.11",
		"description": "ViewPager component for react-native, same api on both android and ios.",
		@@ -5,0 +5,0 @@ "main": "index.js",

		@@ -65,2 +65,3 @@ /**
		<TouchableOpacity
		disabled={this.props.disabled}
		style={[styles.itemContainer, isSelected ? selectedItemStyle : itemStyle]}
		@@ -125,2 +126,2 @@ activeOpacity={0.6}
		}
		});
		});

		@@ -110,2 +110,3 @@ /**
		<TouchableOpacity
		disabled={this.props.disabled}
		style={[styles.titleContainer, itemStyle]}
		@@ -233,2 +234,2 @@ activeOpacity={0.6}
		}
		});
		});

		@@ -28,5 +28,2 @@ /**
		currentPage: 0,
		/**
		* iOS not support yet
		*/
		pageMargin: 0
		@@ -89,7 +86,11 @@ };
		if (needMonitorTouch) props = Object.assign(props, this._panResponder.panHandlers);
		const scrollViewStyle = {
		overflow: 'visible',
		marginHorizontal: -this.props.pageMargin / 2,
		};
		if (this.props.style && !this.props.style.height)
		return <ScrollView {...props}/>;
		return <ScrollView {...props} style={[this.props.style, scrollViewStyle]}/>;
		else return (
		<View style={this.props.style}>
		<ScrollView {...props} style={null}/>
		<ScrollView {...props} style={scrollViewStyle}/>
		</View>
		@@ -166,2 +167,2 @@ );
		}
		}
		}

Improved metrics