Question: Fast Snapping Animation on Android

[bobmulder]

Hi there,

Thanks for the lib! Unfortunately not that much stars, but I just tried your lib. I kind a copy/pasted your example into my app and experienced a sort of 'animation-skip' when swiping too fast.

I know this is not much info, but I'm not able to drop my code at this moment. Beside that I used your example (and added some more children).

It would be nice if we can fix this :)

Greetz,

Bob

[zachgibson]

Hey Bob! Are you using an Android to test this?

[bobmulder]

Hi @zachgibson, thats true, sorry for the missing detail! Are you able to 'reproduce' it?

[zachgibson]

@bobmulder I have a hunch, try this:

set parallaxStrength={40}
set all backgroundImage={'https://source.unsplash.com/user/erondu/300x600'}

[bobmulder]

Did it. Did you? Try to swipe very 'lightly' or fast. The border spacing will show quickely, but the swipe-animation wont be visible. Its too fast...

[zachgibson]

Yeah I know what you’re referring to. Interestingly I might’ve just found a good solution. ViewPagerAndroid is a native Android UI that has much smoother and slower scroll animation. I’ll look into implementing this because I think it might greatly improve how this feels on Android.

Thanks for creating this issue, not sure if I would’ve come to this conclusion otherwise. I’ll ping you when I have something working!

[bobmulder]

Great, thanks for your feedback! So do you have any idea how this works on iOS? When do you think you have something working? Good luck and thank you very much!

[zachgibson]

IMO it works great on iOS. I’m primarily an iOS user so I’m more familiar with the platform. I’ll take a look and should have something by this week.

[bobmulder]

Great! I am working on an app for Android and iOS, so I'll be able to let you know how it feels on both platforms with shared code! Good luck!

[zachgibson]

Turns out this is harder than I had anticipated. ViewPagerAndroid has an onPageScroll method with a callback containing offset. But offset goes from 0 to 1 for each page, not an accumulating value like ScrollView’s contentOffset. I have parallax working for the active page but the previous or next page aren’t translating like they should. I’ll keep experimenting to see if I can get this working.

[bobmulder]

Hi @zachgibson,

Thank you for your response. Is there anything I can do? Can you share your code at a sub-branch?

Are you at Gitter for a chat?

Good luck, and above all have fun ;)

[zachgibson]

@bobmulder Sure let’s both see if we can come up with a solution. I’ll make a branch with my code. Here’s the Gitter channel. And yes I’m still having fun! Learning a lot too.

[bobmulder]

What if we would remove the parallax thing first, would the main issue be fixed then? Just to focus on what's the issue now ;)

[zachgibson]

Looked into this some more and currently I don’t have a solution for leveraging ViewPagerAndroid. The way react-native-parallax-swiper works is you animate the previous, current, and next page based on a scroll offset that accumulates. ViewPagerAndroid however doesn’t have an accumulating offset value, it gets reset to 0 on each page.

Also to clarify something, the 'Animation skipping' you are referring to is not a bug, it’s just a really fast scroll. Check out Twitter Moments on Android for reference.

[zachgibson]

Closing this in favor of issue #12.

[bobmulder]

Your response is clear, I understand this isn't a bug but a fast scroll. I'll dive into the Animated lib from React Native to discover if we can limit the animation speed...

[bobmulder]

Is there an update on this? I am still facing this 'issue'. When I swipe too fast (or too quick) the animation is 'skipped'. This is just not acceptable for production apps. If you prefer I can drop a video!

[zachgibson]

@bobmulder I don’t have any time currently to look at this. PRs are welcome though! Look into Animated’s add method. The problem is Android ViewPager resets the scroll offset to 0 at every new page.

[zachgibson]

I think we could use Animated.add to calculate the new Animated.Value at every new page using index * (pageWidth + dividerWidth). This will only work for horizontal swipers.

[bobmulder]

Thank you for reopening Zach! I really see the value of this library, but for professional use this is a too big issue ;)

About your suggestion, can you open a PR to see if this is working? I honestly don't have an idea to fix this... I can hang on later.

[zachgibson]

De-prioritizing this for now.

[bobmulder]

I've dived into this issue but can't fix it. While the animation is still buggy on Android this library is useless to me for production-ready apps.