From a683c9e15f959c4e55d38820ca5b991300ddb451 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Tue, 11 Apr 2023 12:12:34 -0700 Subject: [PATCH] replace react-native-fast-image with expo-image (#452) --- package.json | 2 +- src/view/com/composer/photos/SelectedPhotos.tsx | 2 +- src/view/com/util/UserBanner.tsx | 2 +- src/view/com/util/images/AutoSizedImage.tsx | 4 ++-- src/view/com/util/images/Image.tsx | 14 +++++++------- src/view/com/util/images/ImageHorzList.tsx | 2 +- src/view/com/util/images/ImageLayoutGrid.tsx | 6 +++--- yarn.lock | 10 +++++----- 8 files changed, 21 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index a9e0b475..a9ec5f1b 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 c2a00ce5..d22f5d8c 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 56d7e370..d54b4150 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 ddb09ce3..17e3e809 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 8c95a581..e3d0d7fc 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 bed13406..40f1948d 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 a1c73264..83d98eec 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 a130ce25..34781360 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"