rn-badged-viewpager
TypeScript icon, indicating that this package has built-in type declarations

1.2.10 • Public • Published

React-Native-ViewPager

npm npm npm

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

Features

  • unify <ViewPagerAndroid> and <ScrollView pagingEnabled={true}> 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 RNViewPagerDemo/
npm install
react-native run-ios

Component API

<ViewPager /> Component API

<IndicatorViewPager /> Component API

<PagerDotIndicator /> Component API

<PagerTabIndicator /> Component API

<PagerTitleIndicator /> Component API

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 {
 
    constructor(props){
        super(props);
        this.state = {
 
            // This is a static demo of the counter badge
            new_messages_counter: 3
        }
    }
 
    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
                    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
                    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'),
                
 
                // 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 <PagerTabIndicator tabs={tabs} />;
    }
 
}

Note

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

Package Sidebar

Install

npm i rn-badged-viewpager

Weekly Downloads

0

Version

1.2.10

License

ISC

Unpacked Size

38.2 kB

Total Files

16

Last publish

Collaborators

  • ecarrera