From eab9bb82af915e1f088fb856f35c9708c935f073 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 8 Nov 2024 23:51:57 +0000
Subject: [PATCH] Fix last frame flash

---
 .../components/ImageItem/ImageItem.android.tsx      |  4 +++-
 .../components/ImageItem/ImageItem.ios.tsx          |  4 +++-
 .../ImageViewing/components/ImageItem/ImageItem.tsx |  1 +
 src/view/com/lightbox/ImageViewing/index.tsx        | 13 +++++++++++++
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
index 04693ca1e5..069f9eb40b 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
@@ -58,6 +58,7 @@ type Props = {
       cropFrameTransform: Transform
       cropContentTransform: Transform
       isResting: boolean
+      isHidden: boolean
     }>
   >
 }
@@ -310,7 +311,7 @@ const ImageItem = ({
       )
 
   const containerStyle = useAnimatedStyle(() => {
-    const {scaleAndMoveTransform} = transforms.value
+    const {scaleAndMoveTransform, isHidden} = transforms.value
     // Apply the active adjustments on top of the committed transform before the gestures.
     // This is matrix multiplication, so operations are applied in the reverse order.
     let t = createTransform()
@@ -325,6 +326,7 @@ const ImageItem = ({
     ]
     const screenSize = measureSafeArea()
     return {
+      opacity: isHidden ? 0 : 1,
       transform: scaleAndMoveTransform.concat(manipulationTransform),
       width: screenSize.width,
       maxHeight: screenSize.height,
diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
index 8c1f69a720..7a9a18b91b 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
@@ -55,6 +55,7 @@ type Props = {
       cropFrameTransform: Transform
       cropContentTransform: Transform
       isResting: boolean
+      isHidden: boolean
     }>
   >
 }
@@ -145,10 +146,11 @@ const ImageItem = ({
   )
 
   const containerStyle = useAnimatedStyle(() => {
-    const {scaleAndMoveTransform} = transforms.value
+    const {scaleAndMoveTransform, isHidden} = transforms.value
     return {
       flex: 1,
       transform: scaleAndMoveTransform,
+      opacity: isHidden ? 0 : 1,
     }
   })
 
diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx
index fbece6eed5..543fad7726 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx
@@ -33,6 +33,7 @@ type Props = {
       cropFrameTransform: Transform
       cropContentTransform: Transform
       isResting: boolean
+      isHidden: boolean
     }>
   >
 }
diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx
index 43ef677766..030c8dcf30 100644
--- a/src/view/com/lightbox/ImageViewing/index.tsx
+++ b/src/view/com/lightbox/ImageViewing/index.tsx
@@ -382,6 +382,16 @@ function LightboxImage({
     const dismissTranslateY =
       isActive && openProgress.value === 1 ? dismissSwipeTranslateY.value : 0
 
+    if (openProgress.value === 0 && isFlyingAway.value) {
+      return {
+        isHidden: true,
+        isResting: false,
+        scaleAndMoveTransform: [],
+        cropFrameTransform: [],
+        cropContentTransform: [],
+      }
+    }
+
     if (isActive && thumbRect && imageAspect && openProgress.value < 1) {
       return interpolateTransform(
         openProgress.value,
@@ -391,6 +401,7 @@ function LightboxImage({
       )
     }
     return {
+      isHidden: false,
       isResting: dismissTranslateY === 0,
       scaleAndMoveTransform: [{translateY: dismissTranslateY}],
       cropFrameTransform: [],
@@ -628,6 +639,7 @@ function interpolateTransform(
   cropFrameTransform: Transform
   cropContentTransform: Transform
   isResting: boolean
+  isHidden: boolean
 } {
   'worklet'
   const thumbAspect = thumbnailDims.width / thumbnailDims.height
@@ -678,6 +690,7 @@ function interpolateTransform(
     [croppedFinalHeight / finalHeight, 1],
   )
   return {
+    isHidden: false,
     isResting: progress === 1,
     scaleAndMoveTransform: [{translateX}, {translateY}, {scale}],
     cropFrameTransform: [{scaleX: cropScaleX}, {scaleY: cropScaleY}],