react-native-manga-reader-app icon indicating copy to clipboard operation
react-native-manga-reader-app copied to clipboard

Add Pinch to Zoom

Open agilgur5 opened this issue 4 years ago • 0 comments

This isn't necessarily a "must have" but is "very good to have". I keep forgetting about it and then see a big 2-pager and realize I can't zoom it 😕

When zoomed, it must also be pannable. Perhaps require zooming out all the way to change pages? Or, a more advanced way, when one is panned all the way to one side and then pans some more, change pages.

Of course, we already have two interactions on the Page view, changing pages and the "hold" to see menu. The "hold" was meant to just be a single tap (hold is definitely unintuitive), but I couldn't get single tap plus paging to work simultaneously in the initial version. This might be a good time to fix that as well.

This might require adding manual interactions and Animated to work. In which case, we'd probably need to use react-native-gesture-handler's cross-handler interactions to implement. I'm not sure if there are simpler, cross-platform components or libraries that handle all of these interactions for you.

  • RN's ScrollView does have min and max zoom built-in, but only for iOS...
  • react-native-image-zoom handles some of this, but seems to unmaintained
  • same with react-native-photo-view
  • react-native-image-viewer seems fairly maintained and handles more, but not sure if everything. It also depends on image-zoom, which doesn't seem to be maintained (same developer)
  • react-native-gallery-swiper seems very close to optimal, but from the docs I'm not sure how to ensure it always starts fully zoomed out or how to choose swipe direction. Like image-viewer it also supports headers/footers so it has a lot of the functionality out-of-the-box (including parts I already implemented).
  • react-native-image-view seems to handle less than the above 2

agilgur5 avatar Oct 28 '19 22:10 agilgur5