Add iOS 26 fluid zoom transition for Menu sheets

On iOS 26+, Menu bottom sheets now morph from their trigger button
using UIViewController.preferredTransition = .zoom. This creates a
fluid visual connection between the trigger and the presented sheet,
complementing the Liquid Glass design language.

The sourceViewTag prop is also available on the generic Dialog/BottomSheet
layer so any dialog can opt into the zoom transition.

https://claude.ai/code/session_011cNDhEb2cDgg5QbVuzEyH1

modules/bottom-sheet/ios/BottomSheetModule.swift

@@ -42,6 +42,10 @@ public class BottomSheetModule: Module {
       Prop("preventExpansion") { (view: SheetView, prop: Bool) in
         view.preventExpansion = prop
       }
+
+      Prop("sourceViewTag") { (view: SheetView, prop: Int?) in
+        view.sourceViewTag = prop
+      }
     }
   }
 }

modules/bottom-sheet/ios/SheetView.swift

@@ -26,6 +26,7 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
   var preventDismiss = false
   var preventExpansion = false
   var cornerRadius: CGFloat?
+  var sourceViewTag: Int?
   var minHeight = 0.0
   var maxHeight: CGFloat! {
     didSet {
@@ -135,6 +136,15 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
     }
     sheetVc.view.addSubview(innerView)
 
+    if #available(iOS 26.0, *),
+       let tag = self.sourceViewTag,
+       let bridge = self.appContext?.reactBridge,
+       let sourceView = bridge.uiManager.view(forReactTag: NSNumber(value: tag)) {
+      sheetVc.preferredTransition = .zoom { _ in
+        return sourceView
+      }
+    }
+
     self.sheetVc = sheetVc
     self.isOpening = true
 

modules/bottom-sheet/src/BottomSheet.types.ts

@@ -1,5 +1,5 @@
-import React from 'react'
+import {type ColorValue, type NativeSyntheticEvent} from 'react-native'
-import {ColorValue, NativeSyntheticEvent} from 'react-native'
+import type React from 'react'
 
 export type BottomSheetState = 'closed' | 'closing' | 'open' | 'opening'
 
@@ -25,6 +25,7 @@ export interface BottomSheetViewProps {
   backgroundColor?: ColorValue
   containerBackgroundColor?: ColorValue
   disableDrag?: boolean
+  sourceViewTag?: number
 
   minHeight?: number
   maxHeight?: number

src/components/Menu/index.tsx

@@ -1,5 +1,6 @@
-import {cloneElement, Fragment, isValidElement, useMemo} from 'react'
+import {cloneElement, Fragment, isValidElement, useMemo, useRef} from 'react'
 import {
+  findNodeHandle,
   Pressable,
   type StyleProp,
   type TextStyle,
@@ -46,9 +47,11 @@ export function Root({
   control?: Dialog.DialogControlProps
 }>) {
   const defaultControl = Dialog.useDialogControl()
+  const triggerRef = useRef<View>(null)
   const context = useMemo<ContextType>(
     () => ({
       control: control || defaultControl,
+      triggerRef,
     }),
     [control, defaultControl],
   )
@@ -79,7 +82,7 @@ export function Trigger({
       pressed,
     },
     props: {
-      ref: null,
+      ref: context.triggerRef,
       onPress: context.control.open,
       onFocus,
       onBlur,
@@ -101,11 +104,12 @@ export function Outer({
 }>) {
   const context = useMenuContext()
   const {_} = useLingui()
+  const sourceViewTag = findNodeHandle(context.triggerRef.current) ?? undefined
 
   return (
     <Dialog.Outer
       control={context.control}
-      nativeOptions={{preventExpansion: true}}>
+      nativeOptions={{preventExpansion: true, sourceViewTag}}>
       <Dialog.Handle />
       {/* Re-wrap with context since Dialogs are portal-ed to root */}
       <Context.Provider value={context}>

src/components/Menu/index.web.tsx

@@ -1,4 +1,4 @@
-import {forwardRef, useCallback, useId, useMemo, useState} from 'react'
+import {forwardRef, useCallback, useId, useMemo, useRef, useState} from 'react'
 import {
   Pressable,
   type StyleProp,
@@ -62,9 +62,11 @@ export function Root({
 }>) {
   const {_} = useLingui()
   const defaultControl = useMenuControl()
+  const triggerRef = useRef<View>(null)
   const context = useMemo<ContextType>(
     () => ({
       control: control || defaultControl,
+      triggerRef,
     }),
     [control, defaultControl],
   )

src/components/Menu/types.ts

@@ -3,6 +3,7 @@ import {
   type AccessibilityRole,
   type GestureResponderEvent,
   type PressableProps,
+  type View,
 } from 'react-native'
 import type React from 'react'
 
@@ -12,6 +13,7 @@ import {type Props as SVGIconProps} from '#/components/icons/common'
 
 export type ContextType = {
   control: Dialog.DialogOuterProps['control']
+  triggerRef: React.RefObject<View | null>
 }
 
 export type ItemContextType = {
@@ -61,7 +63,7 @@ export type TriggerChildProps =
        * object is empty.
        */
       props: {
-        ref: null
+        ref: React.RefObject<View | null>
         onPress: () => void
         onFocus: () => void
         onBlur: () => void