ascoders / react-native-image-viewer

🚀 tiny & fast lib for react native image viewer pan and zoom
MIT License
2.44k stars 577 forks source link

Made scrolling smooth on Android when parent updates index prop during pan #399

Open hsource opened 4 years ago

hsource commented 4 years ago

Motivation

When a user releases a photo while panning on Android, the next image isn't smoothly animated in.

Cause/debugging

  1. Prerequisite: Use ImageViewer in a controlled way - update the index prop from within the onChange handler of the parent component
  2. The user releases a pan and this starts an animation in goNext or goPrevious, which also calls the onChange handler
  3. In the parent's onChange callback, the parent updates the index. this causes componentDidUpdate to call jumpToCurrentImage
  4. Even though we're already animating to the right image, jumpToCurrentImage calls setValue, which immediately cancels the animation

Fix

Make jumpToCurrentImage not call setValue if it's already animating to the right place

Testing

In a test app on Android:

Before After
Android before pan Android pan after
hsource commented 3 years ago

@ArtemKolichenkov, @ascoders - could you take a look? We'd love to merge this and stop using our own fork of this repository