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
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:
Add the RNCViewPagerPackage
class to your list of exported packages.
@Overrideprotected List<ReactPackage> { return Arrays.<ReactPackage>;}
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
<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"; { return <View => <IndicatorViewPager = = > <View => <Text>page one</Text> </View> <View => <Text>page two</Text> </View> <View => <Text>page three</Text> </View> </IndicatorViewPager> <IndicatorViewPager = = > <View => <Text>page one</Text> </View> <View => <Text>page two</Text> </View> <View => <Text>page three</Text> </View> </IndicatorViewPager> <IndicatorViewPager = = > <View => <Text>page one</Text> </View> <View => <Text>page two</Text> </View> <View => <Text>page three</Text> </View> </IndicatorViewPager> </View> ; } { return <PagerTitleIndicator = />; } { return <PagerDotIndicator = />; } { let tabs = text: "Home" iconSource: selectedIconSource: text: "Message" iconSource: selectedIconSource: text: "Profile" iconSource: selectedIconSource: ; return <PagerTabIndicator = />; }
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