replace react-native-fast-image with expo-image (#452)
parent
14c8473210
commit
a683c9e15f
|
@ -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",
|
||||
|
|
|
@ -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 = ({
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
|
|
|
@ -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 <FastImage source={updatedSource} {...props} />
|
||||
} satisfies ImageSource
|
||||
return <Image source={updatedSource} {...props} />
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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}
|
||||
|
|
10
yarn.lock
10
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"
|
||||
|
|
Loading…
Reference in New Issue