diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx index fdaafe737b..b886d83e4d 100644 --- a/src/view/com/lightbox/ImageViewing/index.tsx +++ b/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} diff --git a/src/view/com/util/PostEmbeds.tsx b/src/view/com/util/PostEmbeds.tsx index 1d8df038be..f4d8258215 100644 --- a/src/view/com/util/PostEmbeds.tsx +++ b/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} /> ) @@ -55,6 +66,7 @@ export function PostEmbeds({ uris={embed.images.map(img => img.thumb)} onPress={openLightbox} onLongPress={onLongPress} + onPressIn={onPressIn} /> ) @@ -66,6 +78,7 @@ export function PostEmbeds({ uris={embed.images.map(img => img.thumb)} onPress={openLightbox} onLongPress={onLongPress} + onPressIn={onPressIn} /> ) @@ -76,6 +89,7 @@ export function PostEmbeds({ uri={embed.images[0].thumb} onPress={() => openLightbox(0)} onLongPress={() => onLongPress(0)} + onPressIn={() => onPressIn(0)} containerStyle={styles.singleImage} /> diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx index cedd3bc902..32401b62b7 100644 --- a/src/view/com/util/images/AutoSizedImage.tsx +++ b/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({ {error ? ( diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx index dd0ea37754..f2f1560785 100644 --- a/src/view/com/util/images/ImageLayoutGrid.tsx +++ b/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 }) { const [containerInfo, setContainerInfo] = React.useState() @@ -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(() => { @@ -91,6 +98,7 @@ function ImageLayoutGridInner({ onPress?.(0)} + onPressIn={() => onPressIn?.(0)} onLongPress={() => onLongPress(0)}> @@ -98,6 +106,7 @@ function ImageLayoutGridInner({ onPress?.(1)} + onPressIn={() => onPressIn?.(1)} onLongPress={() => onLongPress(1)}> @@ -110,6 +119,7 @@ function ImageLayoutGridInner({ onPress?.(0)} + onPressIn={() => onPressIn?.(0)} onLongPress={() => onLongPress(0)}> @@ -118,6 +128,7 @@ function ImageLayoutGridInner({ onPress?.(1)} + onPressIn={() => onPressIn?.(1)} onLongPress={() => onLongPress(1)}> @@ -125,6 +136,7 @@ function ImageLayoutGridInner({ onPress?.(2)} + onPressIn={() => onPressIn?.(2)} onLongPress={() => onLongPress(2)}> @@ -139,6 +151,7 @@ function ImageLayoutGridInner({ onPress?.(0)} + onPressIn={() => onPressIn?.(0)} onLongPress={() => onLongPress(0)}> @@ -146,6 +159,7 @@ function ImageLayoutGridInner({ onPress?.(1)} + onPressIn={() => onPressIn?.(1)} onLongPress={() => onLongPress(1)}> @@ -155,6 +169,7 @@ function ImageLayoutGridInner({ onPress?.(2)} + onPressIn={() => onPressIn?.(2)} onLongPress={() => onLongPress(2)}> @@ -162,6 +177,7 @@ function ImageLayoutGridInner({ onPress?.(3)} + onPressIn={() => onPressIn?.(3)} onLongPress={() => onLongPress(3)}>