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:
``javascript
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 (



);
}}
/>
`

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 \ and \ to \, add offer same props as ViewPagerAndroid.
- \ 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

$3

npm install --save rn-viewpager

$3

`jsx

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 (

style={{height:200}}
indicator={this._renderDotIndicator()}
>

page one


page two


page three



indicatorPosition="top"
style={{flex:1, paddingTop:20, backgroundColor:'white'}}
indicator={this._renderTitleIndicator()}
>

page one


page two


page three



indicatorPosition="bottom"
style={{flex:1, paddingTop:20, backgroundColor:'white'}}
indicator={this._renderTabIndicator()}
>

page one


page two


page three



);
}

_renderTitleIndicator() {
return ;
}

_renderDotIndicator() {
return ;
}

_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 (
tabs={tabs}
textStyle={{color:'#999'}}
selectedTextStyle={{color:'#111'}}
iconStyle={{width:25, height:25, tintColor:'#999'}}
selectedIconStyle={{width:25, height:25, tintColor:'#111'}}
/>
);
}

}
`

Note

When use this lib in ListView header on android platform, please add removeClippedSubviews={false}` prop to your ListView.