@expo/ui 57.0.13 → 57.0.15

package/src/jetpack-compose/RNHostView/index.tsx

@@ -1,7 +1,8 @@
 import { requireNativeView } from 'expo';
 import type { ReactElement, ComponentType } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
 
+import { PresentedContentContext, useIsPresentedInOwnWindow } from '../../PresentedContentContext';
 import type { ModifierConfig } from '../../types';
 import type { PrimitiveBaseProps } from '../layout';
 import { createViewModifierEventListener } from '../modifiers/utils';
@@ -14,6 +15,11 @@ export interface RNHostProps extends PrimitiveBaseProps {
    * @default false
    */
   matchContents?: boolean;
+  /**
+   * Called on mount and whenever this view's layout in the React Native view tree changes.
+   * With `matchContents`, the reported size is the one measured from the hosted view.
+   */
+  onLayout?: (event: LayoutChangeEvent) => void;
   /**
    * The RN View to be hosted.
    */
@@ -22,40 +28,49 @@ export interface RNHostProps extends PrimitiveBaseProps {
    * Modifiers for the component.
    */
   modifiers?: ModifierConfig[];
-  /**
-   * Style applied to the host view's React Native shadow node. Useful for
-   * controlling its layout position (e.g. `position: 'absolute'`).
-   */
-  style?: StyleProp<ViewStyle>;
 }
 
 type NativeRNHostProps = RNHostProps & {
   layoutRoot: boolean;
+  /**
+   * Internal. Drives the shadow node's content measurement, see
+   * `ExpoViewShadowNode::sizesToContent`.
+   */
+  expoInternalSizeFromChildren?: boolean;
 };
 const NativeRNHostView: ComponentType<NativeRNHostProps> = requireNativeView(
   'ExpoUI',
   'RNHostView'
 );
 
-function transformProps(props: RNHostProps): NativeRNHostProps {
+function transformProps(props: RNHostProps, layoutRoot: boolean): NativeRNHostProps {
   const { modifiers, ...restProps } = props;
   return {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
-    // Touches on hosted content are dispatched relative to the host, so `measure()` must report
-    // the same coordinate space; otherwise `Pressable` cancels the press on any finger movement.
-    layoutRoot: true,
+    layoutRoot,
+    expoInternalSizeFromChildren: props.matchContents,
   };
 }
 
 export function RNHostView(props: RNHostProps) {
+  // Content presented in its own window — a modal bottom sheet, a dialog — has no React root above
+  // it, so it dispatches its own touches and is measured from itself. Everywhere else the surface
+  // root already streams this subtree's touches, and a second stream in a second coordinate space
+  // is what makes a `Pressable` drop its press on the first finger movement.
+  const layoutRoot = useIsPresentedInOwnWindow();
+
   return (
     <NativeRNHostView
-      {...transformProps(props)}
+      {...transformProps(props, layoutRoot)}
       // `matchContents` can only be used once on mount
       // So we force unmount when it changes to prevent unexpected layout
-      key={props.matchContents ? 'matchContents' : 'noMatchContents'}
-    />
+      key={props.matchContents ? 'matchContents' : 'noMatchContents'}>
+      {/* Reset context here so only nearest RNHostView becomes the layout root for its children, and not any other RNHostView above it in the tree. */}
+      <PresentedContentContext.Provider value={false}>
+        {props.children}
+      </PresentedContentContext.Provider>
+    </NativeRNHostView>
   );
 }

package/src/jetpack-compose/TextField/shared.ts

@@ -2,6 +2,7 @@ import type { ReactNode, Ref } from 'react';
 import type { ColorValue } from 'react-native';
 
 import { getStateId, type ObservableState, useWorkletProp, worklets } from '../../State';
+import { useHostedTextInput } from '../../keyboard';
 import type { ModifierConfig, ViewEvent } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
@@ -180,6 +181,7 @@ export type CommonTextFieldProperties = {
  * else on the props passes through untouched.
  */
 type TransformedKeys =
+  | 'ref'
   | 'value'
   | 'selection'
   | 'modifiers'
@@ -195,6 +197,7 @@ type TransformedKeys =
  * callbacks become `nativeEvent`-wrapped listeners.
  */
 export type CommonNativeTextFieldProps = {
+  ref?: Ref<any>;
   modifiers?: ModifierConfig[];
   children?: ReactNode;
   value?: number | null;
@@ -209,6 +212,7 @@ export function useCommonTextFieldProps<T extends CommonTextFieldProperties>(
   props: T
 ): CommonNativeTextFieldProps & Omit<T, TransformedKeys> {
   const {
+    ref,
     value,
     selection,
     modifiers,
@@ -222,9 +226,11 @@ export function useCommonTextFieldProps<T extends CommonTextFieldProperties>(
 
   const isWorklet = !!onValueChange && !!worklets?.isWorkletFunction?.(onValueChange);
   const workletCallback = useWorkletProp(isWorklet ? onValueChange : undefined, 'onValueChange');
+  const hosted = useHostedTextInput<TextFieldRef>(ref, onFocusChanged);
 
   return {
     ...rest,
+    ref: hosted.ref,
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     children,
@@ -233,7 +239,7 @@ export function useCommonTextFieldProps<T extends CommonTextFieldProperties>(
     onValueChangeSync: getStateId(workletCallback),
     onValueChange:
       !isWorklet && onValueChange ? (event) => onValueChange(event.nativeEvent.text) : undefined,
-    onFocusChanged: onFocusChanged ? (event) => onFocusChanged(event.nativeEvent.value) : undefined,
+    onFocusChanged: (event) => hosted.onFocusChange(event.nativeEvent.value),
     onSelectionChange: onSelectionChange
       ? (event) => onSelectionChange({ start: event.nativeEvent.start, end: event.nativeEvent.end })
       : undefined,

package/src/jetpack-compose/Tooltip/index.tsx

@@ -2,6 +2,7 @@ import { requireNativeView } from 'expo';
 import { type Ref } from 'react';
 import { type ColorValue } from 'react-native';
 
+import { PresentedContent } from '../../PresentedContentContext';
 import { type ModifierConfig } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
@@ -146,7 +147,7 @@ function RichTooltipComponent(props: RichTooltipProps) {
         modifiers={modifiers}
         {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
         {...restProps}>
-        {children}
+        <PresentedContent>{children}</PresentedContent>
       </RichTooltipNativeView>
     </SlotNativeView>
   );

package/src/keyboard/index.tsx

@@ -0,0 +1,243 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  type Ref,
+  type RefObject,
+} from 'react';
+import type { ReactNativeElement } from 'react-native';
+
+import { attachHostController, detachHostController } from './interop';
+import { TextInputState } from './textInputState';
+import { useMergeRefs } from '../utils/useMergeRefs';
+
+/**
+ * React Native decides whether a touch dismissed the keyboard by comparing the
+ * focused instance in `TextInputState` against the `event.target` of the touch.
+ * A hosted field can never be that target — SwiftUI children are virtual and
+ * Compose children carry no React tag — so every touch inside a host resolves to
+ * the host, and the host is what React Native has to be told about.
+ *
+ * Fields drive all of it. The host only lends its native view as the address.
+ */
+
+/** A hosted field, identified by object identity and able to act on itself. */
+type HostedField = {
+  focus: () => void;
+  blur: () => void;
+};
+
+/** One host's fields: which are mounted, which report focus. */
+type HostEntry = {
+  mounted: Set<HostedField>;
+  focused: Set<HostedField>;
+  lastFocused: HostedField | null;
+};
+
+/** The wrapper component that `requireNativeView` returns. */
+type NativeViewWrapper = {
+  getNativeRef?: () => ReactNativeElement | null;
+};
+
+/** The subset of a field's imperative handle a host needs. */
+type TextInputHandle = {
+  focus: () => unknown;
+  blur: () => unknown;
+};
+
+// Weak so a host whose fields never unregister cannot outlive its view tree.
+// Entries are still removed explicitly, since unregistering from React Native
+// matters for correctness, not only for memory.
+const hosts = new WeakMap<ReactNativeElement, HostEntry>();
+
+const HostInstanceContext = createContext<RefObject<NativeViewWrapper | null> | null>(null);
+
+/** Used by `<Host>`. Attach the returned ref to the native host view. */
+export function useTextInputHostRef() {
+  return useRef<NativeViewWrapper | null>(null);
+}
+
+/**
+ * Lends the host's native view to the fields it hosts, at any depth.
+ *
+ * A field inside a nested host uses the inner one, which is also what the hit
+ * test reports. Presented content is the exception: a field inside a `BottomSheet`
+ * or `Popover` is nested in the React tree but not in the host's view, so it
+ * registers a view the touch never lands on.
+ */
+export function TextInputHostProvider({
+  hostRef,
+  children,
+}: {
+  hostRef: RefObject<NativeViewWrapper | null>;
+  children: React.ReactNode;
+}) {
+  return <HostInstanceContext.Provider value={hostRef}>{children}</HostInstanceContext.Provider>;
+}
+
+function addField(instance: ReactNativeElement, field: HostedField) {
+  let entry = hosts.get(instance);
+  if (!entry) {
+    entry = { mounted: new Set(), focused: new Set(), lastFocused: null };
+    hosts.set(instance, entry);
+    TextInputState.registerInput(instance);
+    const hostEntry = entry;
+    attachHostController(instance, {
+      blurFocusedFields: () => hostEntry.focused.forEach((focusedField) => focusedField.blur()),
+      focusLastField: () => hostEntry.lastFocused?.focus(),
+    });
+  }
+  entry.mounted.add(field);
+}
+
+function removeField(instance: ReactNativeElement, field: HostedField) {
+  const entry = hosts.get(instance);
+  if (!entry) {
+    return;
+  }
+  entry.mounted.delete(field);
+  if (entry.lastFocused === field) {
+    entry.lastFocused = null;
+  }
+  // A field can unmount while it still holds focus.
+  if (entry.focused.delete(field) && entry.focused.size === 0) {
+    TextInputState.blurInput(instance);
+  }
+  if (entry.mounted.size === 0) {
+    // Leaving a stale focused instance behind makes `ScrollView` swallow the
+    // first tap of every gesture. `blurInput` no-ops unless it still points here.
+    TextInputState.blurInput(instance);
+    TextInputState.unregisterInput(instance);
+    detachHostController(instance);
+    hosts.delete(instance);
+  }
+}
+
+function setFieldFocused(instance: ReactNativeElement, field: HostedField, focused: boolean) {
+  const entry = hosts.get(instance);
+  if (!entry) {
+    return;
+  }
+  if (focused) {
+    entry.focused.add(field);
+    entry.lastFocused = field;
+  } else {
+    entry.focused.delete(field);
+  }
+  // Two fields swapping focus emit independent events that can arrive in either
+  // order, so the host stays focused while any of its fields is.
+  if (entry.focused.size > 0) {
+    TextInputState.focusInput(instance);
+  } else {
+    TextInputState.blurInput(instance);
+  }
+}
+
+/**
+ * Used by hosted text fields. Joins React Native's keyboard coordination through
+ * the surrounding host, and returns the ref to attach to the native view plus
+ * the focus handler to wire to its focus event. The app's own ref and callback
+ * keep working.
+ */
+export function useHostedTextInput<T extends TextInputHandle>(
+  ref: Ref<T> | undefined,
+  onFocusChange: ((focused: boolean) => void) | undefined,
+  options?: {
+    /**
+     * Blur the field when it unmounts. SwiftUI only: `blur` there affects just this field, while
+     * the Compose handler clears focus for whichever component currently holds it in the host.
+     */
+    blurOnUnmount?: boolean;
+  }
+) {
+  const hostRef = useContext(HostInstanceContext);
+  const nativeRef = useRef<T | null>(null);
+  const hostInstance = useRef<ReactNativeElement | null>(null);
+  // An `autoFocus` field can report focus before its registration effect runs.
+  const focusBeforeRegistered = useRef<boolean | null>(null);
+  // Last focus state this field reported, so unmount only blurs a field that holds focus.
+  const isFocused = useRef(false);
+
+  // Identifies this field to its host, and lets the host act on it.
+  const field = useMemo<HostedField>(
+    () => ({
+      focus: () => callHandle(nativeRef.current, 'focus'),
+      blur: () => callHandle(nativeRef.current, 'blur'),
+    }),
+    []
+  );
+
+  // Blur before React removes the field's native views: a field left first responder while its
+  // row is deleted makes UIKit assert ("refused to resign"), and every native teardown hook runs
+  // too late to clear SwiftUI's `@FocusState`. https://github.com/expo/expo/issues/49348
+  const blurOnUnmount = options?.blurOnUnmount ?? false;
+  useLayoutEffect(() => {
+    if (!blurOnUnmount) {
+      return;
+    }
+    return () => {
+      if (isFocused.current) {
+        callHandle(nativeRef.current, 'blur');
+      }
+    };
+  }, [blurOnUnmount]);
+
+  useEffect(() => {
+    // Resolved here rather than during render: the host's ref is attached by the
+    // time a hosted field's effects run.
+    const instance = hostRef?.current?.getNativeRef?.() ?? null;
+    hostInstance.current = instance;
+    if (!instance) {
+      return;
+    }
+    addField(instance, field);
+    if (focusBeforeRegistered.current != null) {
+      setFieldFocused(instance, field, focusBeforeRegistered.current);
+      focusBeforeRegistered.current = null;
+    }
+    return () => {
+      removeField(instance, field);
+      hostInstance.current = null;
+    };
+  }, [hostRef, field]);
+
+  return {
+    ref: useMergeRefs(ref, nativeRef),
+    onFocusChange: useCallback(
+      (focused: boolean) => {
+        isFocused.current = focused;
+        if (hostInstance.current) {
+          setFieldFocused(hostInstance.current, field, focused);
+        } else {
+          focusBeforeRegistered.current = focused;
+        }
+        onFocusChange?.(focused);
+      },
+      [field, onFocusChange]
+    ),
+  };
+}
+
+/**
+ * Calls one of the field's imperative view functions. They are async functions,
+ * so a rejection would otherwise surface as an unhandled rejection inside React
+ * Native's touch handling.
+ */
+function callHandle(handle: TextInputHandle | null, method: 'focus' | 'blur') {
+  const call = handle?.[method];
+  if (typeof call !== 'function') {
+    return;
+  }
+  try {
+    const result = call.call(handle);
+    if (result && typeof (result as Promise<unknown>).catch === 'function') {
+      (result as Promise<unknown>).catch(() => {});
+    }
+  } catch {
+    // A field whose native view has gone cannot be focused or blurred.
+  }
+}

package/src/keyboard/interop.ts

@@ -0,0 +1,99 @@
+import { TextInput } from 'react-native';
+
+import { TextInputState } from './textInputState';
+
+/**
+ * How a `<Host>` acts on the field that holds focus, once React Native asks the
+ * host to blur or focus.
+ */
+export type HostedFocusController = {
+  blurFocusedFields: () => void;
+  /** Refocuses the field that held focus last, if it is still there. */
+  focusLastField: () => void;
+};
+
+type FocusEntryPoints = {
+  blurTextInput: (instance: any) => void;
+  focusTextInput: (instance: any) => void;
+};
+
+// Weak so a host that unmounts without detaching cannot keep its instance alive.
+const controllers = new WeakMap<object, HostedFocusController>();
+let installed = false;
+
+/**
+ * Starts routing React Native's blur and focus requests for this host to its
+ * hosted fields.
+ */
+export function attachHostController(instance: object, controller: HostedFocusController) {
+  controllers.set(instance, controller);
+  install();
+}
+
+export function detachHostController(instance: object) {
+  controllers.delete(instance);
+}
+
+/**
+ * React Native blurs the focused input by dispatching a native `blur` view
+ * command to it. A hosted SwiftUI or Compose field cannot receive one: it has no
+ * host component of its own, so the command would land on the `<Host>` and stop
+ * there. Taking over the two entry points instead lets the host forward the
+ * request to the field that actually holds focus, through the same imperative
+ * methods `ref.blur()` and `ref.focus()` already use.
+ *
+ * Inputs React Native owns are passed through untouched, and the takeover only
+ * happens once a hosted text field exists.
+ *
+ * Re-evaluating this module, which only Fast Refresh does, adds one more wrapper
+ * in front of the previous one. That stays correct: a host this copy does not know
+ * falls through to the wrapper before it.
+ */
+function install() {
+  if (installed) {
+    return;
+  }
+  installed = true;
+  takeOver(TextInputState);
+  // `TextInput.State` holds its own copies of these two functions, so it needs
+  // the same treatment to stay consistent with the module it copied them from.
+  takeOver(TextInput?.State as unknown as FocusEntryPoints);
+}
+
+function takeOver(target: FocusEntryPoints | undefined) {
+  // If React Native ever reshapes these, hosted fields quietly stop taking part
+  // rather than breaking the app.
+  if (typeof target?.blurTextInput !== 'function' || typeof target?.focusTextInput !== 'function') {
+    return;
+  }
+
+  const blurTextInput = target.blurTextInput;
+  const focusTextInput = target.focusTextInput;
+
+  target.blurTextInput = (instance: any) => {
+    const controller = instance ? controllers.get(instance) : undefined;
+    if (!controller) {
+      blurTextInput(instance);
+      return;
+    }
+    // Same guard as React Native: blurring an input that does not hold focus is a
+    // no-op, so a host never blurs its fields on behalf of a different input.
+    if (TextInputState.currentlyFocusedInput() !== instance) {
+      return;
+    }
+    TextInputState.blurInput(instance);
+    controller.blurFocusedFields();
+  };
+
+  target.focusTextInput = (instance: any) => {
+    const controller = instance ? controllers.get(instance) : undefined;
+    if (!controller) {
+      focusTextInput(instance);
+      return;
+    }
+    // No `focusInput` here: the field's own focus event sets the focused instance
+    // once focus actually lands, so React Native is never told about focus that
+    // did not happen.
+    controller.focusLastField();
+  };
+}

package/src/keyboard/textInputState.ts

@@ -0,0 +1,2 @@
+/// <reference path="../ts-declarations/react-native-text-input-state.d.ts" />
+export { default as TextInputState } from 'react-native/Libraries/Components/TextInput/TextInputState';

package/src/keyboard/textInputState.web.ts

@@ -0,0 +1,16 @@
+// React Native for web has no `TextInputState`: the browser owns focus. This file
+// is also what keeps the deep import in `textInputState.ts` out of the web bundle.
+// `@expo/ui/swift-ui` and `@expo/ui/jetpack-compose` have no web entry point, so a
+// cross-platform file importing either one puts this module in the web graph, and
+// without this variant the whole bundle fails to resolve rather than reaching the
+// `UnavailabilityError` those entry points already throw on web.
+export const TextInputState = {
+  currentlyFocusedInput: () => null,
+  focusInput: () => {},
+  blurInput: () => {},
+  registerInput: () => {},
+  unregisterInput: () => {},
+  isTextInput: () => false,
+  focusTextInput: () => {},
+  blurTextInput: () => {},
+};

package/src/swift-ui/Background/index.tsx

@@ -0,0 +1,38 @@
+import { requireNativeView } from 'expo';
+
+import { Slot } from '../SlotView';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type Alignment, type CommonViewModifierProps } from '../types';
+
+export interface BackgroundProps extends CommonViewModifierProps {
+  children: React.ReactNode;
+  /**
+   * The alignment of the background content relative to the base content.
+   * @default 'center'
+   */
+  alignment?: Alignment;
+}
+
+const BackgroundNativeView: React.ComponentType<BackgroundProps> = requireNativeView(
+  'ExpoUI',
+  'BackgroundView'
+);
+
+function BackgroundContent(props: { children: React.ReactNode }) {
+  return <Slot name="content">{props.children}</Slot>;
+}
+
+Background.Content = BackgroundContent;
+
+export function Background(props: BackgroundProps) {
+  const { modifiers, children, ...restProps } = props;
+
+  return (
+    <BackgroundNativeView
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      modifiers={modifiers}
+      {...restProps}>
+      {children}
+    </BackgroundNativeView>
+  );
+}

package/src/swift-ui/BottomSheet/index.tsx

@@ -2,6 +2,7 @@ import { requireNativeView } from 'expo';
 import { useState, type ComponentType, type ReactNode } from 'react';
 import { type NativeSyntheticEvent } from 'react-native';
 
+import { PresentedContent } from '../../PresentedContentContext';
 import { Slot } from '../SlotView';
 import { createViewModifierEventListener } from '../modifiers/utils';
 import { type CommonViewModifierProps } from '../types';
@@ -76,7 +77,9 @@ function BottomSheet(props: BottomSheetProps) {
         onDismiss?.();
       }}>
       {anchor != null ? <Slot name="anchor">{anchor}</Slot> : null}
-      {isMounted ? children : null}
+      {/* Only the sheet's content is presented in its own view controller. The anchor renders in
+          place, in the React Native surface, so it stays outside `PresentedContent`. */}
+      {isMounted ? <PresentedContent>{children}</PresentedContent> : null}
     </BottomSheetNativeView>
   );
 }

package/src/swift-ui/Host/index.tsx

@@ -1,6 +1,9 @@
 import { requireNativeView } from 'expo';
+import type { Ref } from 'react';
 import { I18nManager, type ColorValue, type StyleProp, type ViewStyle } from 'react-native';
 
+import { TextInputHostProvider, useTextInputHostRef } from '../../keyboard';
+import { useMergeRefs } from '../../utils/useMergeRefs';
 import { createViewModifierEventListener } from '../modifiers/utils';
 import { type CommonViewModifierProps } from '../types';
 
@@ -54,10 +57,16 @@ export interface HostProps extends CommonViewModifierProps {
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
   pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto';
+  /** @hidden */
+  ref?: Ref<any>;
 }
 
 const HostNativeView: React.ComponentType<
-  HostProps & { matchContentsVertical?: boolean; matchContentsHorizontal?: boolean }
+  HostProps & {
+    matchContentsVertical?: boolean;
+    matchContentsHorizontal?: boolean;
+    ref?: Ref<any>;
+  }
 > = requireNativeView('ExpoUI', 'HostView');
 
 /**
@@ -71,26 +80,32 @@ export function Host(props: HostProps) {
     modifiers,
     layoutDirection,
     seedColor,
+    ref,
     ...restProps
   } = props;
+  const hostRef = useTextInputHostRef();
+  const mergedRef = useMergeRefs(ref, hostRef);
 
   return (
-    <HostNativeView
-      modifiers={modifiers}
-      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
-      matchContentsVertical={
-        typeof matchContents === 'object' ? matchContents.vertical : matchContents
-      }
-      matchContentsHorizontal={
-        typeof matchContents === 'object' ? matchContents.horizontal : matchContents
-      }
-      onLayoutContent={onLayoutContent}
-      layoutDirection={
-        layoutDirection ?? (I18nManager.getConstants().isRTL ? 'rightToLeft' : 'leftToRight')
-      }
-      ignoreSafeArea={ignoreSafeArea}
-      seedColor={seedColor}
-      {...restProps}
-    />
+    <TextInputHostProvider hostRef={hostRef}>
+      <HostNativeView
+        modifiers={modifiers}
+        {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+        matchContentsVertical={
+          typeof matchContents === 'object' ? matchContents.vertical : matchContents
+        }
+        matchContentsHorizontal={
+          typeof matchContents === 'object' ? matchContents.horizontal : matchContents
+        }
+        onLayoutContent={onLayoutContent}
+        layoutDirection={
+          layoutDirection ?? (I18nManager.getConstants().isRTL ? 'rightToLeft' : 'leftToRight')
+        }
+        ignoreSafeArea={ignoreSafeArea}
+        seedColor={seedColor}
+        {...restProps}
+        ref={mergedRef}
+      />
+    </TextInputHostProvider>
   );
 }

package/src/swift-ui/Popover/index.tsx

@@ -1,6 +1,7 @@
 import { requireNativeView } from 'expo';
 import type { NativeSyntheticEvent } from 'react-native';
 
+import { PresentedContent } from '../../PresentedContentContext';
 import { Slot } from '../SlotView';
 import { createViewModifierEventListener } from '../modifiers/utils';
 import type { CommonViewModifierProps } from '../types';
@@ -40,7 +41,12 @@ function PopoverTrigger(props: { children: React.ReactNode }) {
 }
 
 function PopoverContent(props: { children: React.ReactNode }) {
-  return <Slot name="popover">{props.children}</Slot>;
+  // Presented in its own view controller; the trigger renders in place, so only this side is wrapped.
+  return (
+    <Slot name="popover">
+      <PresentedContent>{props.children}</PresentedContent>
+    </Slot>
+  );
 }
 
 Popover.Trigger = PopoverTrigger;