Skip to content
React Native wrapper for the Android ViewPager.
JavaScript Java Objective-C Python Ruby
Branch: master
Clone or download
Pull request Compare This branch is 2 commits behind react-native-community:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
android
example
ios
js
typings
.flowconfig
.gitattributes
.gitignore
.npmignore
LICENSE
README.md
RNCViewpager.podspec
babel.config.js
package.json
viewpager.gif
yarn.lock

README.md

react-native-viewpager

CircleCI branch

Note: This module has been extracted from react-native as a part of the Lean Core effort.

For now, this module only works for Android. Under the hood it is using the native Android ViewPager.

Getting started

yarn add @react-native-community/viewpager

Mostly automatic installation

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

Manual installation

iOS

Not Supported.

Android

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()
  );
}

Usage

import ViewPager from "@react-native-community/viewpager";

class MyPager extends React.Component { 
  render() {
    return (
      <ViewPager
        style={styles.viewPager}
        initialPage={0}>
        <View key="1">
          <Text>First page</Text>
        </View>
        <View key="2">
          <Text>Second page</Text>
        </View>
      </ViewPager>
    );
  }
}

const styles = StyleSheet.create({
  viewPager: {
    flex: 1
  },
})
You can’t perform that action at this time.