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

Pass thumbnail ref through peek commit so lightbox return animates

Browse Source 
The lightbox's close animation needs the original thumbnail ref/dims to know
where to animate back to. The peek-commit path was passing null, so the
lightbox dropped to a fade instead of the usual return-to-thumb animation.

Rework each embed path so the tap handler and the peek-commit handler
invoke the same openLightbox call with the same ref + dims:

- Grid and scrollable Gallery: derive `openLightboxAtIndex` once per cell
  and hand it to both Pressable.onPress and ContextMenu.onPreviewPress.
- Single image: add onContainerRef / onDimsChange callbacks to
  AutoSizedImage, capture them in ImageEmbed, and use them for the peek
  commit. Drops the now-redundant onPreviewPress prop chain.

https://claude.ai/code/session_015REmux3R9uuEMMJUHxTyQT
This commit is contained in:
Claude
2026-04-19 08:38:13 +00:00
committed by Samuel Newman
parent 1856c36221
commit 723b20bfce
5 changed files with 59 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Post/Embed/ImageEmbed.tsx
+18 -15
View File
@@ -1,3 +1,4 @@
import {useRef} from 'react'
import {InteractionManager, View} from 'react-native'
import {type AnimatedRef} from 'react-native-reanimated'
import {Image} from 'expo-image'
@@ -25,6 +26,11 @@ export function ImageEmbed({
const {images} = embed.view
const galleryEnabled = ax.features.enabled(ax.features.PostGalleryEmbedEnable)
// Captured from AutoSizedImage so the peek-commit handler can reuse the same
// ref + dims that a tap would — keeps the lightbox's return animation intact.
const singleContainerRef = useRef<AnimatedRef<any> | null>(null)
const singleDimsRef = useRef<Dimensions | null>(null)
if (images.length > 0) {
const items = images.map(img => ({
uri: img.fullsize,
@@ -57,18 +63,6 @@ export function ImageEmbed({
)
})
}
const onPreviewPress = (index: number) =>
openLightbox({
images: items.map(item => ({
...item,
thumbRect: null,
thumbRef: null,
thumbDimensions: null,
thumbBorderRadius: tokens.borderRadius.md,
type: 'image',
})),
index,
})
if (images.length === 1) {
const image = images[0]
@@ -76,6 +70,11 @@ export function ImageEmbed({
image.aspectRatio && image.aspectRatio.height > 0
? image.aspectRatio.width / image.aspectRatio.height
: undefined
const openFromSingle = () => {
if (singleContainerRef.current) {
onPress(0, [singleContainerRef.current], [singleDimsRef.current])
}
}
return (
<View style={[a.mt_sm, rest.style]}>
<ImageContextMenu
@@ -83,7 +82,7 @@ export function ImageEmbed({
thumbUri={image.thumb}
aspectRatio={aspect}
borderRadius={tokens.borderRadius.md}
onPreviewPress={() => onPreviewPress(0)}>
onPreviewPress={openFromSingle}>
<AutoSizedImage
crop={
rest.viewContext === PostEmbedViewContext.ThreadHighlighted
@@ -94,6 +93,12 @@ export function ImageEmbed({
: 'constrained'
}
image={image}
onContainerRef={ref => {
singleContainerRef.current = ref
}}
onDimsChange={dims => {
singleDimsRef.current = dims
}}
onPress={(containerRef, dims) =>
onPress(0, [containerRef], [dims])
}
@@ -115,7 +120,6 @@ export function ImageEmbed({
images={images}
onPress={onPress}
onPressIn={onPressIn}
onPreviewPress={onPreviewPress}
viewContext={rest.viewContext}
/>
</View>
@@ -128,7 +132,6 @@ export function ImageEmbed({
images={images}
onPress={onPress}
onPressIn={onPressIn}
onPreviewPress={onPreviewPress}
viewContext={rest.viewContext}
/>
</View>
src/components/images/AutoSizedImage.tsx
+15 -2
View File
@@ -1,4 +1,4 @@
import {useMemo, useRef} from 'react'
import {useEffect, useMemo, useRef} from 'react'
import {type DimensionValue, Pressable, View} from 'react-native'
import Animated, {
type AnimatedRef,
@@ -69,6 +69,8 @@ export function AutoSizedImage({
onPress,
onLongPress,
onPressIn,
onContainerRef,
onDimsChange,
}: {
image: AppBskyEmbedImages.ViewImage
crop?: 'none' | 'square' | 'constrained'
@@ -79,6 +81,11 @@ export function AutoSizedImage({
) => void
onLongPress?: () => void
onPressIn?: () => void
/** Fires once with the internal container ref so a parent can drive its
* own lightbox-return animation without waiting for an `onPress`. */
onContainerRef?: (ref: AnimatedRef<any>) => void
/** Fires when the underlying image reports its natural dimensions. */
onDimsChange?: (dims: Dimensions) => void
}) {
const t = useTheme()
const {_} = useLingui()
@@ -86,6 +93,10 @@ export function AutoSizedImage({
const containerRef = useAnimatedRef()
const fetchedDimsRef = useRef<{width: number; height: number} | null>(null)
useEffect(() => {
onContainerRef?.(containerRef)
}, [containerRef, onContainerRef])
let aspectRatio: number | undefined
const dims = image.aspectRatio
if (dims) {
@@ -122,10 +133,12 @@ export function AutoSizedImage({
accessibilityHint=""
onLoad={e => {
if (!isContain) {
fetchedDimsRef.current = {
const dims = {
width: e.source.width,
height: e.source.height,
}
fetchedDimsRef.current = dims
onDimsChange?.(dims)
}
}}
loading="lazy"
src/components/images/Gallery/index.tsx
+17 -22
View File
@@ -53,7 +53,6 @@ interface GalleryProps {
fetchedDims: (Dimensions | null)[],
) => void
onPressIn?: (index: number) => void
onPreviewPress?: (index: number) => void
viewContext?: PostEmbedViewContext
}
@@ -97,7 +96,6 @@ export function Gallery({
images,
onPress,
onPressIn,
onPreviewPress,
viewContext,
}: GalleryProps) {
const {t: l} = useLingui()
@@ -267,6 +265,21 @@ export function Gallery({
data={images}
keyExtractor={(item, index) => item.thumb + index}
renderItem={({item, index}) => {
const openLightboxAtIndex = onPress
? () => {
ax.metric('post:gallery:openLightbox', {
fromImage: index + 1, // convert to 1-based index for easier analysis
totalImages: images.length,
})
const refs: AnimatedRef<any>[] = []
const dims: (Dimensions | null)[] = []
for (let i = 0; i < images.length; i++) {
refs.push(containerRefsRef.current.get(i)!)
dims.push(thumbDimsRef.current.get(i) ?? null)
}
onPress(index, refs, dims)
}
: undefined
return (
<GalleryImage
hideBadges={hideBadges}
@@ -291,27 +304,9 @@ export function Gallery({
onThumbDims={(i, dims) => {
thumbDimsRef.current.set(i, dims)
}}
onPress={
onPress
? () => {
ax.metric('post:gallery:openLightbox', {
fromImage: index + 1, // convert to 1-based index for easier analysis
totalImages: images.length,
})
const refs: AnimatedRef<any>[] = []
const dims: (Dimensions | null)[] = []
for (let i = 0; i < images.length; i++) {
refs.push(containerRefsRef.current.get(i)!)
dims.push(thumbDimsRef.current.get(i) ?? null)
}
onPress(index, refs, dims)
}
: undefined
}
onPress={openLightboxAtIndex}
onPressIn={onPressIn ? () => onPressIn(index) : undefined}
onPreviewPress={
onPreviewPress ? () => onPreviewPress(index) : undefined
}
onPreviewPress={openLightboxAtIndex}
/>
)
}}
src/components/images/ImageLayoutGrid.tsx
-2
View File
@@ -17,7 +17,6 @@ interface ImageLayoutGridProps {
) => void
onLongPress?: (index: number) => void
onPressIn?: (index: number) => void
onPreviewPress?: (index: number) => void
style?: StyleProp<ViewStyle>
viewContext?: PostEmbedViewContext
}
@@ -49,7 +48,6 @@ interface ImageLayoutGridInnerProps {
) => void
onLongPress?: (index: number) => void
onPressIn?: (index: number) => void
onPreviewPress?: (index: number) => void
viewContext?: PostEmbedViewContext
gap: {gap: number}
}
src/components/images/ImageLayoutGridItem.tsx
+9 -11
View File
@@ -27,8 +27,6 @@ interface Props {
) => void
onLongPress?: EventFunction
onPressIn?: EventFunction
/** Fired from the native iOS peek preview tap. */
onPreviewPress?: EventFunction
imageStyle?: StyleProp<ImageStyle>
viewContext?: PostEmbedViewContext
insetBorderStyle?: StyleProp<ViewStyle>
@@ -43,7 +41,6 @@ export function GalleryItem({
onPress,
onPressIn,
onLongPress,
onPreviewPress,
viewContext,
insetBorderStyle,
containerRefs,
@@ -62,22 +59,23 @@ export function GalleryItem({
? image.aspectRatio.width / image.aspectRatio.height
: undefined
// The tap handler and the peek-commit handler do the same thing: open the
// lightbox with this cell's ref + dims so the lightbox's return animation
// can target the original thumbnail.
const openLightboxAtIndex = onPress
? () => onPress(index, containerRefs, thumbDimsRef.current.slice())
: undefined
return (
<View style={a.flex_1} ref={containerRefs[index]} collapsable={false}>
<ImageContextMenu
fullsizeUri={image.fullsize}
thumbUri={image.thumb}
aspectRatio={aspect}
onPreviewPress={
onPreviewPress ? () => onPreviewPress(index) : undefined
}
onPreviewPress={openLightboxAtIndex}
style={a.flex_1}>
<Pressable
onPress={
onPress
? () => onPress(index, containerRefs, thumbDimsRef.current.slice())
: undefined
}
onPress={openLightboxAtIndex}
onPressIn={onPressIn ? () => onPressIn(index) : undefined}
onLongPress={onLongPress ? () => onLongPress(index) : undefined}
android_ripple={{