fix prefetching lightbox images (#1163)

* fix prefetching lightbox images

* use array signature

* fix other RN native image usage

* delay prefetching to allow UI to re-render
zio/stable
Eric Bailey 2023-08-15 14:53:03 -05:00 committed by GitHub
parent 77178844fd
commit 331c506728
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 11 deletions

View File

@ -17,6 +17,7 @@ import {
NativeSyntheticEvent,
NativeMethodsMixin,
} from 'react-native'
import {Image} from 'expo-image'
import useImageDimensions from '../../hooks/useImageDimensions'
import usePanResponder from '../../hooks/usePanResponder'
@ -41,6 +42,8 @@ type Props = {
doubleTapToZoomEnabled?: boolean
}
const AnimatedImage = Animated.createAnimatedComponent(Image)
const ImageItem = ({
imageSrc,
onZoom,
@ -128,7 +131,7 @@ const ImageItem = ({
onScroll,
onScrollEndDrag,
})}>
<Animated.Image
<AnimatedImage
{...panHandlers}
source={imageSrc}
style={imageStylesWithOpacity}

View File

@ -18,6 +18,7 @@ import {
NativeSyntheticEvent,
TouchableWithoutFeedback,
} from 'react-native'
import {Image} from 'expo-image'
import useDoubleTapToZoom from '../../hooks/useDoubleTapToZoom'
import useImageDimensions from '../../hooks/useImageDimensions'
@ -42,6 +43,8 @@ type Props = {
doubleTapToZoomEnabled?: boolean
}
const AnimatedImage = Animated.createAnimatedComponent(Image)
const ImageItem = ({
imageSrc,
onZoom,
@ -131,7 +134,7 @@ const ImageItem = ({
accessibilityRole="image"
accessibilityLabel={imageSrc.alt}
accessibilityHint="">
<Animated.Image
<AnimatedImage
source={imageSrc}
style={imageStylesWithOpacity}
onLoad={() => setLoaded(true)}

View File

@ -4,9 +4,10 @@ import {
StyleProp,
View,
ViewStyle,
Image as RNImage,
Text,
InteractionManager,
} from 'react-native'
import {Image} from 'expo-image'
import {
AppBskyEmbedImages,
AppBskyEmbedExternal,
@ -95,14 +96,9 @@ export function PostEmbeds({
const openLightbox = (index: number) => {
store.shell.openLightbox(new ImagesLightbox(items, index))
}
const onPressIn = (index: number) => {
const firstImageToShow = items[index].uri
RNImage.prefetch(firstImageToShow)
items.forEach(item => {
if (firstImageToShow !== item.uri) {
// First image already prefetched above
RNImage.prefetch(item.uri)
}
const onPressIn = (_: number) => {
InteractionManager.runAfterInteractions(() => {
Image.prefetch(items.map(i => i.uri))
})
}