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

3 files changed, 13 insertions, 11 deletions

diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
index b900f9afe..f5e858209 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
@@ -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}
diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
index ebf0b1d28..a6b98009a 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx
@@ -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)}
diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx
index b1c1c6a2e..5d0090434 100644
--- a/src/view/com/util/post-embeds/index.tsx
+++ b/src/view/com/util/post-embeds/index.tsx
@@ -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))
         })
       }