-
Notifications
You must be signed in to change notification settings - Fork 2.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
viewPagerAndroid not working after push and back #1317
Comments
Is the onPress triggering JS side? |
I'm having the same issue, whenever I push a view and then come back no |
That is the ViewPagerAndroid 's bug I think , and I solve that by using react-native-tab-view ' s TabViewPagerPan https://github.com/react-native-community/react-native-tab-view |
still happens with the suggested library or any other, including https://github.com/leecade/react-native-swiper and the funny thing is that it only happens on Android, IOS works just fine. If I instead of |
I am also experiencing this issue. |
So the way I solved it is that on android instead of doing a push and pop I did a show and dismiss modal |
Its a bug in ViewPagerAndroid . In ios its works fine as its based on ScrollView .Any library that implements ViewPagerAndroid ,same problem will occur . Using Modal instead of push will work , but not a good solution. |
this is a critical bug towards android app using viewpager, please help support this ticket guys |
@dzunglht You can try something like this: import React, { PureComponent } from 'react';
import {
View,
Dimensions,
} from 'react-native';
export default class ViewPagerWrapper extends PureComponent {
constructor(props) {
super(props);
this.props.navigator &&
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
}
onNavigatorEvent (event) {
switch(event.id) {
case 'willAppear':
this._reattach();
break;
}
}
state = {
width: Dimensions.get('window').width,
}
render() {
return (
<View style={[this.props.style, { flex: 1 }]}>
<View style={{ width: this.state.width, flex: 1 }}>
{this.props.children}
</View>
</View>
)
}
_x = 0.5
_reattach = () => {
this.setState({
width: this.state.width - this._x,
}, () => {
this._x *= -1;
});
} and then use: <ViewPagerWrapper navigator={this.props.navigator}>
<YourAwesomeComponent>
//Component that uses ViewPagerAndroid
...
</YourAwesomeComponent>
</ViewPagerWrapper> Maybe this is not most elegant solution, but it works for me. |
@guyca Please have an official fix asap, this is such a critical bug, above way doesn't work. |
look at this https://github.com/jykun/react-native-swiper.git, i change viewPageAndroid to scrollView. |
@meow0703 @dzunglht Can you guys upload an example where the bug is reproducible? I doubt this is a bug in RNN, it's probably an issue in the actual component which will require a PR to RN. |
I just came here to confirm that this happens to me too. |
@guyca Steps to reproduce:
|
Dear folks, |
Dear wix team , can you make a alternative viewPager component to
ViewPagerAndroid . ViewpagerAndroid has only few features that doesnot
include pagePadding or snapped carousel like features . I know
react-native-navigation has a built in Viewpager class used for TopTabs
scrolling . So please create a top lavel Viewpager Component .
@guyca please , think about it.
…On 03-Jul-2017 3:09 PM, "dzunglht" ***@***.***> wrote:
Dear folks,
8 days passed, we're looking for your official fix asap
Many thanks
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#1317 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AKYl_wb7kdKCC-wsDdOATDhSUm8NBNiSks5sKLbqgaJpZM4Nt0y9>
.
|
@ALL @guyca Please have a look on below elegant library (built for react-native in mind) and refer how efficiently they use their viewPager, we should extend and/or make use of their effort. Hope that help. |
@guyca where are you now, when we have official fix for the ticket ? |
If you guys are waiting on this internally or something then I'd try and look at alternative options for now, there is no timeline on when this will be fixed. |
Hey guys I managed to take some time today to look into this issue. I think this is actually a bug in the native We can easily trick the system into measuring and going through the entire layout cycle of the ViewPager (essentially invalidating the view) by changing the dimensions of the export default class ViewPagerAndroidScreen extends React.Component {
constructor(props) {
super(props);
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
this.state = {
visible: true
}
}
onNavigatorEvent(event) {
if (event.id === 'willAppear') {
this.setState({
visible: true
});
}
if (event.id === 'willDisappear') {
this.setState({
visible: false
});
}
}
render() {
return (
<ViewPagerAndroid
style={[styles.viewPager, {flex: this.state.visible ? 1 : 0}]}>
<View>
<Text>First page</Text>
</View>
<View>
<Text>Second page</Text>
</View>
</ViewPagerAndroid>
);
}
} Perhaps we can introduce a property to |
Thanx @guyca . Finally . What a relief . Can you please please build a library or include in react-native-navigation for Snapped RecyclerView . I haven't found any library for Recyclerview in react-native especially for a horizontal swiper that play-store uses . |
The above solution didn't work for me. I went ahead and used a Modal and it worked flawlessly. |
@andrerfneves Modal is displayed over current screen - so the ViewPager isn't detached from window (which is the root cause of this bug) |
@guyca I'm aware of the reason why Modals work. I'm stating that the solution you provided above didn't work for me, aka re-render/calculating height/width again didn't solve my use cause. Just in case other people go through the trouble of implementing your solution. |
I'm here to confirm that @guyca's solution works. Thanks! |
I am using https://github.com/archriss/react-native-snap-carousel as an alternative and it is working pretty well. |
@kelvinpompey the reason for using viewPagerAndroid (or any control based on it) is that RefreshControl does not work with paged ScrollView |
@guyca when we have the official fix in next release ? Newbiews don't have time to search out this ticket |
I confirm @guyca solution fixes the issue with React-Native-ViewPager on Android. I'm using this to only use the fix on Android const flex = Platform.select({ios: {flex: 1}, android: {flex: this.state.visible ? 1 : 0}});
<ViewPager style={{...flex}}/> |
You can
All changes in The problem will be repaired But when multiple pages exist, the graphics memory will be high Because all pages are displayed on the page Do anyone have a better solution? I'm a JavaScript code farm native code that isn't very well understood. |
@janiokq How did you use a custom class for your ViewPager, please explain how to do |
@janiokq Good work finding the problem - is this a solution that works for you? And if so, please could you explain how we can do the same? |
@t2n3qqq this solution works for me. But if you have multiple carousel/ViewpagerAndroid in a screen then instead of
|
In case anyone is still encountering this issue while using react-native-tab-view, I would suggest using PagerScroll instead of PagerAndroid, unless you really need PagerAndroid for some reason. I am developing an app for both iOS and Android and initially chose PagerScroll for iOS and PagerAndroid for Android and encountered this unexpected bug only on Android. After some research I thought I'd just try changing the pager and thus far it seems to work flawlessly. Hope this might help someone! |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. |
The issue has been closed for inactivity. |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. |
The issue has been closed for inactivity. |
Hi everyone, The library I've found an easy SOLUTION that made my app run without any problem. I just had to tell the
Also you may want to pass this prop too:
this will evade some conflicts for example when you are using side drawers on 'react-native-navigation' because they appear by swiping too. |
Hi! Can someone guide me how to pass react-native-navigation screens (
|
I use react-native-tab-view , and push to a view ,and back to the last view , the viewPagerAndroid's touch is not working , and the Tab Button clicks without effect
Android:7.0,5.0
react-native : 0.44,
react-native-navigation:1.1.80
The text was updated successfully, but these errors were encountered: