Socket
Socket
Sign inDemoInstall

react-native-viewpager-enhanced

Package Overview
Dependencies
0
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-viewpager-enhanced

ViewPager component for react-native, same api on both android and ios.


Version published
Maintainers
1
Weekly downloads
2
decreased by-60%

Weekly downloads

Readme

Source

First

This module is not mine, I forked it from ZbTang and I uploaded an enhanced version on npm called react-native-viewpager-enhanced.

Additional features:

  • Add props indicatorPosition direction (possible values are top and bottom)

  • Custom render tab titles on PagerTitleIndicator component

  • Listen event onItemPress(index, isSelected) on PagerTabIndicator and PagerTitleIndicator

  • Listen event onPageChange(index) on PagerTabIndicator, PagerTitleIndicator and PagerDotIndicator

  • Add method getCurrentPageIndex() on IndicatorViewPager ref

  • Add management of topTitle[Value/Enabled/ContainerStyle/TextStyle], see example:

<PagerTitleIndicator
    ref="pageIndicator"
    style={{backgroundColor:'#E62118'}}
    autoUpdateTitle={true}
    topTitleValue="This title is static if autoUpdateTitle = false"
    topTitleEnabled={true}
    topTitleContainerStyle={{backgroundColor: '#E62118'}}
    topTitleTextStyle={{color: 'white'}}
    itemsContainerStyle={{backgroundColor: '#E62118'}}
    selectedBorderStyle={{backgroundColor: 'white'}}
    titles={titles}
    renderTitle={(index, title, isSelected) => {
        // I can render my own tab, here I decide to render only an icon
        
        let icon = null;
        
        if (index == 0) icon = require('../img/menu-0.png');
        else if (index == 1) icon = require('../img/menu-1.png');
        else if (index == 2) icon = require('../img/menu-2.png');
        
        return (
            <View style={{backgroundColor: '#E62118', flexDirection:'column', justifyContent:'center', alignItems:'center', alignSelf:'stretch'}}>
                <Image source={icon} style={{width:18,height:18,tintColor:isSelected ? 'white' : '#5F0707'}} />
            </View>
        );
    }}
/>

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

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
                    indicatorPosition="top"
                    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
                    indicatorPosition="bottom"
                    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}
                textStyle={{color:'#999'}}
                selectedTextStyle={{color:'#111'}}
                iconStyle={{width:25, height:25, tintColor:'#999'}}
                selectedIconStyle={{width:25, height:25, tintColor:'#111'}}
            />
        );
    }

}

Note

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

Keywords

FAQs

Last updated on 14 Apr 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc