react-native-best-viewpager
v1.0.4
View pager for react native projects, use for android and ios
react-native-best-viewpagerreact-native-view-pagerreact-native-componentreact-componentreact-nativeiosandroidviewpagerpagerpageview
53/weekUpdated 3 years agoMITUnpacked: 1.8 MB
Published by arvin_abbas_
npm install react-native-best-viewpagerreact-native-best-viewpager
  
ViewPager and Indicator component for react-native on both android and ios. ViewPager's props is the same as ViewPagerAndroid.
Features
- unify \
- \
- 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
Usage
$3
npm install --save react-native-best-viewpager
$3
jsx import {StyleSheet, View, Text} from 'react-native';
import React, {Component} from 'react';
import {PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from 'react-native-best-viewpager';
export default class ViewPagerPage extends Component {
render() {
return (
indicator={this._renderDotIndicator()}
>
page one
page two
page three
indicator={this._renderTitleIndicator()}
>
page one
page two
page three
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