diff --git a/package.json b/package.json
index a9e0b47588..a9ec5f1b1d 100644
--- a/package.json
+++ b/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",
diff --git a/src/view/com/composer/photos/SelectedPhotos.tsx b/src/view/com/composer/photos/SelectedPhotos.tsx
index c2a00ce53d..d22f5d8c4a 100644
--- a/src/view/com/composer/photos/SelectedPhotos.tsx
+++ b/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 = ({
diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx
index 56d7e370a7..d54b415064 100644
--- a/src/view/com/util/UserBanner.tsx
+++ b/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,
diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx
index ddb09ce39c..17e3e809b2 100644
--- a/src/view/com/util/images/AutoSizedImage.tsx
+++ b/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]}>
-
+
{children}
)
diff --git a/src/view/com/util/images/Image.tsx b/src/view/com/util/images/Image.tsx
index 8c95a581e9..e3d0d7fcc2 100644
--- a/src/view/com/util/images/Image.tsx
+++ b/src/view/com/util/images/Image.tsx
@@ -1,12 +1,12 @@
import React from 'react'
-import FastImage, {FastImageProps, Source} from 'react-native-fast-image'
-export default FastImage
-export type {OnLoadEvent, ImageStyle, Source} from 'react-native-fast-image'
+import {Image, ImageProps, ImageSource} from 'expo-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,
- } as Source
- return
+ } satisfies ImageSource
+ return
}
diff --git a/src/view/com/util/images/ImageHorzList.tsx b/src/view/com/util/images/ImageHorzList.tsx
index bed13406c0..40f1948d69 100644
--- a/src/view/com/util/images/ImageHorzList.tsx
+++ b/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,
diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx
index a1c732649d..83d98eec54 100644
--- a/src/view/com/util/images/ImageLayoutGrid.tsx
+++ b/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>(() => {
+ const size1 = React.useMemo(() => {
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>(() => {
+ const size2 = React.useMemo(() => {
if (type === 'three') {
const size = ((containerInfo.width - 10) / 3) * 2 + 5
return {width: size, height: size, resizeMode: 'cover', borderRadius: 4}
diff --git a/yarn.lock b/yarn.lock
index a130ce2545..34781360a9 100644
--- a/yarn.lock
+++ b/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"