zbtang/react-native-viewpager

ViewPager and Indicator component for react-native on both android and ios.

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

download demo apk file

Build and run the demo

cd RNViewPagerDemo/
npm install
react-native run-ios

Component API

<ViewPager /> 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.

react-native-viewpager's Issues

How to change the size of dots?

Unknown named module:'rn-viewpager'

Full screen ViewPager

Thanks for sharing this component! Right now setting flex:1 on the ViewPager doesn't make it fill the screen, seems like it needs a specific number. Would be great if it could handle that.

animation slider gets slow on every slide at end before it sets the screen

i am using this library and its working fine but the only problem is its gets slow on every slide at the end before the data holds the screen its the slower.

How to change the color of dots?

[iOS] onPageSelected doesn't get fired when scrolled too fast

Using IndicatorViewPager
If you scroll through before the page completely stops,
onPageSelected callback never gets fired.
On Android, this works as intended, where even if you scroll through fast no indexes are missed.

For instance, if you log the indexes in iOS it may show up as
1, 2, 5 where index 3 and 4 were scrolled before fully stopped.

versions:

"react": "15.4.2",
"react-native": "0.41.2",
"rn-viewpager": "^1.1.4",

Is there a way to allow zoom?

I'm using an IndicatorViewPager and I would like to allow the user to zoom on images. Is this possible?

Change page manually.

"You can call pager. setPage(selectedPageIndex) or pager.setPageWithoutAnimation(selectedPageIndex)" This is not working. I got this error: "undefined is not an object (evaluating 'this.viewPager.setPage')" .

This is the code:
`import React, { Component } from 'react';
import { View, TouchableWithoutFeedback } from 'react-native';
import { IndicatorViewPager } from 'rn-viewpager';
import { IntroOne, IntroTwo } from '@scenes/shared/Intros';

// Styles
import Styles from './styles';

export default class IntroPager extends Component {
constructor () {
super();
this.state = {page : 0};
}

render () {
return (

<IndicatorViewPager ref={viewPager => { this.viewPager = viewPager; }} style={Styles.IndicatorViewPagerStyle}>












);
}

updatePage (myPage) {
this.refs.viewPager.setPage(myPage);
}
}`

Prevent Vertical Drag

Hi I want to prevent vertical drag for pagerdotindicator. I am not sure where I can make that edit. Also there is some white space because of the indicator view pager. How can I remove that space?

Can I pass a method to be notified when the selected slide changes?

Can I pass a method to be notified when the selected slide changes?

nest into ListView header not work

nest ViewPager into ListView header,if scroll viewpager to anywhere will not auto play

PagerTitleIndicator needs option for ellipsizeMode

PagerTitleIndicator needs option for "ellipsizeMode" on text components.

Example:

Demo project doesn't work on Android

The included demo project does not work on Android as checked out from the repo.

It has a dependency on react-native-device-info which is not included. This is likely to trip up beginners who want to see the demo working in order to track down issues.

I had to follow instructions on https://github.com/rebeccahughes/react-native-device-info to download, install and link the project before the demo runs.

大神,安卓闪退

少了 com.zubintang/com.zubintang.MainActivity目录啊
导致 安卓 闪退啊,

如何禁止滑动翻页

怎么样可以禁止滑动翻页，但又不影响点击上面的title 翻页

How to make an infinite loop on the last dot ?

Hi guys when i set autplayenable true, when the dots in the last page, and it goes back to first dot seems the view inside of the dots is like reversing back not doing it like infinite loop.
how can i make it like infinite loop ? Both for slide manually and autoplay the slider.. so when goes to last page when i swipe it to right it goes to first dot, same as autoplay enable..

PagerTitleIndicator does not scroll when it has many options.

Hi,

When I add many options to the PagerTitleIndicator, this one does not fit and it does not scroll the options.

Consider renaming

There is already a much more popular package with this name:

https://www.npmjs.com/package/react-native-viewpager

However, it doesn't use native controls under the hood. Perhaps you should consider renaming to something like

react-native-viewpager-native

viewpager in viewpager

how can i use viewpager in viewpager，just like childviewpager in android

Support for disabling scroll

I was investigating using this pager as a wizard. As such I dont want the user to be able to manually swipe to the next page until all the information is complete. Is there a way in which I can disable scroll?

Looking at the code it seems like its always enabled and no way to disable.

Thanks

Implement onPageScrollStateChanged event?

is there any schedule for this feature?

How to hookup to events?

Hi i was wondering if you could help describe how the hooking up to the swipe events works?
Im quite confused about it.

