React-native-viewpager-enhanced NPM

First

This module is not mine, I forked it from ZbTang and I uploaded an enhanced version on npm called react-native-viewpager-enhanced.

Additional features:

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:

<PagerTitleIndicator
    ref="pageIndicator"
    style={{backgroundColor:'#E62118'}}
    autoUpdateTitle={true}
    topTitleValue="This title is static if autoUpdateTitle = false"
    topTitleEnabled={true}
    topTitleContainerStyle={{backgroundColor: '#E62118'}}
    topTitleTextStyle={{color: 'white'}}
    itemsContainerStyle={{backgroundColor: '#E62118'}}
    selectedBorderStyle={{backgroundColor: 'white'}}
    titles={titles}
    renderTitle={(index, title, isSelected) => {
        // I can render my own tab, here I decide to render only an icon
        
        let icon = null;
        
        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');
        
        return (
            <View style={{backgroundColor: '#E62118', flexDirection:'column', justifyContent:'center', alignItems:'center', alignSelf:'stretch'}}>
                <Image source={icon} style={{width:18,height:18,tintColor:isSelected ? 'white' : '#5F0707'}} />
            </View>
        );
    }}
/>

React-Native-ViewPager

ViewPager and Indicator component for react-native on both android and ios. ViewPager's props is the same as ViewPagerAndroid.

Features

unify \<ViewPagerAndroid> and \ to \<ViewPager>, add offer same props as ViewPagerAndroid.
\<IndicatorViewPager> component support render indicator
implement common indicator: DotIndicator, TitleIndicator and TabIndicator

Preview

download demo apk file

Build and run the demo

cd demo/
npm install
react-native run-ios

Usage

Install from npm:

npm install --save rn-viewpager

Integrate into your app:

import {StyleSheet, View, Text} from 'react-native';
import React, {Component} from 'react';
import {PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from 'rn-viewpager';

export default class ViewPagerPage extends Component {
    render() {
        return (
            <View style={{flex:1}}>
                <IndicatorViewPager
                    style={{height:200}}
                    indicator={this._renderDotIndicator()}
                >
                    <View style={{backgroundColor:'cadetblue'}}>
                        <Text>page one</Text>
                    </View>
                    <View style={{backgroundColor:'cornflowerblue'}}>
                        <Text>page two</Text>
                    </View>
                    <View style={{backgroundColor:'#1AA094'}}>
                        <Text>page three</Text>
                    </View>
                </IndicatorViewPager>

                <IndicatorViewPager
                    indicatorPosition="top"
                    style={{flex:1, paddingTop:20, backgroundColor:'white'}}
                    indicator={this._renderTitleIndicator()}
                >
                    <View style={{backgroundColor:'cadetblue'}}>
                        <Text>page one</Text>
                    </View>
                    <View style={{backgroundColor:'cornflowerblue'}}>
                        <Text>page two</Text>
                    </View>
                    <View style={{backgroundColor:'#1AA094'}}>
                        <Text>page three</Text>
                    </View>
                </IndicatorViewPager>
                
                <IndicatorViewPager
                    indicatorPosition="bottom"
                    style={{flex:1, paddingTop:20, backgroundColor:'white'}}
                    indicator={this._renderTabIndicator()}
                >
                    <View style={{backgroundColor:'cadetblue'}}>
                        <Text>page one</Text>
                    </View>
                    <View style={{backgroundColor:'cornflowerblue'}}>
                        <Text>page two</Text>
                    </View>
                    <View style={{backgroundColor:'#1AA094'}}>
                        <Text>page three</Text>
                    </View>
                </IndicatorViewPager>
            </View>
        );
    }

    _renderTitleIndicator() {
        return <PagerTitleIndicator titles={['one', 'two', 'three']} />;
    }

    _renderDotIndicator() {
        return <PagerDotIndicator pageCount={3} />;
    }
    
    _renderTabIndicator() {
        let tabs = [{
                text: 'Home',
                iconSource: require('../imgs/ic_tab_home_normal.png'),
                selectedIconSource: require('../imgs/ic_tab_home_click.png')
            },{
                text: 'Message',
                iconSource: require('../imgs/ic_tab_task_normal.png'),
                selectedIconSource: require('../imgs/ic_tab_task_click.png')
            },{
                text: 'Profile',
                iconSource: require('../imgs/ic_tab_my_normal.png'),
                selectedIconSource: require('../imgs/ic_tab_my_click.png')
        }];
        return (
            <PagerTabIndicator
                tabs={tabs}
                textStyle={{color:'#999'}}
                selectedTextStyle={{color:'#111'}}
                iconStyle={{width:25, height:25, tintColor:'#999'}}
                selectedIconStyle={{width:25, height:25, tintColor:'#111'}}
            />
        );
    }

}