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 RNViewPagerDemo/
npm install
react-native run-ios
`

Component API

Component API

Component API

Component API

Component API

Component API

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



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

page one


page two


page three



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 ;
}

}
`

Note

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