Merge pull request #33860 from bernhardoj/fix/33625-receipt-image-blink

Fix receipt image blink when opening it the first time
Expensify · Mar 5, 2024 · b501f84 · b501f84
2 parents b921221 + d15ea1b
commit b501f84
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/src/components/MultiGestureCanvas/index.tsx b/src/components/MultiGestureCanvas/index.tsx
@@ -51,9 +51,11 @@ type MultiGestureCanvasProps = ChildrenProps & {
     onSwipeDown?: OnSwipeDownCallback;
 };
 
+const defaultContentSize = {width: 1, height: 1};
+
 function MultiGestureCanvas({
     canvasSize,
-    contentSize = {width: 1, height: 1},
+    contentSize: contentSizeProp,
     zoomRange: zoomRangeProp,
     isActive = true,
     children,
@@ -66,6 +68,7 @@ function MultiGestureCanvas({
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
 
+    const contentSize = contentSizeProp ?? defaultContentSize;
     const shouldDisableTransformationGesturesFallback = useSharedValue(false);
     const shouldDisableTransformationGestures = shouldDisableTransformationGesturesProp ?? shouldDisableTransformationGesturesFallback;
 
@@ -224,6 +227,8 @@ function MultiGestureCanvas({
                 },
                 {scale: totalScale.value},
             ],
+            // Hide the image if the size is not ready yet
+            opacity: contentSizeProp?.width ? 1 : 0,
         };
     });