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.
npm install --save rn-viewpager-handy
Autolinking will just do the job.
react-native link @react-native-community/viewpager
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:
include ':@react-native-community_viewpager'
project(':@react-native-community_viewpager').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/viewpager/android')
dependencies {
...
implementation project(':@react-native-community_viewpager')
}
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()
);
}
- 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
cd RNViewPagerDemo/
npm install
react-native run-ios
<IndicatorViewPager />
Component API
<PagerDotIndicator />
Component API
<PagerTabIndicator />
Component API
<PagerTitleIndicator />
Component API
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} />;
}
}
When use this lib in ListView header on android platform, please add removeClippedSubviews={false}
prop to your ListView.
this repo package's credit from https://github.com/zbtang/React-Native-ViewPager