Fix a huge memory issue due to expo/expo#24894

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx

@@ -31,8 +31,6 @@ import {
   TransformMatrix,
 } from '../../transforms'
 
-const AnimatedImage = Animated.createAnimatedComponent(Image)
-
 const MIN_SCREEN_ZOOM = 2
 const MAX_ORIGINAL_IMAGE_ZOOM = 2
 
@@ -344,14 +342,10 @@ const ImageItem = ({
     }
   })
 
-  const type = imageSrc.type
-  const borderRadius =
-    type === 'circle-avi' ? 1e5 : type === 'rect-avi' ? 20 : 0
   const imageStyle = useAnimatedStyle(() => {
     const {cropContentTransform} = transforms.value
     return {
       flex: 1,
-      borderRadius,
       transform: cropContentTransform,
     }
   })
@@ -371,13 +365,17 @@ const ImageItem = ({
     },
   )
 
+  const type = imageSrc.type
+  const borderRadius =
+    type === 'circle-avi' ? 1e5 : type === 'rect-avi' ? 20 : 0
+
   return (
     <GestureDetector gesture={composedGesture}>
       <Animated.View
         ref={containerRef}
         style={[styles.container]}
         renderToHardwareTextureAndroid>
-        <Animated.View style={containerStyle} renderToHardwareTextureAndroid>
+        <Animated.View style={containerStyle}>
           {showLoader && (
             <ActivityIndicator
               size="small"
@@ -385,16 +383,16 @@ const ImageItem = ({
               style={styles.loading}
             />
           )}
-          <Animated.View style={imageCropStyle} renderToHardwareTextureAndroid>
+          <Animated.View style={imageCropStyle}>
-            <AnimatedImage
+            <Animated.View style={imageStyle}>
-              renderToHardwareTextureAndroid
+              <Image
                 contentFit="cover"
                 source={{uri: imageSrc.uri}}
                 placeholderContentFit="cover"
                 placeholder={{uri: imageSrc.thumbUri}}
                 accessibilityLabel={imageSrc.alt}
                 onLoad={() => setHasLoaded(false)}
-              style={imageStyle}
+                style={{flex: 1, borderRadius}}
                 accessibilityHint=""
                 accessibilityIgnoresInvertColors
                 cachePolicy="memory"
@@ -402,6 +400,7 @@ const ImageItem = ({
             </Animated.View>
           </Animated.View>
         </Animated.View>
+      </Animated.View>
     </GestureDetector>
   )
 }

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx

@@ -30,8 +30,6 @@ import {
   Transform,
 } from '../../@types'
 
-const AnimatedImage = Animated.createAnimatedComponent(Image)
-
 const MAX_ORIGINAL_IMAGE_ZOOM = 2
 const MIN_SCREEN_ZOOM = 2
 
@@ -167,13 +165,9 @@ const ImageItem = ({
     }
   })
 
-  const type = imageSrc.type
-  const borderRadius =
-    type === 'circle-avi' ? 1e5 : type === 'rect-avi' ? 20 : 0
   const imageStyle = useAnimatedStyle(() => {
     const {cropContentTransform} = transforms.value
     return {
-      borderRadius,
       transform: cropContentTransform,
       width: '100%',
       aspectRatio: imageAspect,
@@ -195,6 +189,10 @@ const ImageItem = ({
     },
   )
 
+  const type = imageSrc.type
+  const borderRadius =
+    type === 'circle-avi' ? 1e5 : type === 'rect-avi' ? 20 : 0
+
   return (
     <GestureDetector gesture={composedGesture}>
       <Animated.ScrollView
@@ -213,20 +211,21 @@ const ImageItem = ({
           <ActivityIndicator size="small" color="#FFF" style={styles.loading} />
         )}
         <Animated.View style={imageCropStyle}>
-          <AnimatedImage
+          <Animated.View style={imageStyle}>
+            <Image
               contentFit="contain"
               source={{uri: imageSrc.uri}}
               placeholderContentFit="contain"
               placeholder={{uri: imageSrc.thumbUri}}
-            style={imageStyle}
+              style={{flex: 1, borderRadius}}
               accessibilityLabel={imageSrc.alt}
               accessibilityHint=""
               enableLiveTextInteraction={showControls && !scaled}
               accessibilityIgnoresInvertColors
               onLoad={() => setHasLoaded(true)}
-            cachePolicy="memory-disk"
             />
           </Animated.View>
+        </Animated.View>
       </Animated.ScrollView>
     </GestureDetector>
   )