Add iOS 26 fluid zoom transition to alt text dialog (#9970)

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Samuel Newman
2026-03-05 02:32:08 +00:00
committed by GitHub
parent 7fd218c97d
commit 1782a65174
6 changed files with 33 additions and 4 deletions
+12 -1
View File
@@ -1,5 +1,6 @@
import React from 'react'
import React, {useState} from 'react'
import {
findNodeHandle,
type ImageStyle,
Keyboard,
type LayoutChangeEvent,
@@ -144,6 +145,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) {
@@ -162,6 +171,7 @@ const GalleryItem = ({
return (
<View
ref={altBtnRef}
style={imageStyle as ViewStyle}
// Fixes ALT and icons appearing with half opacity when the post is inactive
renderToHardwareTextureAndroid>
@@ -240,6 +250,7 @@ const GalleryItem = ({
control={altTextControl}
image={image}
onChange={onChange}
sourceViewTag={altBtnViewTag}
/>
<EditImageDialog
@@ -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}