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

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"
-              resizeMethod="resize"
+              contentFit="cover"
             />
           </View>
         );