replace react-native-fast-image with expo-image (#452)

package.json

@@ -62,6 +62,7 @@
     "expo-build-properties": "~0.5.1",
     "expo-camera": "~13.2.1",
     "expo-dev-client": "~2.1.1",
+    "expo-image": "~1.0.0",
     "expo-image-picker": "~14.1.1",
     "expo-localization": "~14.1.1",
     "expo-media-library": "~15.2.3",
@@ -95,7 +96,6 @@
     "react-native-appstate-hook": "^1.0.6",
     "react-native-background-fetch": "^4.1.8",
     "react-native-drawer-layout": "^3.2.0",
-    "react-native-fast-image": "^8.6.3",
     "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "~2.9.0",
     "react-native-get-random-values": "^1.8.0",

src/view/com/composer/photos/SelectedPhotos.tsx

@@ -1,7 +1,7 @@
 import React, {useCallback} from 'react'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import Image from 'view/com/util/images/Image'
+import {Image} from 'expo-image'
 import {colors} from 'lib/styles'
 
 export const SelectedPhotos = ({

src/view/com/util/UserBanner.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {StyleSheet, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {IconProp} from '@fortawesome/fontawesome-svg-core'
-import Image from 'view/com/util/images/Image'
+import {Image} from 'expo-image'
 import {colors} from 'lib/styles'
 import {
   openCamera,

src/view/com/util/images/AutoSizedImage.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import {
-  Image,
   StyleProp,
   StyleSheet,
   TouchableOpacity,
   View,
   ViewStyle,
 } from 'react-native'
+import {Image} from 'expo-image'
 import {clamp} from 'lib/numbers'
 import {useStores} from 'state/index'
 import {Dim} from 'lib/media/manip'
@@ -59,7 +59,7 @@ export function AutoSizedImage({
         onPressIn={onPressIn}
         delayPressIn={DELAY_PRESS_IN}
         style={[styles.container, style]}>
-        <Image style={[styles.image, {aspectRatio}]} source={{uri}} />
+        <Image style={[styles.image, {aspectRatio}]} source={uri} />
         {children}
       </TouchableOpacity>
     )

src/view/com/util/images/Image.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
-import FastImage, {FastImageProps, Source} from 'react-native-fast-image'
+import {Image, ImageProps, ImageSource} from 'expo-image'
-export default FastImage
-export type {OnLoadEvent, ImageStyle, Source} from 'react-native-fast-image'
 
-export function HighPriorityImage({source, ...props}: FastImageProps) {
+interface HighPriorityImageProps extends ImageProps {
+  source: ImageSource
+}
+export function HighPriorityImage({source, ...props}: HighPriorityImageProps) {
   const updatedSource = {
     uri: typeof source === 'object' && source ? source.uri : '',
-    priority: FastImage.priority.high,
+  } satisfies ImageSource
-  } as Source
+  return <Image source={updatedSource} {...props} />
-  return <FastImage source={updatedSource} {...props} />
 }

src/view/com/util/images/ImageHorzList.tsx

@@ -6,7 +6,7 @@ import {
   View,
   ViewStyle,
 } from 'react-native'
-import Image from 'view/com/util/images/Image'
+import {Image} from 'expo-image'
 
 export function ImageHorzList({
   uris,

src/view/com/util/images/ImageLayoutGrid.tsx

@@ -7,7 +7,7 @@ import {
   View,
   ViewStyle,
 } from 'react-native'
-import Image, {ImageStyle} from 'view/com/util/images/Image'
+import {Image, ImageStyle} from 'expo-image'
 
 export const DELAY_PRESS_IN = 500
 
@@ -73,7 +73,7 @@ function ImageLayoutGridInner({
   onPressIn?: (index: number) => void
   containerInfo: Dim
 }) {
-  const size1 = React.useMemo<StyleProp<ImageStyle>>(() => {
+  const size1 = React.useMemo<ImageStyle>(() => {
     if (type === 'three') {
       const size = (containerInfo.width - 10) / 3
       return {width: size, height: size, resizeMode: 'cover', borderRadius: 4}
@@ -82,7 +82,7 @@ function ImageLayoutGridInner({
       return {width: size, height: size, resizeMode: 'cover', borderRadius: 4}
     }
   }, [type, containerInfo])
-  const size2 = React.useMemo<StyleProp<ImageStyle>>(() => {
+  const size2 = React.useMemo<ImageStyle>(() => {
     if (type === 'three') {
       const size = ((containerInfo.width - 10) / 3) * 2 + 5
       return {width: size, height: size, resizeMode: 'cover', borderRadius: 4}

yarn.lock

@@ -8333,6 +8333,11 @@ expo-image-picker@~14.1.1:
   dependencies:
     expo-image-loader "~4.1.0"
 
+expo-image@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/expo-image/-/expo-image-1.0.0.tgz#a3670d20815d99e2527307a33761c9b0088823b1"
+  integrity sha512-A1amVExKhBa/eRXuceauYtPkf9izeje5AbxEWL09tgK91rf3GSIZXM5PSDGlIM0s7dpCV+Iet2jhwcFUfWaZrw==
+
 expo-json-utils@~0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/expo-json-utils/-/expo-json-utils-0.5.1.tgz#fcb01050b8aa66592eea2024a48979f2d090c6f9"
@@ -14642,11 +14647,6 @@ react-native-drawer-layout@^3.2.0:
   dependencies:
     use-latest-callback "^0.1.5"
 
-react-native-fast-image@^8.6.3:
-  version "8.6.3"
-  resolved "https://registry.yarnpkg.com/react-native-fast-image/-/react-native-fast-image-8.6.3.tgz#6edc3f9190092a909d636d93eecbcc54a8822255"
-  integrity sha512-Sdw4ESidXCXOmQ9EcYguNY2swyoWmx53kym2zRsvi+VeFCHEdkO+WG1DK+6W81juot40bbfLNhkc63QnWtesNg==
-
 react-native-fs@^2.20.0:
   version "2.20.0"
   resolved "https://registry.yarnpkg.com/react-native-fs/-/react-native-fs-2.20.0.tgz#05a9362b473bfc0910772c0acbb73a78dbc810f6"