leecade
Update the state breaks the slides.
Which OS ?
MAC OS
Version
Which versions are you using: ^1.6.0-nightly.3
- react-native-swiper v?
- react-native v0.59.5
Hello Guys, I am using Swiper like this:
renderThumb() {
return (
<Swiper style={styles.wrapper} showsButtons={false} horizontal={false} showsPagination={false} loop={false} onIndexChanged={this.onSlideIndexUpdate} onMomentumScrollEnd={() => { console.log('on touch end') }}>
{this.state.cachedThumbnails.map((thumb) => {
console.log('HERE THUMB', thumb)
return (
<View key={thumb.key} style={styles.thumbnailContainer}>
<Loader loading={this.state.showThumbnail} withBackground={false} showLoadingText={false} />
<Image
source={{ uri: thumb.thumbLink }}
style={styles.backgroundVideo}
resizeMode='cover'
/>
</View>
);
})}
</Swiper>
);
};
Every time when the state is changed, the component is re-rendered, but the slide is pushed up and the next slide is seeing from the bottom, as showed here in the image:
Please note, this happens only on the images with index>0. If I swipe to the first slide, the slide is ok.
I'm experiencing something very similar. Everything works great until I add onIndexChanged.
My code looks something like this:
function (props: Props) {
const questions = idx(props, _ => _.viewer.findSurvey.questions) || [];
const name = idx(props, _ => _.viewer.findSurvey.name);
const [page, setCurrentPage] = React.useState(0)
console.log({ page })
return (
<Shell title={name}>
<Swiper
showsVerticalScrollIndicator={true}
horizontal={false}
loop={false}
showsPagination={false}
onIndexChanged={page => setCurrentPage(page)}
>
{questions.map(item => {
return (
<View ...
Using Expo and the latest version of this library.
Happy to share more if it's helpful!
Thank you. I am going to test it and report back to you later today.
On Fri, 6 Sep 2019 at 20:39, Jack Hanford [email protected] wrote:
@ochikov https://github.com/ochikov I went back to version 1.5.6 and this stopped happening
— You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/leecade/react-native-swiper/issues/1053?email_source=notifications&email_token=ADHVGEVIE6KEZVA4OU5NYR3QIKIVJA5CNFSM4IT6ACL2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6DRK6Y#issuecomment-528946555, or mute the thread https://github.com/notifications/unsubscribe-auth/ADHVGERFHQWSG46KTGA64GDQIKIVJANCNFSM4IT6ACLQ .
@ochikov let me know what you find, i’m planning on potentially forking and removing all of the features i don’t need to try and narrow down the problem
I'm using a heavily modified version of the plugin, but if it's helpful here it is: https://gist.github.com/hanford/973d7d2a4bab09b1e559fac6dfae9c5d .. I removed a lot of code, looping, autoplay, etc
I think one of the big differences is this specific modification: https://gist.github.com/hanford/973d7d2a4bab09b1e559fac6dfae9c5d#file-swiper-js-L418
Having worked with various versions of this Swiper over the last month, I can confirm that there is definitely something not right with the very latest versions and I've had to settle on v. 1.5.14. The issue seems to be around the new 'scrollTo' methods that get in a muddle when updating the slides with dynamic content or changing their length on the fly.
Occasionally, when updating the state of the page (and causing a re-render), the 'onIndexChanged' is getting fired off, and reports an index of -1. Any attempt to update state within the callback triggers it to fire off yet again and go to -2 / -3 ad infinitum.
I think this new 'scrollTo' thing needs a lot more serious thought and testing, as it seems too unreliable for my liking at present.
@edanedison, I also think a lot more testing is necessary, so I add e2e test now 🤔. Feel free to add the bad cases for you under https://github.com/leecade/react-native-swiper/tree/develop/examples/e2e.
Thanks @ochikov I downgraded to 1.5.5 and it fixed my issue whereby my slides were automatically half swiping (possibly due to state change)
P.S. 1.5.6 wasn't available in the versions list (npm view
Downgrade to 1.5.5 helped for me too. I had the problem only in iOS and with versions 1.5.13 and 1.5.7. (I guess all versions between are not working either?)
I am using react-native-swiper in two places ("tutorial" and "achievements") in my project. 1.5.13 is working correctly also with iOS in the tutorial but in the achievements this problem occurred. Differences with these use cases are atleast that:
- Usage is quite static in tutorial. Only fullscreen slides with dots. Achievements use onMomentumScrollEnd to set state of an index.
- Achievements use also ref and scrollBy-method and it takes only part of the screen and is used inside Modal
Can confirm that setState inside onIndexChanged is one way to cause broken pagination. Downgrading to 1.5.5 caused other errors. Had to remove setState for now and the header dynamic link location functionality until this is fixed.
As it stands the lib seems completely unusable due to this. Building from @hanford 's advice, the following seems to fix the issue on the latest version. https://github.com/kyle-ssg/react-native-swiper/commit/eeddedb4205d28c79853f8d39b2fa5750d254069#diff-1fdf421c05c1140f6d71444ea2b27638
Looks like some internal state values aren't being included when rendering, maybe it could just use this.internals.offset. Added a PR for this.
It is in a pr indeed @zabojad https://github.com/leecade/react-native-swiper/pull/1091
As it stands the lib seems completely unusable due to this.
@kyle-ssg Hello, which version did your fix solve the problem for? because even now with 1.6.0 the issue still exists on iOS
Hi @hshbaklo my PR is still open, so looks like the code was never merged.
@kyle-ssg yes I know. but since it worked for you, I am trying to understand what versions you had when it worked. if you can share your React , react-native and react-native-swiper you had when it worked for you would be great. just for reference: react-native: 61.5 react:16.9 react-native-swiper:1.6.0 problem on iOS only for us. Note that the swiper is in a view which has right and left padding. when we removed the padding and allowed the swiper to take full screen width, this issue was not solved 100%, but the offset on each slide because almost unnoticeable and only with large number of swipes it can show. So hopefully a permanent fix can be make
I'm facing this problem as well. @Jalson1982 solution works for me. Thanks
Strange, as @Jalson1982 mentionned, loadMinimal={true} seems to workaround the problem...
