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-renderzio/stable
parent
77178844fd
commit
331c506728
|
@ -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}
|
||||
|
|
|
@ -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)}
|
||||
|
|
|
@ -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))
|
||||
})
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue