zbtang / React Native Viewpager
ViewPager and Indicator component for react-native on both android and ios.
Stars: ✭ 921
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to React Native Viewpager
Dsltablayout
♥️ Android界最万能的TabLayout(不仅仅是TabLayout), 支持任意类型的item, 支持Drawable类型的指示器,智能开启滚动,支持横竖向布局等
Stars: ✭ 489 (-46.91%)
Mutual labels: viewpager
Inkpageindicator
InkPageIndicator created by @nickbutcher for Plaid https://github.com/nickbutcher/plaid and backported by me for API 14+ (4.0+)
Stars: ✭ 589 (-36.05%)
Mutual labels: viewpager
Banner
轮播图控件,支持自定义布局,支持两端缩进,类似卡片,支持无限循环和多种主题,可以灵活设置轮播样式、动画、轮播和切换时间、位置、图片加载框架等!
Stars: ✭ 512 (-44.41%)
Mutual labels: viewpager
Ultraviewpager
UltraViewPager is an extension for ViewPager to provide multiple features in a single ViewPager.
Stars: ✭ 5,030 (+446.15%)
Mutual labels: viewpager
Infinitecycleviewpager
Infinite cycle ViewPager with two-way orientation and interactive effect.
Stars: ✭ 5,720 (+521.06%)
Mutual labels: viewpager
Banner Slider
Banner slider is an easy to use library for implement image sliders in android apps.
Stars: ✭ 482 (-47.67%)
Mutual labels: viewpager
Creative Viewpager
Creative View Pager easy to use in Android
Stars: ✭ 715 (-22.37%)
Mutual labels: viewpager
Bubbletab
Put some bubble in your tabs and give your apps a supa fresh style !
Stars: ✭ 537 (-41.69%)
Mutual labels: viewpager
Snaptablayout
Android library for fluid tablayout animation as seen on Snapchat.
Stars: ✭ 547 (-40.61%)
Mutual labels: viewpager
Gallerylayoutmanager
New way to implements ViewPager/Gallery in Android with RecycleView
Stars: ✭ 684 (-25.73%)
Mutual labels: viewpager
Material Viewpagerindicator
Dot-based Android ViewPager indicator with Material Design animations.
Stars: ✭ 511 (-44.52%)
Mutual labels: viewpager
Animatedbottombar
A customizable and easy to use BottomBar navigation view with sleek animations, with support for ViewPager, ViewPager2, NavController, and badges.
Stars: ✭ 797 (-13.46%)
Mutual labels: viewpager
Pageindicatorview
An page indicator for Android ViewPager
Stars: ✭ 4,498 (+388.38%)
Mutual labels: viewpager
Discretescrollview
A scrollable list of items that centers the current element and provides easy-to-use APIs for cool item animations.
Stars: ✭ 5,533 (+500.76%)
Mutual labels: viewpager
Base Mvvm
App built to showcase basic Android View components like ViewPager, RecyclerView(homogeneous and heterogeneous items), NavigationDrawer, Animated Vector Drawables, Collapsing Toolbar Layout etc. housed in a MVVM architecture
Stars: ✭ 18 (-98.05%)
Mutual labels: viewpager
Flippablestackview
An Android library introducing a stack of Views with the first item being flippable.
Stars: ✭ 807 (-12.38%)
Mutual labels: viewpager
Easyflipviewpager
📖 The library for creating book and card flip animations in ViewPager in Android
Stars: ✭ 698 (-24.21%)
Mutual labels: viewpager
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 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
Integrate into your app:
import {StyleSheet, View, Text} from 'react-native';
import React, {Component} from 'react';
import {PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from 'rn-viewpager';
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} />;
}
}
Note
When use this lib in ListView header on android platform, please add removeClippedSubviews={false}
prop to your ListView.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].