From 95615d47f63203e2767d623e6710ba35ea789249 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 2 Nov 2024 19:06:31 +0000
Subject: [PATCH] Control width/height from interpolation

---
 .../ImageItem/ImageItem.android.tsx           | 34 +++++++++----------
 .../components/ImageItem/ImageItem.ios.tsx    | 34 +++++++++----------
 .../components/ImageItem/ImageItem.tsx        |  4 +--
 src/view/com/lightbox/ImageViewing/index.tsx  | 14 +++++++-
 4 files changed, 49 insertions(+), 37 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 d9f8857075..ff88ff0db6 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
@@ -1,5 +1,10 @@
 import React, {useState} from 'react'
-import {ActivityIndicator, Dimensions, StyleSheet} from 'react-native'
+import {
+  ActivityIndicator,
+  Dimensions,
+  StyleProp,
+  StyleSheet,
+} from 'react-native'
 import {
   Gesture,
   GestureDetector,
@@ -49,7 +54,7 @@ type Props = {
   isScrollViewBeingDragged: boolean
   showControls: boolean
   dismissSwipePan: PanGesture
-  animatedStyle: ImageStyle | null
+  animatedStyle: StyleProp<ImageStyle>
 }
 const ImageItem = ({
   imageSrc,
@@ -301,27 +306,22 @@ const ImageItem = ({
       <Animated.View
         ref={containerRef}
         style={[styles.container, animatedContainerStyle, {}]}>
-        <Animated.View
-          style={[
-            animatedStyle,
-            {
-              width: SCREEN.width,
-              height: imageAspect ? SCREEN.width / imageAspect : undefined,
-              borderRadius:
-                imageSrc.type === 'circle-avi'
-                  ? SCREEN.width / 2
-                  : imageSrc.type === 'rect-avi'
-                  ? 20
-                  : 0,
-            },
-          ]}>
+        <Animated.View style={animatedStyle}>
           <ActivityIndicator size="small" color="#FFF" style={styles.loading} />
           <AnimatedImage
             contentFit="contain"
             source={{uri: imageSrc.uri}}
             placeholderContentFit="contain"
             placeholder={{uri: imageSrc.thumbUri}}
-            style={{flex: 1}}
+            style={{
+              flex: 1,
+              borderRadius:
+                imageSrc.type === 'circle-avi'
+                  ? SCREEN.width / 2
+                  : imageSrc.type === 'rect-avi'
+                  ? 20
+                  : 0,
+            }}
             accessibilityLabel={imageSrc.alt}
             accessibilityHint=""
             accessibilityIgnoresInvertColors
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 5641bf6f77..6746d0d865 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
@@ -7,7 +7,12 @@
  */
 
 import React, {useState} from 'react'
-import {ActivityIndicator, Dimensions, StyleSheet} from 'react-native'
+import {
+  ActivityIndicator,
+  Dimensions,
+  StyleProp,
+  StyleSheet,
+} from 'react-native'
 import {
   Gesture,
   GestureDetector,
@@ -34,7 +39,7 @@ type Props = {
   isScrollViewBeingDragged: boolean
   showControls: boolean
   dismissSwipePan: PanGesture | null
-  animatedStyle: ImageStyle | null
+  animatedStyle: StyleProp<ImageStyle>
 }
 
 const ImageItem = ({
@@ -132,20 +137,7 @@ const ImageItem = ({
         onScroll={scrollHandler}
         bounces={scaled}
         centerContent>
-        <Animated.View
-          style={[
-            animatedStyle,
-            {
-              width: SCREEN.width,
-              height: imageAspect ? SCREEN.width / imageAspect : undefined,
-              borderRadius:
-                imageSrc.type === 'circle-avi'
-                  ? SCREEN.width / 2
-                  : imageSrc.type === 'rect-avi'
-                  ? 20
-                  : 0,
-            },
-          ]}>
+        <Animated.View style={animatedStyle}>
           <ActivityIndicator size="small" color="#FFF" style={styles.loading} />
           <AnimatedImage
             contentFit="cover"
@@ -156,7 +148,15 @@ const ImageItem = ({
             accessibilityHint=""
             enableLiveTextInteraction={showControls && !scaled}
             accessibilityIgnoresInvertColors
-            style={{flex: 1}}
+            style={{
+              flex: 1,
+              borderRadius:
+                imageSrc.type === 'circle-avi'
+                  ? SCREEN.width / 2
+                  : imageSrc.type === 'rect-avi'
+                  ? 20
+                  : 0,
+            }}
           />
         </Animated.View>
       </Animated.ScrollView>
diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx
index 7d8a8bedd4..a8ac43219e 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx
@@ -1,7 +1,7 @@
 // default implementation fallback for web
 
 import React from 'react'
-import {View} from 'react-native'
+import {StyleProp, View} from 'react-native'
 import {PanGesture} from 'react-native-gesture-handler'
 import {ImageStyle} from 'expo-image'
 
@@ -15,7 +15,7 @@ type Props = {
   isScrollViewBeingDragged: boolean
   showControls: boolean
   dismissSwipePan: PanGesture | null
-  animatedStyle: ImageStyle | null
+  animatedStyle: StyleProp<ImageStyle>
 }
 
 const ImageItem = (_props: Props) => {
diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx
index c84076d98b..d01a50a9ef 100644
--- a/src/view/com/lightbox/ImageViewing/index.tsx
+++ b/src/view/com/lightbox/ImageViewing/index.tsx
@@ -107,12 +107,20 @@ function ImageViewing({
   })
 
   const activeImageStyle = useAnimatedStyle(() => {
+    const image = images[imageIndex]
+    const imageAspect = image.dimensions
+      ? image.dimensions.width / image.dimensions.height
+      : null
+    const width = SCREEN.width
+    const height = imageAspect ? SCREEN.width / imageAspect : undefined
+
     if (openProgress.value === 1 || dismissSwipeTranslateY.value !== 0) {
       return {
         transform: [{translateY: dismissSwipeTranslateY.value}],
+        width,
+        height,
       }
     }
-    const image = images[imageIndex]
     if (image.thumbRect && image.dimensions) {
       const interpolatedTransform = interpolateTransform(
         openProgress.value,
@@ -122,10 +130,14 @@ function ImageViewing({
       )
       return {
         transform: interpolatedTransform,
+        width,
+        height,
       }
     }
     return {
       transform: [],
+      width,
+      height,
     }
   })