November Perfect Moustache

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

    1.5.0 • Public • Published

    React-Native-ViewPager-Handy - Updated Version

    npm npm npm

    This repo is updated version from https://github.com/zbtang/React-Native-ViewPager

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

    Linking - React Native ViewPager Handy:

    >= 0.60

    Autolinking will just do the job.

    < 0.60

    Mostly automatic

    react-native link @react-native-community/viewpager

    Manual linking

    Manually link the library on iOS

    Follow the instructions in the React Native documentation to manually link the framework or link using Cocoapods by adding this to your Podfile:

    pod 'react-native-viewpager', :path => '../node_modules/@react-native-community/viewpager'
    Manually link the library on Android
    Make the following changes:

    android/settings.gradle

    include ':@react-native-community_viewpager'
    project(':@react-native-community_viewpager').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/viewpager/android')

    android/app/build.gradle

    dependencies {
       ...
       implementation project(':@react-native-community_viewpager')
    }

    android/app/src/main/.../MainApplication.java

    On top, where imports are:

    import com.reactnativecommunity.viewpager.RNCViewPagerPackage;

    Add the RNCViewPagerPackage class to your list of exported packages.

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new RNCViewPagerPackage()
      );
    }

    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

    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-handy

    Integrate into your app:

    import { StyleSheet, View, Text } from "react-native";
    import React, { Component } from "react";
    import {
      PagerTabIndicator,
      IndicatorViewPager,
      PagerTitleIndicator,
      PagerDotIndicator
    } from "rn-viewpager-handy";
     
    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.

    Credit:

    this repo package's credit from https://github.com/zbtang/React-Native-ViewPager

    Install

    npm i rn-viewpager-handy

    DownloadsWeekly Downloads

    23

    Version

    1.5.0

    License

    ISC

    Unpacked Size

    308 kB

    Total Files

    23

    Last publish

    Collaborators

    • handipriyono