rn-badged-viewpager
v1.2.10
ViewPager component with badge counter on tabs for react-native, same api on both android and ios.
0/weekUpdated 3 years agoISCUnpacked: 38.2 KB
Published by ZubinTang, forked by ECarrera
npm install rn-badged-viewpagerReact-Native-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 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 {
constructor(props){
super(props);
this.state = {
// This is a static demo of the counter badge
new_messages_counter: 3
}
}
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'),
// Here we introduce our counter badge for the tab
counter: this.state.new_messages_counter
},{
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