rn-viewpager-handy
v1.5.0
ViewPager component for react-native, same api on both android and ios.
12/weekUpdated 3 years agoISCUnpacked: 308.4 KB
Published by Handi Priyono
npm install rn-viewpager-handyReact-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:
$3
Autolinking will just do the job.
$3
#### 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:
``ruby`
pod 'react-native-viewpager', :path => '../node_modules/@react-native-community/viewpager'
Manually link the library on Android
Make the following changes:
#### android/settings.gradle
`groovy`
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
`groovy`
dependencies {
...
implementation project(':@react-native-community_viewpager')
}
#### android/app/src/main/.../MainApplication.java
On top, where imports are:
`java`
import com.reactnativecommunity.viewpager.RNCViewPagerPackage;
Add the RNCViewPagerPackage class to your list of exported packages.
`java`
@Override
protected List
return Arrays.
new MainReactPackage(),
new RNCViewPagerPackage()
);
}
Features
- unify \
- \
- implement common indicator: DotIndicator, TitleIndicator and TabIndicator
Preview
Build and run the demo
`
cd RNViewPagerDemo/
npm install
react-native run-ios
Component API
Usage
$3
npm install --save rn-viewpager-handy
$3
`jsx
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 (
indicator={this._renderDotIndicator()}
>
indicator={this._renderTitleIndicator()}
>
indicator={this._renderTabIndicator()}
>
);
}
_renderTitleIndicator() {
return
}
_renderDotIndicator() {
return
}
_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
}
}
`
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