about summary refs log tree commit diff
path: root/src/view/com/util/images/AutoSizedImage.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/view/com/util/images/AutoSizedImage.tsx')
-rw-r--r--src/view/com/util/images/AutoSizedImage.tsx13
1 files changed, 8 insertions, 5 deletions
diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx
index ce2389ce2..21f6c529e 100644
--- a/src/view/com/util/images/AutoSizedImage.tsx
+++ b/src/view/com/util/images/AutoSizedImage.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import {DimensionValue, Pressable, View} from 'react-native'
+import Animated, {AnimatedRef, useAnimatedRef} from 'react-native-reanimated'
 import {Image} from 'expo-image'
 import {AppBskyEmbedImages} from '@atproto/api'
 import {msg} from '@lingui/macro'
@@ -92,7 +93,7 @@ export function AutoSizedImage({
   image: AppBskyEmbedImages.ViewImage
   crop?: 'none' | 'square' | 'constrained'
   hideBadge?: boolean
-  onPress?: () => void
+  onPress?: (containerRef: AnimatedRef<React.Component<{}, {}, any>>) => void
   onLongPress?: () => void
   onPressIn?: () => void
 }) {
@@ -107,12 +108,14 @@ export function AutoSizedImage({
     src: image.thumb,
     knownDimensions: image.aspectRatio ?? null,
   })
+  const containerRef = useAnimatedRef()
+
   const cropDisabled = crop === 'none'
   const isCropped = rawIsCropped && !cropDisabled
   const hasAlt = !!image.alt
 
   const contents = (
-    <>
+    <Animated.View ref={containerRef} collapsable={false}>
       <Image
         style={[a.w_full, a.h_full]}
         source={image.thumb}
@@ -185,13 +188,13 @@ export function AutoSizedImage({
           )}
         </View>
       ) : null}
-    </>
+    </Animated.View>
   )
 
   if (cropDisabled) {
     return (
       <Pressable
-        onPress={onPress}
+        onPress={() => onPress?.(containerRef)}
         onLongPress={onLongPress}
         onPressIn={onPressIn}
         // alt here is what screen readers actually use
@@ -213,7 +216,7 @@ export function AutoSizedImage({
         fullBleed={crop === 'square'}
         aspectRatio={constrained ?? 1}>
         <Pressable
-          onPress={onPress}
+          onPress={() => onPress?.(containerRef)}
           onLongPress={onLongPress}
           onPressIn={onPressIn}
           // alt here is what screen readers actually use