Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including rn-viewpager-handy with all npm packages installed. Try it out:

var rnViewpagerHandy = require("rn-viewpager-handy")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

rn-viewpager-handy v1.5.0

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

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free