race604 / react-native-viewpager Goto Github PK
View Code? Open in Web Editor NEW[Deprecated] ViewPager component for React Native
[Deprecated] ViewPager component for React Native
when only one img,
<ViewPager
isLoop={true}
autoPlay={true}
renderPage={this._renderPage}
dataSource={dataSource.cloneWithPages(this.state.data)}/>
it will show the warning message and img can not display.
So, i change isLoop and autoPlay {this.state.data.length > 1}
Requiring React API from react-native is now deprecated。
see: https://github.com/facebook/react-native/releases/tag/v0.25.1
I have read that this component works on both platforms, Android and iOS\
"This is the ViewPager componnent in React Native both for Android and iOS."
But, I've integrated react-native-viewpager in my app, its working fine on iPhone but breaks on Android devices. I'm unable to swipe through the pages on my android device.
Do anyone have working example of this component?
P.S: It breaks even if I tried to run simple Demo example of images mentioned in its Docs. I'm using react-native v0.20.
node v5.9.0
npm 3.8.3
npm install react-native-viewpager --save
get the error npm ERR! cb() never called!
Thanks for this plugin.
My app will look ok after rotating to landscape mode, however the pager will be shifted to the right when back to portrait.
I'm not seeing exactly this with your sample app : the top pager is also shifted in landscape but ok when back to portrait, while the bottom page is ok in both modes.
I want to move dots upper and make them bigger. I can do it by editing, DefaultViewPageIndicator.js file under the node modules but i know it is not right way. Is there better solution for this?
i use react-native-viewpager-es6
in ViewPager.js render():
when
pageIDs.length == 1
the lines:259/265/273, at the same time to bodyComponents.push
then:
Warning: flattenChildren(...): Encountered two children with the same key, p_0_1
. Child keys must be unique; when two children share a key, only the first child will be used.
Hello, i don't want to slide beyond the edge when loop is closed. So, again i edited files ViewPage.js file under the node_modules. Here is my code;
// ViewScript.js line: 94
onPanResponderMove: (e, gestureState) => {
var dx = gestureState.dx;
var offsetX = -dx / this.state.viewWidth + this.state.childIndex;
var currentPage = this.state.currentPage;
var pageCount = this.props.dataSource.getPageCount();
if(this.props.isLoop || (!(currentPage === 0 && offsetX < 0) && !(currentPage === (pageCount - 1) && offsetX > 1))){
this.state.scrollValue.setValue(offsetX);
}
},
Once again i know this is not a good idea. When i will run npm install
my changes will be replaced. So I did forked your project and make the changes.
Do you think, it is a good idea?
In react-native 0.25.1 following warning
Warning: ReactNative.cloneElement is deprecated. Use React.cloneElement from the "react" package instead.
Hello, thank you for this useful component. I have a problem since upgrading to RN-v0.14.0-rc (I'm not sure it's related) :
Error while loading: Unable to resolve module StaticRenderer from /Users/yosemit/Documents/Chat_Test/node_modules/react-native-viewpager/ViewPager.js: Invalid directory /Users/node_modules/StaticRenderer
Any idea what is the cause of this error? Thanks
No matter what I do, I can't seem to make it work in a ScrollView. It doesn't show up except the dots part.
I have tried all sorts of flex settings, height etc. Please help.
@race604 How can you get the data of current object being displayed?
If I set renderPageIndicator
to false, as in:
<ViewPager
renderPageIndicator={false}
( ... rest of attributes ... ) />
I get the following message:
Warning: Failed propType: Invalid prop
renderPageIndicator
of typeboolean
supplied toViewPager
, expectedfunction
.
Even though false
appears to be a valid value:
// from ViewPager.js, line 178
if (this.props.renderPageIndicator === false) {
return null;
}
Hi,
is their any way to implement fade in fade out transition between pages instead of sliding?
I followed exactly what was in the issue #13 , used exactly the same file as DefaultPageIndicators.js
you provided, I don't have any errors but the animations doesn't work, the indicators stick to the bottom without moving.
Have you tried to override page indicators on 0.17? I only see this which could be the issue.
Thanks for helping.
Like set duration to 0.5s
我翻看了你的源码,Page页的高度和指示器的高度是可以修改的,但是整体的高度要如何修改呢?
When going to a page with initialPage
and loop
the dot is at the correct place, but when rendering index 0, it point at dot 1. I had to fix manually with scrollOffset: this.childIndex || 1,
which I'm not very proud of.
Anybody experienced this ?
I saw that there is a file DefaultViewPagerIndicator.js
where I can change it but how to use it without modifying your library?
I tried to copy/paste DefaultViewPagerIndicator.js
in my project (I called it MyViewPageIndicator
) and then:
renderPageIndicator: function() {
return(
<MyViewPageIndicator />
);
},
render: function() {
global._navigator = this.props.navigator;
return (
<ViewPager
//style={this.props.style}
dataSource={this.state.dataSource}
renderPage={this._renderPage}
//onChangePage={this._onChangePage}
renderPageIndicator={() => this.renderPageIndicator()}
isLoop={false}
autoPlay={false}/>
);
},
But it doesn't take effects. Could you provide an example? If I'm going in the right way..
Regards,
how to the image in local file system
could you remove the dependency of react native? I build my project from resource, there would be conflics
I installed react-native-viewpager using npm.
Then I imported it using var ViewPager = require('react-native-viewpager');
When I tried to place your component ViewPager to render inside render() function, I got error stating "null is not an object (evaluating 'this.state.dataSource')"
Can you provide a snippet to use your component the right way in our projects? Thanks @race604 for such a component!
Is it possible?
I have followed the samples provided to implement myself but the render page function isn't being called. The onChangePage function is working correctly but my console.log() is never being triggered inside the render page and as such not displaying anything. Any reason for this @race604? Also to mention I'm not using for my datasource an array of strings but an array of objects (ie. {data: '1', data2: 2'}) but even when I try it with an array of strings it still does not work.
Hello,
i am currently working on a new Application in React Native. I used the React Native Viewpager. Everything works fine until now.
Here is my question:
I would like to get the complete amount of 'Pages' and the Index of the currently showing 'Page'. I want to add an Counter such as '5/100', so the User knows where he/she is in the 'List' of Pages.
Any Ideas for an good Solution to generate this counter??
Catch up
Alex
Hi,
I'm trying to build dynamic viewer - that can have pages added or removed.
I've set
var dataSource = new ViewPager.DataSource ({
pageHasChanged: ( p1, p2 ) => p1 !== p2
});
as a global var, and added
setState({dataSource: dataSource.cloneWithPages(this.state.pages)})
to initialState
and to add/removePage
methods.
while it is working - the performance of scrolling and adding pages is quite slow (fps around 30), making it a non-option.
I'm not sure what i'm doing wrong, sunce my renderPage
method is quite standard, and works fine (and smooth) with the native Components (ScrollView
and ViewPagerAndroid
).
It would be awesome to fire an event when the transition begins. Something like onChangePageBegin
/**
* @flow
*/
'use strict';
import React from 'react-native'
import ViewPager from 'react-native-viewpager'
var {
AppRegistry,
StyleSheet,
Text,
View,
Dimensions,
Image,
TouchableHighlight,
TouchableNativeFeedback,
TouchableOpacity,
} = React;
let {width,height} = Dimensions.get('window');
const IMGS = [
'https://images.unsplash.com/photo-1441742917377-57f78ee0e582?h=1024',
'https://images.unsplash.com/photo-1441716844725-09cedc13a4e7?h=1024',
'https://images.unsplash.com/photo-1441448770220-76743f9e6af6?h=1024',
'https://images.unsplash.com/photo-1441260038675-7329ab4cc264?h=1024',
'https://images.unsplash.com/photo-1441126270775-739547c8680c?h=1024',
'https://images.unsplash.com/photo-1440964829947-ca3277bd37f8?h=1024',
'https://images.unsplash.com/photo-1440847899694-90043f91c7f9?h=1024'
];
export default React.createClass({
getInitialState: function() {
var dataSource = new ViewPager.DataSource({
pageHasChanged: (p1, p2) => p1 !== p2,
});
return {
dataSource: dataSource.cloneWithPages(IMGS),
};
},
_onPressButton:function(id){
console.log("abc:",id)
},
render: function() {
// return (
// <TouchableOpacity onPress={this._onPressButton}>
// <Image
// source={{uri: 'https://images.unsplash.com/photo-1441448770220-76743f9e6af6?h=1024'}}
// style={styles.page} />
// </TouchableOpacity>
// )
return (
<ViewPager
style={{height:300,width:200}}
dataSource={this.state.dataSource}
renderPage={this._renderPage}
isLoop={false}
autoPlay={false}/>
);
},
_renderPage: function(
data: string,
pageID: number | string,) {
return (
<TouchableOpacity onPress={()=>this._onPressButton(pageID)}
background={TouchableNativeFeedback.SelectableBackground()}>
<Image
source={{uri: data}}
style={styles.page} />
</TouchableOpacity>
);
},
});
var styles = StyleSheet.create({
page: {
width: width,
height: 300,
},
});
pageID is not the correct one!
undefined is not an object (evaluating 'React.PropTypes.func')
Hi, This is a really nice component and I'm trying to use it in a couple of places in my app in loop mode. The problem I'm facing is that when the ViewPager loads, the indicators show that it is on the second image, but the first image is showing. Then when I attempt to scroll, it jumps to the second image and the first image scrolls in. Once the first scroll is complete, the second image reappears over the first.
It appears to be doing this in the sample app. Am I doing something wrong?
For some reason, clicking on the view on Android will go to the next slide. Is there a way to disable this? ios doesn't seem to have such 'feature'
terminal > npm install react-native-viewpager --save
npm ERR! shasum check failed for /var/folders/d4/xhw0fzps7d961t9xj0kfj_rm0000gn/T/npm-3396-44a3b066/registry.npmjs.org/react-native-viewpager/-/react-native-viewpager-0.1.6.tgz
npm ERR! Expected: 82f4543b87f6eb09036603ef27de2d14711e12f5
npm ERR! Actual: a7182df26be5eb4731295519dd8f5054f60a2c69
npm ERR! From: https://registry.npmjs.org/react-native-viewpager/-/react-native-viewpager-0.1.6.tgz
<TouchableWithoutFeedback onPress={()=>{this._onPress(this.state.currentPage)}}>
<View style={{flexDirection:'row'}}>
{bodyComponents}
_onPress(page){
let rowData = this.props.dataSource.getPageData(page);
let callBackData={'rowData':rowData,'pageNo':page};
this.props.onPress(callBackData);
Anyone have good ideas please contanct me at [email protected]
W/ReactNativeJS: Warning: flattenChildren(...): Encountered two children with the same key, .$p_0_1
. Child keys must be unique; when two children share a key, only the first child will be used.
<ViewPager
dataSource={this.state.dataSource}
locked={true}
ref={viewPager => { this.viewPager = viewPager; }}
renderPageIndicator={false}
renderPage={function(data, index){
if(index == 0) {
return (<View style={styles.page}>
<Index
headerBackgroundImage = {indexView.headerBackgroundImage}
listData = {indexView.listData}
navData = {indexView.navData}
/>
</View>);
} else if(index == 1) {
return (<View style={styles.page}>
<Detail />
</View>);
}
}
}
/>
在第二个页面绑定点击事件没有效果,触发的却是第一个页面的点击事件,如何处理
In the below code
<ViewPager
style={{flex: 1}}
dataSource={this.state.dataSource}
renderPage={this._renderPage}
autoPlay={false}/>
);
I want have a attribute to control the index in view pager, such as initialPageNum.
by @christopherabouabdo mentioned here #32
I also added in a bit of code to send the current page index to the renderPage function as a third property. This has been very helpful in my project, I'm open to discussion about leaving that in or taking it out, what do you think?
Hi I just think that would be great if goToPage have a no animation option 💯
The data will no be displayed or treated as undefined when "splice" the array from length=2 to length=1. The error could cause the app to crash.
Console shows warning message:
Warning: flattenChildren(...): Encountered two children with the same key, .$p_1
. Child keys must be unique; when two children share a key, only the first child will be used.
Do you have any example on how to change selected page programmatically?
I will rise indicator, but the point of indicator from the left and not start in the middle,
render :function () {
return (
);
},
renderIndicator:function (){
return
},
tabs: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
bottom:300,
},
How to create customized pagination?
I guess need to use renderPageIndicator, but can you provide me an example how to use it, please?
1 pictures more than 5 Loop of the first will be refresh
2 the default focus is second
Is there a way to pass the initial page shown in the viewpager (or currentPage initial value).
<ViewPager initialPage={this.props.initialPage} dataSource={this.ds.cloneWithPages(this.props.pages)} renderPage={this._renderPagefunction} />
The initial value in the ViewPager.js is hardcoded to 0
I recently submitted a PR (which was approved) that adds transitionFriction
and transitionTension
as props that control the friction and tension props of the page transition animation. I realized afterward that I would prefer to have the option to choose between animation types spring
vs timing
and pass an object containing values for whichever properties each of those animation types accepts.
Like this:
animationType
: 'spring' or 'timing'animationProps
: object
that holds the necessary properties for the animationType provided. Each property should be of the type expected by the corresponding React.Animated method or a function that accepts the gestureState of the swipe that initiated the transition and returns the expected value type.Example:
var ViewPager = require('react-native-viewpager');
<ViewPager
dataSource={this.state.dataSource}
renderPage={this._renderPage}
animationType="timing"
animationProps = {{
duration: (gs) => {
// Use the horizontal velocity of the swipe gesture
// to affect the length of the transition so the faster you swipe
// the faster the pages will transition
var velocity = Math.abs(gs.vx);
var baseDuration = 300;
return (velocity > 1) ? 1/velocity * baseDuration : baseDuration;
},
easing: Easing.out(Easing.exp)
}}
/>
I have implemented this approach in my fork of the repo which I am currently using in my project. I'd love to hear thoughts/ideas on the approach and eventually create another PR if there is interest.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.