From f49b7308cb5393121a027547734887ac290b690f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 28 Feb 2026 22:32:19 +0000
Subject: [PATCH] Add zoom transition to image alt text dialog

Use the gallery item view as the source for the zoom transition,
with a callback ref to resolve the view tag after mount.

https://claude.ai/code/session_011cNDhEb2cDgg5QbVuzEyH1
---
 src/view/com/composer/photos/Gallery.tsx          | 15 ++++++++++++---
 .../com/composer/photos/ImageAltTextDialog.tsx    |  4 +++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/view/com/composer/photos/Gallery.tsx b/src/view/com/composer/photos/Gallery.tsx
index 044264fa03..1f3fb01325 100644
--- a/src/view/com/composer/photos/Gallery.tsx
+++ b/src/view/com/composer/photos/Gallery.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
+import React, {useState} from 'react'
 import {
+  findNodeHandle,
   type ImageStyle,
-  Keyboard,
   type LayoutChangeEvent,
   StyleSheet,
   TouchableOpacity,
@@ -144,6 +144,14 @@ const GalleryItem = ({
 
   const altTextControl = Dialog.useDialogControl()
   const editControl = Dialog.useDialogControl()
+  const [altBtnViewTag, setAltBtnViewTag] = useState<number>()
+
+  const altBtnRef = (node: View | null) => {
+    if (node) {
+      const tag = findNodeHandle(node)
+      if (tag != null) setAltBtnViewTag(tag)
+    }
+  }
 
   const onImageEdit = () => {
     if (IS_NATIVE) {
@@ -156,12 +164,12 @@ const GalleryItem = ({
   }
 
   const onAltTextEdit = () => {
-    Keyboard.dismiss()
     altTextControl.open()
   }
 
   return (
     <View
+      ref={altBtnRef}
       style={imageStyle as ViewStyle}
       // Fixes ALT and icons appearing with half opacity when the post is inactive
       renderToHardwareTextureAndroid>
@@ -240,6 +248,7 @@ const GalleryItem = ({
         control={altTextControl}
         image={image}
         onChange={onChange}
+        sourceViewTag={altBtnViewTag}
       />
 
       <EditImageDialog
diff --git a/src/view/com/composer/photos/ImageAltTextDialog.tsx b/src/view/com/composer/photos/ImageAltTextDialog.tsx
index b0ee855165..9fb32296be 100644
--- a/src/view/com/composer/photos/ImageAltTextDialog.tsx
+++ b/src/view/com/composer/photos/ImageAltTextDialog.tsx
@@ -23,12 +23,14 @@ type Props = {
   control: Dialog.DialogOuterProps['control']
   image: ComposerImage
   onChange: (next: ComposerImage) => void
+  sourceViewTag?: number
 }
 
 export const ImageAltTextDialog = ({
   control,
   image,
   onChange,
+  sourceViewTag,
 }: Props): React.ReactNode => {
   const {height: minHeight} = useWindowDimensions()
   const [altText, setAltText] = useState(image.alt)
@@ -42,7 +44,7 @@ export const ImageAltTextDialog = ({
           alt: enforceLen(altText, MAX_ALT_TEXT, true),
         })
       }}
-      nativeOptions={{minHeight}}>
+      nativeOptions={{minHeight, sourceViewTag}}>
       <Dialog.Handle />
       <ImageAltTextInner
         control={control}