react-native-lightbox
react-native-lightbox copied to clipboard
oblador
[Android] Fix jumpy animation
Description
The y coordinate sent by the React Native measure seems to take the StatusBar height into account. There is no need to do the subtraction anymore.
Steps to reproduce
- Run the Example on an Android device
- Touch the pig with the hat
- Before the beginning of the opening animation, the image moves suddenly few pixels upward (very fast, hard to see)
- When the lightbox is open, touch/untouch the image makes it jump vertically of few pixels too
- At the end of the closing animation, the image moves suddendly few pixels downward to fit in its container again.
With that fix, the 3 issues disappear.
CC my teammate @philtrep
@ncuillery I forked the repo and put your PR into it and I seem to be getting a flash of white at the end of the close animation for android now. Any ideas? Please see gif attached.
https://cl.ly/0E2k3f410x0n
@RossKinsella I didn't really see a white flash on your gif. I guess the bitrate of your recording is too slow. But I'm pretty sure it's the Fresco splash screen.
Fresco (the lib used by RN to handle images on Android) displays the white rectangle while your image is loaded.
Maybe you change your image source when the lightbox is opened/closed (for replacing a small thumbnail by a full-res image for example) ? If so, you should leave the image untouched and use the renderContent props instead.
@ncuillery - I can confirm @RossKinsella's issue. I'm using a standard implementation, no new render in the lightbox. You don't see it when you try?
I am also facing jumpy effect on close of image @RossKinsella i can share video for this as well.
The white flash seems to be due to a short time gap between the lightbox overlay's image hiding and the original image appearing. I did a dirty fix by running an animation in parallel to increase the lightbox's image's opacity to 1 alongside the lightbox overlay's image shrinking.
Anyone with a better alternative is greatly appreciated.