http://stackoverflow.com/questions/38481282/how-to-hook-viewpager-swipe-event-up-to-update-state-react-native-android

Support for custom Icon

Currently it supports only Image as icon style in PageTabIndicator

Please add support for custom iconStyle as Icon instead of only Image. It will be flexible if prop type of iconStyle is View.

使用这个组件会报错 Encountered an error while persisting cache

你好， 使用组件会报如下这样的错误，不知道要如何解决。 react native 是 0.25， 谢谢。

transformed 543/544 (100%)[node-haste] Encountered an error while persisting cache:

SyntaxError: D:/test/index.js: Unexpected token (121:6)
119 | _renderDotIndicator()
120 | {

121 | return (
| ^
122 | <PagerDotIndicator
123 | pageCount={3}
124 | />

support for clicking on dots

Hello,

Do you plan to add support for "clicking on dots" for the swipe using dot indicators?

Thanks.

this is not available for ios when use react-navigation

this is not available for ios when use react-navigation as routes,when use goBack(),it will flash out,so what should i do

Place the tabs on top of the IndicatorViewPager

How can I move the tabs to the top?

They appear in the bottom

Is there any way to style the titles of the tabs? Changing active and inactive font color?

viewpager 的位置问题

viewpager 属性中有个 pageMargin: 0,我怎么把这个取出来另外在给它设值。
我在首页中是实用妈个 pageMargin：0，但是我在使用position TitileIndicatior位置后，把view pager给遮住了TitileIndicatior高度的一半，我是使用 view pager中的pageMargin来调整还是有什么其他的办法。

removeClippedSubviews={false} not working

The fix is not working. I am using this as a ListView Header and have set the removeClippedSubviews prop to false, but the pager still not showing. only the dotindicator is showing.

_renderOnIOS() props decelerationRate:'fast' cannot convert to number

then i delete ViewPager.js->_renderOnIOS() -> decelerationRate: 'fast', it runs OK.

my react native version is 0.19.0

TouchableHighlight doesn't appear on the screen

When I'm trying to add TouchableHighlight on the any page of the ViewPager it doesn't render on the screen.

How to set current page?

Is there a way to set the current page?

Change a page programmatically.

Hi!

Is it possible to programmatically change the page.
I want to change the page when a button is pressed.

Thanks in advance.

How to get current page?

Is it possible to get the current displayed page ?

如何实现循环滚动

下载了demo, 没有提供循环切换的功能，请问这个可以实现吗

rn-viewpager did't show when used in childrenView of react-native navigation

when i use it in a common webview rn-viewpager work, but i use a tabView from the lib of ' react-native navigation', the tabView have four children View , in the first View i use rn-viewpager and it work in imitator, but it did't work when i reload the project at once

can not scroll the page when the content exceeds the width of the screen

i have image. when my screen on landscape, screen can not scroll. while adding image becomes wide.

this is my code

const { width, height } = Dimensions.get('window')

const styles = {
image: {
width:null,

alignSelf: 'stretch',
flex: 1

}
}

import {PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from 'rn-viewpager';

export default class ViewPagerPage extends Component {
render() {

    var _scrollView: ScrollView;

    return (
        <View style={{flex:1}}>
            <IndicatorViewPager
                style={{flex:1}}
                indicator={this._renderDotIndicator()}
            >
                <View style={{backgroundColor:'cadetblue'}}>
                    <Text>page one</Text>
                </View>
                <View style={{backgroundColor:'cornflowerblue', flex:1}}>
                    <ScrollView
                      pagingEnabled = {true}
                    >
                    <Image style={styles.image} source={require('./img/2.jpg')} /> // **<-- this is my question**
                    </ScrollView>
                </View>
                <View style={{backgroundColor:'#1AA094'}}>
                    <Text>page three</Text>
                </View>
            </IndicatorViewPager>


        </View>
    );
}


_renderDotIndicator() {
    return <PagerDotIndicator pageCount={3} />;
}

}

How i can add autoplay in this ViewPager?

Hi, i realy liked this ViewPager, but i need to add autoplay feature here. Is it possible, can you write some code example for autoplay? Thanks!

如何能支持滚出框的时候裁减掉view

我的IndicatorViewPager不是全屏的，向左滑的话第一页会滑出边框。如下图，能否提供一个思路来修改可以支持不是全屏的ViewPager.谢谢

Android: ViewPager loses scroll anchors

Hi,

if you are using an IndicatorViewPager in combination with a navigator (in my case react-native-navigation), the ViewPager loses the scroll anchors. To be more specific: lets say the view pager is our root view. When you now push a view on the navigator and pop it again, the view pager is scrolling contiously. This only occurs on android.

Does anyone have an idea here?

Regards,
Malte

[iOS] onPageSelected firing twice

Using IndicatorViewPager in iOS
onPageSelected callback is firing twice every page view.

versions

"rn-viewpager": "^1.1.4",
"react": "15.4.2",
"react-native": "0.41.2",

pagingEnabled for android is supported since 0.28

Assuming this was the original reason to create this package, it looks like pagingEnabled/horizontal is supported in Android now

<ScrollView pagingEnabled={true}>

Is the main reason to use this library for paging controls? Why use ViewPagerAndroid at all? That would be a helpful addition to the docs.

是否可以支持 设置offset 看到下一页的一部分

Problems when used inside a ListView

<ListView
        renderHeader = {this.starter}
        dataSource={this.state.dataSource2}
...etc
/>
...
starter()
{
    return (
        <View style = {{flex: 1}}>
            <ProfileCard/>
            <IndicatorViewPager style={{height: height/2.75}}>
                <View>
                    <TelcoMainCard/>
                </View>
                <View>
                    <TelcoPlanSingle/>
                </View>
                <View>
                    <ServicesCardMain/>
                </View>
                <View>
                    <MyDeviceCard/>
                </View>
            </IndicatorViewPager>
        </View>
    );
},

This is some of the extracted code from one of my files.
(1) The IndicatorViewPager shows nothing until i change the size of another component at runtime (there is a button on the screen that changes a box's height, in the listview. The button and the box are not within IndicatorViewPager).

(2)Also, if i scroll down too much in the listView's rendered items and then come up to the IndicatorViewPager, it stops acting like View Pager and works like a normal ScrollView, until i click that button again.

More info: The box's size changes by changing the height of another view using the state.
e.g.
height: this.state.boxHeight and then i change the height using setState.
The box is ProfileCard in the code i pasted above.

problem with ViewPager and Drawer( side menu) on IOS

for ex : there 4 tabs for ViewPager, if swipe while opening Drawer , position-values is changed, how does fix one? It seems that swiping(open Drawer) change position of Tabs in ViewPager

是否支持IndicatorViewPager嵌套，目前测试显示有问题

 render() {
        return (
            <Animated.View style={{flex: 1}}>



            <IndicatorViewPager
            style={{flex: 1}}
            indicator={this._renderTabIndicator()}
            onPageScroll={this._onPageScroll.bind(this)}
            initialPage={0}
            >

            <View>
            <IndicatorViewPager
            style={{flex: 1}}
            indicator={this._renderIndicator()}
            onPageScroll={this._onNormalPageScroll.bind(this)}
            >

             <View>
            <Text>page 1</Text>
            </View>

            <View>
            <Text>page 2</Text>
            </View>

            <View>
            <Text>page 3</Text>
            </View>

            <View>
            <Text>page 4</Text>
            </View>

            </IndicatorViewPager>
            </View>




            <View style={{backgroundColor:'cornflowerblue'}}>
            <Text>page two</Text>
            </View>

            <View style={{backgroundColor:'#1AA094'}}>
            <Text>page three</Text>
            </View>

            </IndicatorViewPager>
            </Animated.View>
            );
}

外层为tab，内层为nod，内层不用View包裹时，
滑动时，底部的position不对，第一个ViewPager中的小圆点不显示；

如果用View包裹里面的IndicatorViewPager后，里面的viewpager中内容无法显示，只显示4个小圆点。

在ScrollView组件下嵌套IndicatorViewPager 想实现轮播图的效果，但不成功

你好， 页面可以显示，但是IndicatorViewPager不能切换页面，手势滑动没效果。不知有没有办法解决，谢谢。

Is auto scroll and looping pages supported in this module?

Support for Pull to refresh

Viewpager should have have a pull to refresh view like refresh control

Manually swiping pages does not work on Android

Swiping the pages manually (for example in the demo app, but also in my own projects) results in the error:

Cannot read property 'onPageSelected' of undefined

Object._onPageSelectedOnAndroid [as onPageSelected]
    ...ViewPager.js:72:23
ViewPagerAndroid._this_.onPageSelected
    ...ViewPagerAndroid.android.js:201:17

Otherwise the demo code works great with the automatic scrolling, the tab switching and the bottom tab bar. It is just the manual swiping which does not work.

I have tried to pass onPageSelected() function into props but was unable to get that working.