First
This module is not mine, I forked it from ZbTang and I uploaded an enhanced version on npm called react-native-viewpager-enhanced.
Additional features:
-
Add props
indicatorPosition
direction (possible values aretop
andbottom
) -
Custom render tab titles on
PagerTitleIndicator
component -
Listen event
onItemPress(index, isSelected)
onPagerTabIndicator
andPagerTitleIndicator
-
Listen event
onPageChange(index)
onPagerTabIndicator
,PagerTitleIndicator
andPagerDotIndicator
-
Add method
getCurrentPageIndex()
onIndicatorViewPager
ref -
Add management of
topTitle[Value/Enabled/ContainerStyle/TextStyle]
, see example:
<PagerTitleIndicator ref="pageIndicator" style=backgroundColor:'#E62118' autoUpdateTitle=true topTitleValue="This title is static if autoUpdateTitle = false" topTitleEnabled=true topTitleContainerStyle=backgroundColor: '#E62118' topTitleTextStyle=color: 'white' itemsContainerStyle=backgroundColor: '#E62118' selectedBorderStyle=backgroundColor: 'white' titles=titles renderTitle= { // I can render my own tab, here I decide to render only an icon let icon = null; if index == 0 icon = ; else if index == 1 icon = ; else if index == 2 icon = ; return <View style=backgroundColor: '#E62118' flexDirection:'column' justifyContent:'center' alignItems:'center' alignSelf:'stretch'> <Image source=icon style=width:18height:18tintColor:isSelected ? 'white' : '#5F0707' /> </View> ; }/>
React-Native-ViewPager
ViewPager and Indicator component for react-native on both android and ios. ViewPager's props is the same as ViewPagerAndroid.
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 demo/
npm install
react-native run-ios
Usage
Install from npm:
npm install --save rn-viewpager
Integrate into your app:
import StyleSheet View Text from 'react-native';import React Component from 'react';import PagerTabIndicator IndicatorViewPager PagerTitleIndicator PagerDotIndicator from 'rn-viewpager'; { return <View => <IndicatorViewPager = = > <View => <Text>page one</Text> </View> <View => <Text>page two</Text> </View> <View => <Text>page three</Text> </View> </IndicatorViewPager> <IndicatorViewPager ="top" = = > <View => <Text>page one</Text> </View> <View => <Text>page two</Text> </View> <View => <Text>page three</Text> </View> </IndicatorViewPager> <IndicatorViewPager ="bottom" = = > <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.