React-Native-ViewPager-Handy - Updated Version

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

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'

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