Migrate from react-native Image to expo-image to permanently resolve Android OutOfMemory crashes with massive local photo decodes

package-lock.json

@@ -16,6 +16,7 @@
         "expo-build-properties": "~1.0.10",
         "expo-camera": "~17.0.10",
         "expo-file-system": "~19.0.23",
+        "expo-image": "~3.0.11",
         "expo-image-manipulator": "~14.0.8",
         "expo-linear-gradient": "~15.0.8",
         "expo-media-library": "~18.2.1",
@@ -4671,6 +4672,23 @@
         "react-native": "*"
       }
     },
+    "node_modules/expo-image": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/expo-image/-/expo-image-3.0.11.tgz",
+      "integrity": "sha512-4TudfUCLgYgENv+f48omnU8tjS2S0Pd9EaON5/s1ZUBRwZ7K8acEr4NfvLPSaeXvxW24iLAiyQ7sV7BXQH3RoA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*",
+        "react": "*",
+        "react-native": "*",
+        "react-native-web": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-native-web": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/expo-image-loader": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/expo-image-loader/-/expo-image-loader-6.0.0.tgz",

package.json

@@ -11,6 +11,7 @@
     "expo-build-properties": "~1.0.10",
     "expo-camera": "~17.0.10",
     "expo-file-system": "~19.0.23",
+    "expo-image": "~3.0.11",
     "expo-image-manipulator": "~14.0.8",
     "expo-linear-gradient": "~15.0.8",
     "expo-media-library": "~18.2.1",

src/screens/PreviewScreen.tsx

@@ -3,11 +3,11 @@ import {
   StyleSheet,
   Text,
   View,
-  Image,
   TouchableOpacity,
   ActivityIndicator,
 } from 'react-native';
 import ViewShot from 'react-native-view-shot';
+import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
@@ -320,7 +320,7 @@ export default function PreviewScreen({
           <View style={[styles.collageCanvas, styles.stripCanvas]}>
             <View style={styles.stripContent}>
               {photoUris.slice(-3).map((uri, idx) => (
-                <Image key={idx} source={{ uri }} style={styles.stripImage} resizeMethod="resize" />
+                <Image key={idx} source={uri} style={styles.stripImage} contentFit="cover" />
               ))}
             </View>
             <View style={styles.collageFooter}>
@@ -334,7 +334,7 @@ export default function PreviewScreen({
           <View style={[styles.collageCanvas, styles.gridCanvas]}>
             <View style={styles.gridContainer}>
               {photoUris.slice(-4).map((uri, idx) => (
-                <Image key={idx} source={{ uri }} style={styles.gridImage} resizeMethod="resize" />
+                <Image key={idx} source={uri} style={styles.gridImage} contentFit="cover" />
               ))}
             </View>
             <View style={styles.collageFooter}>
@@ -347,7 +347,7 @@ export default function PreviewScreen({
           <View style={[styles.collageCanvas, styles.duoCanvas]}>
             <View style={styles.duoContainer}>
               {photoUris.slice(-2).map((uri, idx) => (
-                <Image key={idx} source={{ uri }} style={styles.duoImage} resizeMethod="resize" />
+                <Image key={idx} source={uri} style={styles.duoImage} contentFit="cover" />
               ))}
             </View>
             <View style={styles.collageFooter}>
@@ -359,10 +359,9 @@ export default function PreviewScreen({
         return (
           <View style={styles.singleCanvas}>
             <Image
-              source={{ uri: currentPhoto }}
+              source={currentPhoto}
               style={styles.singleImage}
-              resizeMode="cover"
+              contentFit="cover"
-              resizeMethod="resize"
             />
           </View>
         );