Replace outdated `react-native-photo-view` library.

[chrisbobbe]

In d873e22, we pointed to a commit on this project's master branch that hadn't been released at the time, which was September 21, 2018. It still hasn't been released—in fact, there haven't been any commits after that date.

Right now, if I do yarn upgrade && yarn yarn-deduplicate && yarn, Android fails to build (looks like it's something to do with the Android Support Library; it reminds me of 01cf598 and 48ef40d). edit: I've seen this kind of build failure a few times; clearing node_modules and running yarn—and making sure the jetify step of tools/postinstall gets run—has cleared it up so far.

Unfortunately, I haven't found an obvious choice for a replacement lightbox library. Here are some candidates:

• react-native-lightbox (GitHub, npm). I recognize the author's name, at least—they run react-native-vector-icons. Looks like pinch-to-zoom isn't supported (though there's Pinch to zoom oblador/react-native-lightbox#5 from 2015 for it), and it's not super frequently maintained.
• Brent Vatne (who's quite active in the React Native ecosystem) says, on an Expo feature request page, that react-native-reanimated (GitHub, npm) can be used for a lightbox with pinch-and-zoom. react-native-reanimated v2 is a reimplementation of the RN Animated library entirely in JavaScript (blog post: "Therefore, we wanted for the next Reanimated to allow for building animations and interactions using just JavaScript."). I tried out the lightbox example on the iOS simulator, following the instructions, and pinch-and-zoom didn't work. It animated from a small thumbnail into a size that covered the screen, but once it was there, I couldn't zoom in at all (you can use the option key to do a pinch gesture in the simulator).

There is a major concern about both of these options, though. From the GIFs showing react-native-lightbox in action, and from seeing the demo with react-native-reanimated, both of them have the lightbox opening from a smooth animation from a React Native-land thumbnail to fill the screen. It really like this animation (and we'd get to solve #4039 for free). But the thumbnails we're showing aren't in React Native-land, they're in the WebView. I don't see how we can somehow overlay a React Native-land thumbnail on the message list and have it scroll with everything else...

I wonder if it's time to take another look at #3426? That seems pretty dramatic; maybe let's try something else before it comes to that.

[gnprice]

From the GIFs showing react-native-lightbox in action, and from seeing the demo with react-native-reanimated, both of them have the lightbox opening from a smooth animation from a React Native-land thumbnail to fill the screen.

I see, yeah -- and checking the example app for react-native-lightbox, at least, there's this odd thing where the component called Lightbox is actually the one you're supposed to use for the thumbnail (and it just takes care of taking over the screen when selected.)

For the other library, looking at that lightbox example you linked, there's quite a lot of detail required in the example. It seems like -- well, fitting the library's name and purpose:

React Native Reanimated provides a more comprehensive, low level abstraction for the Animated library API to be built on top of and hence allow for much greater flexibility especially when it comes to gesture based interactions.

it provides some low-level pieces that could be used to build a lightbox, but there'd be significant work to do to actually make one. And the fact that the example doesn't actually work means it doesn't take us super far as a starting point.

Here's a third candidate:

• Start maintaining a fork of react-native-photo-view. We wouldn't need to do much up front -- just fix the specific things that get in our way. Then we'd also have the option of making other changes directly in the future, as we saw fit.

Oh, and another:

• Looking at the forks of that repo, there's one that jumps out as having a number of forks of its own: https://github.com/aMarCruz/react-native-photo-view-ex and it's also on NPM, as react-native-photo-view-ex. Perhaps try that one? And even if we end up making our own changes, it might be convenient to start from that one.

  (Most "forks" exist just to submit a PR or two, because of GitHub's peculiarities -- but forks which have their own forks are therefore usually forks that people have been sending PRs to, which is a sign that they're actually maintained as "forks" in the normal non-GitHub sense.)

[aryanshridhar]

Hey , How about using react-native-image-pan-zoom ( npm , Github )
The reason I am pointing out is because it can handle both , i.e Pinch to Zoom as well as Swiping an image down to close it as mentioned in #4039 .

In fact , looking at the props supported by it , onSwipeDown ( function that fires when user swipes down ) is the one we are looking for ( Passing handlePressBack function within onSwipeDown callback )

Would love to know what y'all think about it .

Edit : In fact , I tried implementing the same ( just a basic prototype ) and here's the gif of what I came up with :