Image not loading on swipe (#114)

* Adds prefetching to images

* Adds image prefetch

* bugfix for images not showing on swipe

* Fixes prefetch bug

* Update src/view/com/util/PostEmbeds.tsx

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

src/view/com/lightbox/ImageViewing/index.tsx

@@ -108,9 +108,6 @@ function ImageViewing({
           data={images}
           horizontal
           pagingEnabled
-          windowSize={2}
-          initialNumToRender={1}
-          maxToRenderPerBatch={1}
           showsHorizontalScrollIndicator={false}
           showsVerticalScrollIndicator={false}
           initialScrollIndex={imageIndex}

src/view/com/util/PostEmbeds.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {StyleSheet, StyleProp, View, ViewStyle} from 'react-native'
+import {StyleSheet, StyleProp, View, ViewStyle, Image} from 'react-native'
 import {AppBskyEmbedImages, AppBskyEmbedExternal} from '@atproto/api'
 import LinearGradient from 'react-native-linear-gradient'
 import {Link} from '../util/Link'
@@ -35,6 +35,16 @@ export function PostEmbeds({
       const onLongPress = (index: number) => {
         saveImageModal({uri: uris[index]})
       }
+      const onPressIn = (index: number) => {
+        const firstImageToShow = uris[index]
+        Image.prefetch(firstImageToShow)
+        uris.forEach(uri => {
+          if (firstImageToShow !== uri) {
+            // First image already prefeched above
+            Image.prefetch(uri)
+          }
+        })
+      }
 
       if (embed.images.length === 4) {
         return (
@@ -44,6 +54,7 @@ export function PostEmbeds({
               uris={embed.images.map(img => img.thumb)}
               onPress={openLightbox}
               onLongPress={onLongPress}
+              onPressIn={onPressIn}
             />
           </View>
         )
@@ -55,6 +66,7 @@ export function PostEmbeds({
               uris={embed.images.map(img => img.thumb)}
               onPress={openLightbox}
               onLongPress={onLongPress}
+              onPressIn={onPressIn}
             />
           </View>
         )
@@ -66,6 +78,7 @@ export function PostEmbeds({
               uris={embed.images.map(img => img.thumb)}
               onPress={openLightbox}
               onLongPress={onLongPress}
+              onPressIn={onPressIn}
             />
           </View>
         )
@@ -76,6 +89,7 @@ export function PostEmbeds({
               uri={embed.images[0].thumb}
               onPress={() => openLightbox(0)}
               onLongPress={() => onLongPress(0)}
+              onPressIn={() => onPressIn(0)}
               containerStyle={styles.singleImage}
             />
           </View>

src/view/com/util/images/AutoSizedImage.tsx

@@ -25,6 +25,7 @@ export function AutoSizedImage({
   uri,
   onPress,
   onLongPress,
+  onPressIn,
   style,
   containerStyle,
 }: {
@@ -85,6 +86,7 @@ export function AutoSizedImage({
       <TouchableOpacity
         onPress={onPress}
         onLongPress={onLongPress}
+        onPressIn={onPressIn}
         delayPressIn={DELAY_PRESS_IN}>
         {error ? (
           <View style={[styles.errorContainer, errPal.view, containerStyle]}>

src/view/com/util/images/ImageLayoutGrid.tsx

@@ -23,11 +23,14 @@ export function ImageLayoutGrid({
   uris,
   onPress,
   onLongPress,
+  onPressIn,
   style,
 }: {
   type: ImageLayoutGridType
   uris: string[]
   onPress?: (index: number) => void
+  onLongPress?: (index: number) => void
+  onPressIn?: (index: number) => void
   style?: StyleProp<ViewStyle>
 }) {
   const [containerInfo, setContainerInfo] = React.useState<Dim | undefined>()
@@ -46,6 +49,7 @@ export function ImageLayoutGrid({
           type={type}
           uris={uris}
           onPress={onPress}
+          onPressIn={onPressIn}
           onLongPress={onLongPress}
           containerInfo={containerInfo}
         />
@@ -59,11 +63,14 @@ function ImageLayoutGridInner({
   uris,
   onPress,
   onLongPress,
+  onPressIn,
   containerInfo,
 }: {
   type: ImageLayoutGridType
   uris: string[]
   onPress?: (index: number) => void
+  onLongPress?: (index: number) => void
+  onPressIn?: (index: number) => void
   containerInfo: Dim
 }) {
   const size1 = React.useMemo<ImageStyle>(() => {
@@ -91,6 +98,7 @@ function ImageLayoutGridInner({
         <TouchableOpacity
           delayPressIn={DELAY_PRESS_IN}
           onPress={() => onPress?.(0)}
+          onPressIn={() => onPressIn?.(0)}
           onLongPress={() => onLongPress(0)}>
           <Image source={{uri: uris[0]}} style={size1} />
         </TouchableOpacity>
@@ -98,6 +106,7 @@ function ImageLayoutGridInner({
         <TouchableOpacity
           delayPressIn={DELAY_PRESS_IN}
           onPress={() => onPress?.(1)}
+          onPressIn={() => onPressIn?.(1)}
           onLongPress={() => onLongPress(1)}>
           <Image source={{uri: uris[1]}} style={size1} />
         </TouchableOpacity>
@@ -110,6 +119,7 @@ function ImageLayoutGridInner({
         <TouchableOpacity
           delayPressIn={DELAY_PRESS_IN}
           onPress={() => onPress?.(0)}
+          onPressIn={() => onPressIn?.(0)}
           onLongPress={() => onLongPress(0)}>
           <Image source={{uri: uris[0]}} style={size2} />
         </TouchableOpacity>
@@ -118,6 +128,7 @@ function ImageLayoutGridInner({
           <TouchableOpacity
             delayPressIn={DELAY_PRESS_IN}
             onPress={() => onPress?.(1)}
+            onPressIn={() => onPressIn?.(1)}
             onLongPress={() => onLongPress(1)}>
             <Image source={{uri: uris[1]}} style={size1} />
           </TouchableOpacity>
@@ -125,6 +136,7 @@ function ImageLayoutGridInner({
           <TouchableOpacity
             delayPressIn={DELAY_PRESS_IN}
             onPress={() => onPress?.(2)}
+            onPressIn={() => onPressIn?.(2)}
             onLongPress={() => onLongPress(2)}>
             <Image source={{uri: uris[2]}} style={size1} />
           </TouchableOpacity>
@@ -139,6 +151,7 @@ function ImageLayoutGridInner({
           <TouchableOpacity
             delayPressIn={DELAY_PRESS_IN}
             onPress={() => onPress?.(0)}
+            onPressIn={() => onPressIn?.(0)}
             onLongPress={() => onLongPress(0)}>
             <Image source={{uri: uris[0]}} style={size1} />
           </TouchableOpacity>
@@ -146,6 +159,7 @@ function ImageLayoutGridInner({
           <TouchableOpacity
             delayPressIn={DELAY_PRESS_IN}
             onPress={() => onPress?.(1)}
+            onPressIn={() => onPressIn?.(1)}
             onLongPress={() => onLongPress(1)}>
             <Image source={{uri: uris[1]}} style={size1} />
           </TouchableOpacity>
@@ -155,6 +169,7 @@ function ImageLayoutGridInner({
           <TouchableOpacity
             delayPressIn={DELAY_PRESS_IN}
             onPress={() => onPress?.(2)}
+            onPressIn={() => onPressIn?.(2)}
             onLongPress={() => onLongPress(2)}>
             <Image source={{uri: uris[2]}} style={size1} />
           </TouchableOpacity>
@@ -162,6 +177,7 @@ function ImageLayoutGridInner({
           <TouchableOpacity
             delayPressIn={DELAY_PRESS_IN}
             onPress={() => onPress?.(3)}
+            onPressIn={() => onPressIn?.(3)}
             onLongPress={() => onLongPress(3)}>
             <Image source={{uri: uris[3]}} style={size1} />
           </TouchableOpacity>