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
This commit is contained in:
Claude
2026-02-28 22:32:19 +00:00
committed by Samuel Newman
parent 919a7af7b6
commit f49b7308cb
2 changed files with 15 additions and 4 deletions
+12 -3
View File
@@ -1,7 +1,7 @@
import React from 'react' import React, {useState} from 'react'
import { import {
findNodeHandle,
type ImageStyle, type ImageStyle,
Keyboard,
type LayoutChangeEvent, type LayoutChangeEvent,
StyleSheet, StyleSheet,
TouchableOpacity, TouchableOpacity,
@@ -144,6 +144,14 @@ const GalleryItem = ({
const altTextControl = Dialog.useDialogControl() const altTextControl = Dialog.useDialogControl()
const editControl = 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 = () => { const onImageEdit = () => {
if (IS_NATIVE) { if (IS_NATIVE) {
@@ -156,12 +164,12 @@ const GalleryItem = ({
} }
const onAltTextEdit = () => { const onAltTextEdit = () => {
Keyboard.dismiss()
altTextControl.open() altTextControl.open()
} }
return ( return (
<View <View
ref={altBtnRef}
style={imageStyle as ViewStyle} style={imageStyle as ViewStyle}
// Fixes ALT and icons appearing with half opacity when the post is inactive // Fixes ALT and icons appearing with half opacity when the post is inactive
renderToHardwareTextureAndroid> renderToHardwareTextureAndroid>
@@ -240,6 +248,7 @@ const GalleryItem = ({
control={altTextControl} control={altTextControl}
image={image} image={image}
onChange={onChange} onChange={onChange}
sourceViewTag={altBtnViewTag}
/> />
<EditImageDialog <EditImageDialog
@@ -23,12 +23,14 @@ type Props = {
control: Dialog.DialogOuterProps['control'] control: Dialog.DialogOuterProps['control']
image: ComposerImage image: ComposerImage
onChange: (next: ComposerImage) => void onChange: (next: ComposerImage) => void
sourceViewTag?: number
} }
export const ImageAltTextDialog = ({ export const ImageAltTextDialog = ({
control, control,
image, image,
onChange, onChange,
sourceViewTag,
}: Props): React.ReactNode => { }: Props): React.ReactNode => {
const {height: minHeight} = useWindowDimensions() const {height: minHeight} = useWindowDimensions()
const [altText, setAltText] = useState(image.alt) const [altText, setAltText] = useState(image.alt)
@@ -42,7 +44,7 @@ export const ImageAltTextDialog = ({
alt: enforceLen(altText, MAX_ALT_TEXT, true), alt: enforceLen(altText, MAX_ALT_TEXT, true),
}) })
}} }}
nativeOptions={{minHeight}}> nativeOptions={{minHeight, sourceViewTag}}>
<Dialog.Handle /> <Dialog.Handle />
<ImageAltTextInner <ImageAltTextInner
control={control} control={control}