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

    1.2.9 • 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 {
        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')
                },{
                    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.

    Install

    npm i rn-viewpager

    DownloadsWeekly Downloads

    1,817

    Version

    1.2.9

    License

    ISC

    Last publish

    Collaborators

    • zubintang