acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Image not loading on swipe (#114)

Browse Source 
* 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>
This commit is contained in:
Aryan Goharzad
2023-01-30 14:32:12 -05:00
committed by GitHub
parent 94771b5c7f
commit d563beb239
4 changed files with 33 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/com/lightbox/ImageViewing/index.tsx
-3
View File
@@ -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
+15 -1
View File
@@ -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
+2
View File
@@ -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
+16
View File
@@ -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>