@mrmeg/expo-ui 0.27.0 → 0.27.1

package/CHANGELOG.md

@@ -5,6 +5,120 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [0.27.1]
+
+### Fixed
+
+- **`BottomSheet.Content` paints no fill of its own; the native surface set
+  through `backgroundStyle` is the sheet's only background.** `@expo/ui`'s iOS
+  sheet lays the hosted RN column out 16 pt below the sheet's top edge while the
+  native grabber is shown, so the column's own card fill covered everything
+  below that line and the strip behind the grabber showed the native
+  `presentationBackground` alone. Opaque theme colors matched and hid the seam,
+  but a translucent card, or a translucent `backgroundStyle`, read as two layers
+  below the line and one above it: a differently shaded band behind the grabber
+  in every app with a glass-style sheet (iPhone 17 simulator, iOS 27, `@expo/ui`
+  58.0.2, 60% card: strip 30,30,32 over a 24,24,27 body; one continuous
+  30,30,32 surface from the rim down after the change). Web (vaul panel) and
+  Android (`containerColor`) already paint the surface natively, so the column
+  fill was redundant there too. `backgroundStyle={{ backgroundColor:
+  "transparent" }}` no longer needs a `style` clearing the column; content sits
+  directly on the transparent surface, so add a fill inside the content if a
+  card behind it was intended.
+- **iOS `Dialog` and `AlertDialog` present through React Native's `Modal`, so
+  `@expo/ui`-hosted controls inside them mount and take focus.** Both dialogs
+  rendered through react-native-screens' `FullWindowOverlay` on iOS, which adds
+  its container straight to the `UIWindow` with no `UIViewController` above it.
+  `expo-modules-core`'s `ExpoSwiftUI.HostingView` attaches its
+  `UIHostingController` only when `reactViewController()` finds a parent
+  controller and otherwise removes the SwiftUI view, so every hosted control
+  inside a dialog — the package `TextInput`, and `Slider` / `SegmentedControl`
+  — was a zero-height box: no editable accessibility element, no focus, no
+  keyboard (fieldnest `start-trip-modal-keyboard-avoidance`, iOS 27 simulator,
+  0.27.0; reproduced in the template's `Dialog` `form` variant, where the
+  accessibility tree listed only the two field labels and a tap raised no
+  keyboard, while the same content mounted and focused with the overlay
+  replaced by a Fragment — but then did not move for the keyboard, because the
+  portal host sits outside `UIProvider`'s root avoidance). `DialogContent` and
+  `AlertDialogContent` now present through a transparent, unanimated
+  `overFullScreen` `Modal` on iOS, rendered inline where the dialog sits in
+  the tree instead of through the portal host: RN presents a `Modal` from the
+  view controller nearest its host view, so a portal-hosted `Modal` presents
+  from the root controller and silently fails while a native stack modal or
+  sheet is up (device-verified — the trigger reported expanded, nothing
+  appeared), while the inline one presents from the screen, native stack modal
+  or sheet that contains the dialog and stacks above it (device-verified over
+  a `presentation: "modal"` route). `portalHost` is honored on Android and web
+  only, and a `Dialog` placed inside `FullWindowOverlay`-hosted content
+  (`Drawer`, `Popover`, `Select`, `DropdownMenu`, `Tooltip`) has no view
+  controller to present from on iOS — render it at screen level and open it
+  from the item's `onPress`. The platform close request (`onRequestClose`)
+  reaches the root's `onOpenChange(false)`. The Modal is
+  outside the root keyboard avoidance, so the dialog owns it there: the
+  centered container is wrapped in the package `KeyboardAvoidingView`
+  (`behavior="padding"`), the card recenters above the keyboard, and
+  `useKeyboardAvoidance()` is `true` inside dialog content — do not wrap dialog
+  content in another `KeyboardAvoidingView`. Device-verified on iOS 27: the
+  first tap on each field focuses it, the keyboard appears, typing lands, and
+  both fields and the footer stay visible. Android and web keep the inline
+  portal-host tree unchanged; there the portal host is still outside the root
+  avoidance, so an Android dialog does not avoid the keyboard yet (follow-up).
+  `Drawer`, `Popover`, `Select`, `DropdownMenu` and `Tooltip` still render
+  through `FullWindowOverlay`, so hosted controls inside those do not mount on
+  iOS either (follow-up).
+- **Android `BottomSheet` names the host requirement its keyboard avoidance
+  depends on.** 0.27.0 said Material owns Android avoidance. That is true for
+  the window and, on `expo-modules-core` >= 57.0.4, for the hosted column too:
+  Material3's `ModalBottomSheet` shrinks the sheet with `imePadding()`,
+  `@expo/ui`'s `RNHostView` re-reports its Compose size to the shadow tree, and
+  the `flexGrow: 1, height: 0` column follows, so `Footer` and the tail of
+  `Body` stay above the keyboard and `Body` scrolls. `expo-modules-core`
+  <= 57.0.3 flushed that report only from a pre-draw listener on the activity
+  window, which does not draw while the sheet's own dialog window animates the
+  IME, so the column kept its detent height until the activity redrew
+  (expo/expo#47778, fixed by expo/expo#47810 in 57.0.4 and 58.0.0; no 56.x
+  release has it). That is the clipped `Footer` tractor-tools-direct #32 saw on
+  Expo 57 with core 57.0.3, and background/resume "fixing" it. The package adds
+  no inset or height of its own — nothing in JS can observe a size the shadow
+  tree never received — and instead warns once in development on Android when
+  the native core compiled into the app is older (`globalThis.expo`'s
+  `expoModulesCoreVersion`), and the docs state the floor: `npx expo install
+  --fix` (or `bun update expo-modules-core`), then rebuild. iOS and web are
+  untouched.
+- **Android state surfaces no longer re-parent their children on a
+  `disabled` / `pending` / `checked` flip.** `Button` (surface and content),
+  `TextInput`, `Slider`, `InputOTP` and the `Switch` labels express state as
+  `opacity` on a plain `View`. On Fabric a View whose only stacking-context
+  prop is that opacity has its children hoisted into the parent while the
+  opacity is 1 and pulled back under it when the opacity changes, and a flip
+  that raced a navigation pop crashed with `addViewAt: cannot insert view …
+  View already has a parent` (doglog #57, Pixel 6a). Those Views now set
+  `collapsable={false}` on Android so the native tree shape is fixed across
+  state. iOS and web are unchanged. `stateSurfaceProps()` from
+  `@mrmeg/expo-ui/lib` is the same guard for app-owned surfaces; RN's
+  `Pressable` already pins itself, so `Pressable`-based controls need nothing.
+
+- **`BottomSheet` names the ancestor `ScrollView` that swallows the first tap
+  on a sheet control while a sheet field is focused (Android).** Sheet content
+  is drawn in the Material dialog window but stays in the screen's React tree,
+  and React Native's responder negotiation walks that tree: a `ScrollView`
+  around the `BottomSheet` on the default `keyboardShouldPersistTaps="never"`
+  claims a tap on `Footer` (or any sheet control) in the capture phase once a
+  field is focused — RN's `Keyboard` reports the sheet's IME from the activity
+  root — and blurs the field on release, so the keyboard closes and `onPress`
+  never runs (Pixel_10 / API 36, `@expo/ui` 58.0.2: 0 of 3 Footer taps fired
+  inside a default `ScrollView`, 3 of 3 inside
+  `keyboardShouldPersistTaps="always"` or a plain `View`; `Body`'s own `always`
+  covers only ScrollViews inside the sheet). Nothing inside the tree can preempt
+  a capture-phase claim,
+  so `BottomSheet.Content` now warns once in development on Android when a
+  touch starts on its column without having reached the column's own capture
+  handler while a package `TextInput` holds focus — the exact signature of that
+  claim — and the docs state the remedy: `keyboardShouldPersistTaps="always"`
+  (or `"handled"`) on scroll views that contain a sheet, or `DismissKeyboard`,
+  which already sets it. The tap-away boundary itself is unchanged; iOS and web
+  are untouched.
+
 ## [0.27.0]
 
 ### Changed

package/LLM_USAGE.md

@@ -87,17 +87,46 @@ platform owns gestures and keyboard avoidance: `swipeEnabled`, `avoidKeyboard`,
 and `dismissKeyboardOnDrag` are accepted for call-site ergonomics but have no
 effect. On iOS the sheet presentation lifts or shrinks the hosted content so
 `Footer` and the tail of `Body` end at the keyboard's top (device-verified);
-Android avoidance is Material3's; do not nest a `KeyboardAvoidingView` inside a
+on Android Material3 shrinks the sheet and `@expo/ui`'s `RNHostView` re-reports
+its size to the shadow tree, which needs the app built against
+`expo-modules-core` >= 57.0.4 (expo/expo#47778) — below that the column keeps
+its detent height and `Footer` sits under the keyboard; the sheet warns once in
+dev on Android, and the fix is `npx expo install --fix` plus a rebuild, never
+padding in app code. Do not nest a `KeyboardAvoidingView` inside a
 sheet. `BottomSheet.Content` mounts the tap-away keyboard-dismiss boundary on
 its column, and `BottomSheet.Body` sets `keyboardShouldPersistTaps="always"` on
-its ScrollView so that boundary owns dismissal; do not pass `never`. `Slider`
-and `SegmentedControl` are also `@expo/ui`-backed.
+its ScrollView so that boundary owns dismissal; do not pass `never`. Sheet
+content stays in the screen's React tree although it is drawn in another
+window, so a ScrollView *around* a `BottomSheet` on the default
+`keyboardShouldPersistTaps="never"` claims the first tap on any sheet control
+(`Footer` included) while a sheet field is focused and blurs the field instead:
+give scroll views that contain a sheet `keyboardShouldPersistTaps="always"` (or
+`"handled"`), or use `DismissKeyboard`; the sheet warns once in dev on Android
+when it sees such a tap. `Slider` and `SegmentedControl` are also
+`@expo/ui`-backed.
 
 `BottomSheet.Content` themes the native sheet surface with the card color. Pass
 `backgroundStyle={{ backgroundColor: "transparent" }}`, plus a `style` clearing
 the content column's card fill, when custom chrome such as a glass backdrop must
 show through.
 
+`Dialog` and `AlertDialog` present their content through React Native's `Modal`
+on iOS, rendered inline where the dialog sits (transparent, `overFullScreen`,
+unanimated; the package fade/scale run inside), so it stacks above whatever
+screen, native stack modal or sheet contains it; `portalHost` is honored on
+Android and web only. `@expo/ui`-hosted controls (`TextInput`, `Slider`,
+`SegmentedControl`) need a view controller above them and render as empty,
+unfocusable boxes inside react-native-screens' `FullWindowOverlay`, which
+`Drawer`, `Popover`, `Select`, `DropdownMenu` and `Tooltip` still use on iOS —
+keep hosted controls out of those, and do not place a `Dialog` inside their
+content (no view controller to present from; render it at screen level and open
+it from the item's `onPress`). The dialog owns keyboard avoidance inside its Modal (package
+`KeyboardAvoidingView`, `behavior="padding"`; the card recenters above the
+keyboard and `useKeyboardAvoidance()` is `true` in dialog content); do not wrap
+dialog content in another `KeyboardAvoidingView`. Android and web render dialog
+content inline into the portal host, outside the root avoidance, so an Android
+dialog does not avoid the keyboard yet.
+
 i18n is optional. Do not add app-level i18n setup just to use this package;
 plain children and `text` props work without `i18next` or `react-i18next`. `tx`
 props render their fallback text when provided, otherwise the key. Package-owned
@@ -282,6 +311,7 @@ already scope label selectability; ordinary iOS/web text stays selectable.
 - `Carousel` for a horizontal snap row of a known, small set of slides. It renders every child (no virtualization), so slides survive into the exported HTML shell and the first client frame; use `FlatList` for large or unbounded data. Dots are pressable and jump to their slide. A fractional `itemWidth` (default `0.85`) measures the viewport until the first layout, so pass absolute pixels (`> 1`) when the parent is narrower than the window and the first frame matters.
 - `Avatar` with both `source` and `name` whenever both exist: `name` supplies the initials shown when the image is absent, still loading, or failed, plus the default accessibility label. Inside `AvatarGroup`, set `size`/`shape` on the group — children inherit them and gain the ring; the group's count is a hidden summary node, so each member stays individually announceable and the group needs no `accessible` wrapper.
 - Pair a standalone `Label` with its control using two DISTINCT ids: `nativeID` is the label's own id, `htmlFor` is the input's id (`<Label nativeID="email-label" htmlFor="email-input">` + `<TextInput nativeID="email-input" />`). One id on both renders duplicate ids on web and associates nothing. Prefer `TextInput`'s own `label` prop when no separate label element is needed.
+- A plain `View` whose `opacity`/`pointerEvents` follows state must be `collapsable={false}` on Android (Fabric re-parents its children on the flip; a flip racing a navigation pop crashes). Package surfaces are pinned; spread `stateSurfaceProps()` from `@mrmeg/expo-ui/lib` on app-owned ones. `Pressable` already pins itself.
 - `TextInput` `onBlur` fires only after a real focus on Android (the native field's first-composition blur is dropped in the package); validate on blur directly and do not add a touched-fields guard in app code.
 - `Drawer.Header` takes `icon`, `title`, and `action` slots for a compact app-brand row; put `Drawer.ToggleCollapse` in `action` for a trailing rail control. `Drawer.Content` owns safe-area top/bottom padding — do not duplicate it in children.
 

package/README.md

@@ -558,6 +558,16 @@ web, where the window cannot be read during export or hydration.
   Native targets add computed hit slop up to 44px. Nested `StyledText` inherits
   the Button size, so use `size="sm"` for popover, tooltip, and toolbar
   triggers.
+- A plain `View` whose `opacity` or `pointerEvents` follows state (`disabled`,
+  `loading`, `checked`, `editable`) must be `collapsable={false}` on Android.
+  Fabric hoists the children of a filled or bordered View into its parent while
+  the opacity is 1 and pulls them back when it changes, and a flip racing a
+  navigation pop crashes with `addViewAt: … View already has a parent`. The
+  package pins its own surfaces (`Button`, `TextInput`, `Slider`, `InputOTP`,
+  `Switch` labels); spread `stateSurfaceProps()` from `@mrmeg/expo-ui/lib` on
+  app-owned surfaces (`<View {...stateSurfaceProps()} style={{ opacity:
+  disabled ? 0.5 : 1 }} />`). `Pressable` already pins itself. iOS and web get
+  no prop.
 - Pair a standalone `Label` with its control using two DISTINCT ids: `nativeID`
   is the label's own id, `htmlFor` is the input's id (`<Label
   nativeID="email-label" htmlFor="email-input">` + `<TextInput
@@ -581,9 +591,16 @@ web, where the window cannot be read during export or hydration.
   hosted content above the keyboard — a short sheet is lifted whole, a tall one
   is shrunk — so `Footer` and the tail of `Body` end at the keyboard's top with
   only their home-indicator padding as clearance (device-verified on iOS 27 with
-  `@expo/ui` 58); on Android Material3's `ModalBottomSheet` owns it (no JS
-  keyboard signal exists inside the Compose dialog window); web has none. Do not
-  wrap sheet content in another `KeyboardAvoidingView`: it would lift twice.
+  `@expo/ui` 58); on Android Material3's `ModalBottomSheet` shrinks the sheet
+  for the keyboard and `@expo/ui`'s `RNHostView` re-reports its size to the
+  React Native shadow tree, so the hosted column follows and `Footer` stays
+  above the keyboard — this needs the app built against `expo-modules-core`
+  >= 57.0.4 (expo/expo#47778; older cores dropped that size update until the
+  activity redrew, leaving `Footer` under the keyboard; no 56.x release has the
+  fix). Run `npx expo install --fix` (or `bun update expo-modules-core`) and
+  rebuild; the sheet warns once in development on Android when the native core
+  is older. Web has none. Do not wrap sheet content in another
+  `KeyboardAvoidingView`: it would lift twice.
   The sheet hosts its content in a separate
   native window outside the app's `DismissKeyboard`, so `BottomSheet.Content`
   mounts its own tap-away keyboard-dismiss boundary on the content column: it
@@ -592,15 +609,54 @@ web, where the window cannot be read during export or hydration.
   matching `DismissKeyboard`. `BottomSheet.Body` sets
   `keyboardShouldPersistTaps="always"` on its ScrollView so that column boundary
   owns dismissal; do not pass `never`, which lets RN claim the first tap on a
-  body control and blur the field instead. Android has only two snap states
+  body control and blur the field instead. That covers ScrollViews inside the
+  sheet only: the sheet's content stays in the screen's React tree even though
+  it is drawn in another window, and RN's responder negotiation walks that tree,
+  so a ScrollView *around* the `BottomSheet` left on the default
+  `keyboardShouldPersistTaps="never"` claims the first tap on any sheet control
+  (`Footer` included) while a sheet field is focused and blurs the field instead
+  of firing the control. Set `keyboardShouldPersistTaps="always"` (or
+  `"handled"`) on scroll views that contain a sheet, or use `DismissKeyboard`,
+  which already does; the sheet warns once in development on Android when it
+  observes such a swallowed tap. Android has only two snap states
   (partial / expanded) and maps extra snap points to the nearest; because
   Material ignores percentage snap points, the Android body fills the rendered
   sheet height rather than a window-percentage cap. `BottomSheet.Content` also
   takes `backgroundStyle`, merged over the themed card default on the native
   sheet surface (web panel, Android `containerColor`, iOS
-  `presentationBackground`) — pass `{ backgroundColor: "transparent" }`, plus a
-  `style` clearing the content column's card fill, to let custom chrome such as
-  a glass backdrop show through.
+  `presentationBackground`). That surface is the sheet's only background: the
+  content column paints no fill of its own, so a translucent card reads as one
+  layer from the grabber down (a second, column-level fill made the 16 pt
+  strip behind the iOS grabber a different shade), and
+  `{ backgroundColor: "transparent" }` alone lets custom chrome such as a glass
+  backdrop show through.
+- `Dialog` and `AlertDialog` present their content through React Native's
+  `Modal` on iOS, rendered inline where the dialog sits in the tree
+  (transparent, `overFullScreen`, no animation of its own; the package's fade
+  and scale still run inside). The Modal presents a real view controller, which
+  `@expo/ui`-hosted controls need: `expo-modules-core`'s SwiftUI hosting view
+  drops its content when no `UIViewController` sits above it, so inside
+  react-native-screens' `FullWindowOverlay` — which adds its container straight
+  to the window — a package `TextInput`, `Slider` or `SegmentedControl`
+  rendered as an empty box that could not take focus (device-verified on
+  iOS 27). RN presents a `Modal` from the view controller nearest its host
+  view, so the dialog stacks above whatever screen, native stack modal or sheet
+  contains it (device-verified over a `presentation: "modal"` route);
+  `portalHost` is honored on Android and web only. `Drawer`, `Popover`,
+  `Select`, `DropdownMenu` and `Tooltip` still use that overlay on iOS, so do
+  not put `@expo/ui`-hosted controls inside them yet, and do not place a
+  `Dialog` inside their content either — it has no view controller to present
+  from there; render it at screen level and open it from the item's
+  `onPress`. The iOS Modal is outside `UIProvider`'s root
+  keyboard avoidance, so the dialog owns it there: the centered container is a
+  package `KeyboardAvoidingView` (`behavior="padding"`), the card recenters
+  above the keyboard with its fields and footer visible, and
+  `useKeyboardAvoidance()` is `true` inside dialog content. Do not wrap dialog
+  content in another `KeyboardAvoidingView`. The platform close request
+  (hardware back, TV menu) routes to the root's `onOpenChange(false)`. Android
+  and web render dialog content inline into the portal host, which sits
+  outside the root avoidance, so an Android dialog does not avoid the keyboard
+  yet.
 - `Carousel` renders every child (no virtualization), so slides survive into
   the exported HTML shell and the first client frame; use `FlatList` for large
   or unbounded data. An `itemWidth` below 1 (default `0.85`) is a fraction of

package/dist/components/BottomSheet.d.ts

@@ -20,8 +20,18 @@ import { ViewProps, StyleProp, ViewStyle, ScrollViewProps } from "react-native";
  * nothing in JS can measure the column in screen space (`measureInWindow`
  * inside the `layoutRoot` sheet host reports host-relative coordinates), and a
  * window-height estimate would lift a lifted sheet twice. Android: Material3's
- * `ModalBottomSheet` owns it (no JS keyboard signal exists inside the Compose
- * dialog window). Web: none. Never nest a `KeyboardAvoidingView` in a sheet.
+ * `ModalBottomSheet` shrinks the sheet with `imePadding()`, `@expo/ui`'s
+ * `RNHostView` re-reports its Compose size to the shadow tree, and the
+ * `flexGrow: 1, height: 0` column the host wraps our children in follows, so
+ * `Footer` and the tail of `Body` stay above the keyboard. That report is
+ * delivered reliably only by `expo-modules-core` >= 57.0.4 (expo/expo#47778,
+ * fixed by #47810): older cores flushed it from a pre-draw listener on the
+ * activity window, which does not draw while the sheet's dialog window animates
+ * the IME, so the column kept its detent height until the activity redrew. The
+ * package warns once in dev on Android below that floor
+ * (`bottomSheetHostSupport.ts`). No JS keyboard signal exists inside the
+ * Compose dialog window, and none is needed. Web: none. Never nest a
+ * `KeyboardAvoidingView` in a sheet.
  *
  * Platform-owned behaviors (props accepted for ergonomics, but the platform
  * decides):
@@ -37,7 +47,19 @@ import { ViewProps, StyleProp, ViewStyle, ScrollViewProps } from "react-native";
  *   - `Body` sets `keyboardShouldPersistTaps="always"` on its ScrollView so RN's
  *     own tap-dismissal never claims the first tap on a chip, button or field
  *     while a sheet field is focused; the `Content` boundary owns tap-away
- *     dismissal instead.
+ *     dismissal instead. That covers ScrollViews *inside* the sheet only. The
+ *     sheet's content is drawn in another native window but stays in the
+ *     screen's React tree, and RN's responder negotiation walks that tree, so a
+ *     ScrollView *around* the `BottomSheet` with the default
+ *     `keyboardShouldPersistTaps="never"` claims a tap on any sheet control
+ *     (`Footer` included) in the capture phase once a field is focused and
+ *     blurs the field on release: the keyboard closes and the control never
+ *     fires (Pixel_10 / API 36: 0 of 3 taps inside a default ScrollView, 3 of 3
+ *     inside `always` or a plain View). Nothing inside the tree can preempt a
+ *     capture-phase claim, so `Content` warns once in dev on Android when it
+ *     observes one (`useAncestorClaimWarning`); the remedy is
+ *     `keyboardShouldPersistTaps="always"` / `"handled"` on scroll views that
+ *     contain a sheet, or `DismissKeyboard`, which already sets it.
  *
  * Scrollable bodies: the native sheet doesn't bound the hosted RN content to
  * the detent height, so a tall `Body` overflows and clips its footer/tail. When
@@ -138,11 +160,12 @@ interface BottomSheetContentProps extends ViewProps {
     /** Accepted for call-site ergonomics; ignored (platform owns keyboard). */
     dismissKeyboardOnDrag?: boolean;
     /**
-     * Style for the native sheet surface behind the RN content — the web (vaul)
-     * panel, Android `containerColor`, iOS `presentationBackground`. Merged over
-     * the themed card default, so `{ backgroundColor: "transparent" }` lets a
-     * custom chrome (e.g. a glass backdrop) show through. The RN content column
-     * paints its own card fill too; clear that via `style`.
+     * Style for the native sheet surface — the web (vaul) panel, Android
+     * `containerColor`, iOS `presentationBackground`. Merged over the themed card
+     * default. This is the sheet's only background: the RN content column paints
+     * no fill of its own, so a translucent color here reads as one layer from the
+     * grabber down, and `{ backgroundColor: "transparent" }` lets custom chrome
+     * (e.g. a glass backdrop) show through with nothing to clear via `style`.
      */
     backgroundStyle?: StyleProp<ViewStyle>;
     style?: StyleProp<ViewStyle>;
@@ -165,6 +188,12 @@ interface BottomSheetCloseProps {
     children: React.ReactNode;
     style?: StyleProp<ViewStyle>;
 }
+/**
+ * Dev warning (Android) when an ancestor claimed a tap inside the sheet before
+ * the sheet was asked, while a package field held focus. See the header and
+ * `useAncestorClaimWarning`.
+ */
+export declare const bottomSheetAncestorClaimWarning: string;
 declare function useBottomSheetContext(): BottomSheetContextValue;
 declare function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, snapPoints, closeOnBackdropPress, children, }: BottomSheetProps): React.JSX.Element;
 declare function BottomSheetTrigger({ asChild, children, style: styleOverride }: BottomSheetTriggerProps): React.JSX.Element;

package/dist/components/BottomSheet.js

@@ -8,7 +8,8 @@ import { spacing } from "../constants/spacing.js";
 import { useScalePress } from "../hooks/useScalePress.js";
 import { TextColorContext, TextClassContext } from "./StyledText.context";
 import { Icon } from "./Icon.js";
-import { useKeyboardDismissResponder } from "./keyboardDismiss.js";
+import { useAncestorClaimWarning, useKeyboardDismissResponder } from "./keyboardDismiss.js";
+import { warnIfBottomSheetHostDropsResize } from "./bottomSheetHostSupport.js";
 const DEFAULT_SNAP_POINTS = ["50%"];
 function clampSnapIndex(index, maxSnapIndex) {
     return Math.min(Math.max(index, 0), maxSnapIndex);
@@ -86,6 +87,18 @@ function bottomSheetRootReducer(state, action) {
 // ============================================================================
 // Context
 // ============================================================================
+/**
+ * Dev warning (Android) when an ancestor claimed a tap inside the sheet before
+ * the sheet was asked, while a package field held focus. See the header and
+ * `useAncestorClaimWarning`.
+ */
+export const bottomSheetAncestorClaimWarning = "@mrmeg/expo-ui BottomSheet: an ancestor claimed a tap inside the sheet before the sheet " +
+    "was asked, while a sheet field was focused, so the tapped control did not fire and the " +
+    "keyboard was dismissed instead. That is usually a ScrollView around the BottomSheet on React " +
+    'Native\'s default keyboardShouldPersistTaps="never" (sheet content stays in the screen\'s ' +
+    "React tree even though it is drawn in another window). Set " +
+    'keyboardShouldPersistTaps="always" or "handled" on scroll views that contain the ' +
+    "BottomSheet, or wrap the screen in DismissKeyboard.";
 const BottomSheetContext = createContext(null);
 function useBottomSheetContext() {
     const context = use(BottomSheetContext);
@@ -272,6 +285,15 @@ swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDra
     // dead-space tap dismisses on release only, through the registered field's
     // own window-independent blur handle.
     const dismissResponderProps = useKeyboardDismissResponder();
+    // Android, dev, once per session: name an ancestor ScrollView that claimed a
+    // tap inside the sheet in the capture phase (nothing in here can preempt it).
+    const columnResponderProps = useAncestorClaimWarning(dismissResponderProps, bottomSheetAncestorClaimWarning);
+    // Android only, dev only, once per session: name the host floor the column's
+    // keyboard avoidance depends on when the app was built against an
+    // `expo-modules-core` that drops `RNHostView`'s size update (see the header).
+    useEffect(() => {
+        warnIfBottomSheetHostDropsResize();
+    }, []);
     // Boolean open → native imperative index. The root resets snapIndex to the
     // highest point while closed; -1 keeps the native sheet closed.
     const index = open ? snapIndex : -1;
@@ -287,7 +309,11 @@ swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDra
     // and Material's `ModalBottomSheet` ignores percentage snap points
     // (partial / expanded only) — a window-percentage cap would leave the Body
     // short of the rendered sheet with a blank strip below it. Android therefore
-    // keeps `flex:1` alone (see the content column style).
+    // keeps `flex:1` alone (see the content column style). The same measured
+    // height is how the column follows the keyboard: Material shrinks the sheet
+    // with `imePadding()` and `RNHostView` re-reports its Compose size to the
+    // shadow tree, which needs `expo-modules-core` >= 57.0.4 to always land
+    // (expo/expo#47778) — see `warnIfBottomSheetHostDropsResize` above.
     const expandedSnap = snapPoints[snapPoints.length - 1];
     const detentHeight = typeof expandedSnap === "number"
         ? expandedSnap
@@ -321,15 +347,16 @@ swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDra
             { backgroundColor: theme.colors.card },
             backgroundStyleOverride,
         ]), children: _jsx(TextColorContext.Provider, { value: theme.colors.foreground, children: _jsx(TextClassContext.Provider, { value: "", children: _jsxs(View, { testID: testID, style: [
-                        {
-                            flex: 1,
-                            // Themes the content surface across all platforms regardless of
-                            // native sheet chrome.
-                            backgroundColor: theme.colors.card,
-                        },
+                        // No fill of its own: the native surface (`backgroundStyle`) is
+                        // the sheet's only background. On iOS the hosted column starts
+                        // 16 pt below the sheet's top edge when the native grabber is
+                        // shown, so a second, column-level fill made a translucent card
+                        // read as two layers below that line and one above it — a
+                        // differently colored strip behind the grabber.
+                        { flex: 1 },
                         Platform.OS !== "android" && { maxHeight: detentHeight },
                         styleOverride,
-                    ], ...dismissResponderProps, children: [children, showFloatingClose && (_jsx(SheetCloseButton, { style: {
+                    ], ...columnResponderProps, children: [children, showFloatingClose && (_jsx(SheetCloseButton, { style: {
                                 // The sheet card sits below the status bar, so no top inset
                                 // is needed — just clear the sheet's own top edge / handle.
                                 position: "absolute",

package/dist/components/Button.js

@@ -11,6 +11,7 @@ import { useFontStyle } from "../hooks/useFontStyle.js";
 import { useScalePress } from "../hooks/useScalePress.js";
 import { useThemeStore } from "../state/themeStore.js";
 import { createThemedStyles } from "../lib/themedStyles.js";
+import { stateSurfaceProps } from "../lib/stateSurface.js";
 const SIZE_CONFIGS = {
     sm: {
         paddingVertical: spacing.xxs,
@@ -181,7 +182,10 @@ function ButtonRoot(props) {
             return nextWidth;
         });
     }, [fullWidth, loading]);
-    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(TextStyleContext.Provider, { value: labelTextStyle, children: _jsx(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: !!isDisabled, busy: loading }, ...rest, onPressIn: handlePressIn, onPressOut: handlePressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: { alignSelf: fullWidth ? "stretch" : flattenedStyle?.alignSelf ?? "flex-start" }, hitSlop: rest.hitSlop ?? (Platform.OS === "web" ? undefined : getNativeHitSlop(sizeConfig)), disabled: isDisabled, children: (state) => (_jsx(Animated.View, { style: scaleStyle, children: _jsxs(View, { style: [
+    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(TextStyleContext.Provider, { value: labelTextStyle, children: _jsx(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: !!isDisabled, busy: loading }, ...rest, onPressIn: handlePressIn, onPressOut: handlePressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: { alignSelf: fullWidth ? "stretch" : flattenedStyle?.alignSelf ?? "flex-start" }, hitSlop: rest.hitSlop ?? (Platform.OS === "web" ? undefined : getNativeHitSlop(sizeConfig)), disabled: isDisabled, children: (state) => (_jsx(Animated.View, { style: scaleStyle, children: _jsxs(View
+                        // Android: fixed native tree across disabled/pressed/loading
+                        // flips (see `stateSurfaceProps`).
+                        , { ...stateSurfaceProps(), style: [
                                 styles.button,
                                 // Host-app radius override (see `setShape`). Sits right
                                 // after the static radius so presets, state styles, and —
@@ -205,7 +209,7 @@ function ButtonRoot(props) {
                                 loading && restingWidth !== undefined && !fullWidth && { width: restingWidth },
                                 // Spread array styles from Slot to prevent nested arrays on web
                                 ...(Array.isArray(styleOverride) ? styleOverride : [styleOverride]),
-                            ], onLayout: handleButtonLayout, children: [loading && (_jsx(View, { style: [styles.loaderOverlay, { pointerEvents: "none" }], children: _jsx(ActivityIndicator, { size: "small", color: textColor }) })), _jsxs(View, { style: [styles.content, loading && styles.loadingContent, { pointerEvents: loading ? "none" : "auto" }], children: [!!LeftAccessory && (_jsx(LeftAccessory, { style: styles.leftAccessory, pressableState: state, disabled: isDisabled })), (tx || text) ? (_jsx(StyledText, { tx: tx, text: text, txOptions: txOptions, style: [
+                            ], onLayout: handleButtonLayout, children: [loading && (_jsx(View, { style: [styles.loaderOverlay, { pointerEvents: "none" }], children: _jsx(ActivityIndicator, { size: "small", color: textColor }) })), _jsxs(View, { ...stateSurfaceProps(), style: [styles.content, loading && styles.loadingContent, { pointerEvents: loading ? "none" : "auto" }], children: [!!LeftAccessory && (_jsx(LeftAccessory, { style: styles.leftAccessory, pressableState: state, disabled: isDisabled })), (tx || text) ? (_jsx(StyledText, { tx: tx, text: text, txOptions: txOptions, style: [
                                                 labelTextStyle,
                                                 state.pressed && styles.pressedText,
                                                 state.pressed && pressedTextStyleOverride,

package/dist/components/Dialog.js

@@ -1,16 +1,87 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { Platform, StyleSheet, View } from "react-native";
-import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Modal, Platform, StyleSheet, View } from "react-native";
 import * as DialogPrimitive from "@rn-primitives/dialog";
 import * as AlertDialogPrimitive from "@rn-primitives/alert-dialog";
 import { AnimatedView } from "./AnimatedView.js";
+import { KeyboardAvoidingView } from "./KeyboardAvoidingView.js";
 import { TextClassContext, TextColorContext } from "./StyledText.context";
 import { StyledText } from "./StyledText.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import { palette } from "../constants/colors.js";
-const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
+// ============================================================================
+// Presentation
+// ============================================================================
+/** The Modal follows the app's own orientation mask instead of RN's portrait-only default. */
+const SUPPORTED_ORIENTATIONS = [
+    "portrait",
+    "portrait-upside-down",
+    "landscape",
+    "landscape-left",
+    "landscape-right",
+];
+/**
+ * Presentation for dialog content.
+ *
+ * iOS presents through React Native's `Modal`, rendered inline where the
+ * dialog sits in the tree rather than through the portal host. Until 0.27.1
+ * both dialogs rendered into `UIProvider`'s portal host inside
+ * react-native-screens' `FullWindowOverlay`, which stacks above native stack
+ * modals by adding its container straight to the `UIWindow`. No
+ * `UIViewController` sits above that container, and `expo-modules-core`'s
+ * `ExpoSwiftUI.HostingView` — which attaches its `UIHostingController` only
+ * when `reactViewController()` finds a parent controller — removed the SwiftUI
+ * view instead. Every `@expo/ui`-hosted control inside (`TextInput`, `Slider`,
+ * `SegmentedControl`) was a zero-height box: no editable element, no focus, no
+ * keyboard (fieldnest on iOS 27, `@mrmeg/expo-ui` 0.27.0; reproduced in the
+ * template's `Dialog` `form` variant — the accessibility tree listed only the
+ * field labels, and the same content mounted with the overlay removed).
+ *
+ * `Modal` presents a real view controller, so hosted controls mount and take
+ * focus on the first tap. RN presents it from the view controller nearest the
+ * `Modal`'s own host view, which is why it renders inline: a `Modal` in the
+ * root portal host presents from the root controller and silently fails
+ * whenever that controller already presents a native stack modal or a sheet
+ * (device-verified: the trigger reported expanded, nothing appeared). Inline,
+ * the presenter is whatever screen, native stack modal or sheet contains the
+ * dialog, and the dialog stacks above it. The trade-off: content hosted by
+ * `FullWindowOverlay` (`Drawer`, `Popover`, `Select`, `DropdownMenu`,
+ * `Tooltip`) has no view controller either, so a dialog placed inside that
+ * content cannot present on iOS — render it at screen level and open it from
+ * the item's `onPress`.
+ *
+ * Android and web render into the portal host, as before.
+ */
+function DialogPresentation({ Portal, open, portalHost, onRequestClose, children, }) {
+    if (Platform.OS !== "ios") {
+        return _jsx(Portal, { hostName: portalHost, children: children });
+    }
+    if (!open) {
+        return null;
+    }
+    return (_jsx(Modal, { visible: true, transparent: true, animationType: "none", presentationStyle: "overFullScreen", supportedOrientations: SUPPORTED_ORIENTATIONS, onRequestClose: onRequestClose, children: children }));
+}
+/**
+ * Keyboard avoidance owner for dialog content.
+ *
+ * On iOS the `Modal` above is presented outside `UIProvider`'s root
+ * `KeyboardAvoidingView`, so nothing else can keep a focused dialog field and
+ * the footer above the keyboard: this wrapper pads the centered container by
+ * the keyboard height, and the card (capped at 85% of the remaining height)
+ * recenters in the space that is left. It is the package `KeyboardAvoidingView`,
+ * so `useKeyboardAvoidance()` is `true` inside `DialogContent` and a
+ * `DismissKeyboard` in dialog content adds no second layer. Do not wrap dialog
+ * content in another `KeyboardAvoidingView`.
+ *
+ * Android and web keep the portal-host tree unchanged; the portal host sits
+ * outside the root avoidance there, and a dialog is not keyboard-avoided yet.
+ */
+function DialogKeyboardAvoidance({ children }) {
+    if (Platform.OS !== "ios") {
+        return _jsx(_Fragment, { children: children });
+    }
+    return (_jsx(KeyboardAvoidingView, { style: overlayStyles.fill, behavior: "padding", keyboardVerticalOffset: 0, children: children }));
+}
 // ============================================================================
 // Dialog
 // ============================================================================
@@ -26,8 +97,18 @@ function DialogRoot({ children, ...props }) {
 }
 function DialogContent({ portalHost, style, children, ...props }) {
     const { theme, getShadowStyle, getContrastingColor } = useTheme();
+    const { open, onOpenChange } = DialogPrimitive.useRootContext();
     const textColor = getContrastingColor(theme.colors.popover, palette.white, palette.black);
-    return (_jsx(DialogPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(DialogPrimitive.Overlay
+    return (_jsx(DialogPresentation, { Portal: DialogPrimitive.Portal, open: open, portalHost: portalHost, onRequestClose: () => onOpenChange(false), children: _jsx(DialogPrimitive.Overlay
+        // On web the primitive wraps the overlay in a react-native-web
+        // Pressable whose click handler stops propagation unconditionally.
+        // With that Pressable between the overlay and the Radix content,
+        // outside presses (mouse and touch) and Escape never dismissed the
+        // dialog, so a dialog without a Close button was stuck. `asChild`
+        // makes the primitive clone our fade wrapper instead, removing the
+        // Pressable; Radix dismissal then works. Native keeps the Pressable,
+        // which is what implements closeOnPress there.
+        , { 
             // On web the primitive wraps the overlay in a react-native-web
             // Pressable whose click handler stops propagation unconditionally.
             // With that Pressable between the overlay and the Radix content,
@@ -36,20 +117,11 @@ function DialogContent({ portalHost, style, children, ...props }) {
             // makes the primitive clone our fade wrapper instead, removing the
             // Pressable; Radix dismissal then works. Native keeps the Pressable,
             // which is what implements closeOnPress there.
-            , { 
-                // On web the primitive wraps the overlay in a react-native-web
-                // Pressable whose click handler stops propagation unconditionally.
-                // With that Pressable between the overlay and the Radix content,
-                // outside presses (mouse and touch) and Escape never dismissed the
-                // dialog, so a dialog without a Close button was stuck. `asChild`
-                // makes the primitive clone our fade wrapper instead, removing the
-                // Pressable; Radix dismissal then works. Native keeps the Pressable,
-                // which is what implements closeOnPress there.
-                asChild: Platform.OS === "web", style: StyleSheet.flatten([
-                    StyleSheet.absoluteFill,
-                    { backgroundColor: theme.colors.overlay },
-                    Platform.OS === "web" && { zIndex: 50 },
-                ]), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, style: StyleSheet.absoluteFill, children: _jsx(View, { style: overlayStyles.centeredContainer, children: _jsx(AnimatedView, { type: "scale", enterDuration: 250, style: overlayStyles.sizer, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(DialogPrimitive.Content, { style: StyleSheet.flatten([
+            asChild: Platform.OS === "web", style: StyleSheet.flatten([
+                StyleSheet.absoluteFill,
+                { backgroundColor: theme.colors.overlay },
+                Platform.OS === "web" && { zIndex: 50 },
+            ]), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, style: StyleSheet.absoluteFill, children: _jsx(DialogKeyboardAvoidance, { children: _jsx(View, { style: overlayStyles.centeredContainer, children: _jsx(AnimatedView, { type: "scale", enterDuration: 250, style: overlayStyles.sizer, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(DialogPrimitive.Content, { style: StyleSheet.flatten([
                                             {
                                                 backgroundColor: theme.colors.popover,
                                                 borderColor: theme.colors.border,
@@ -119,12 +191,13 @@ function AlertDialogRoot({ children, ...props }) {
 }
 function AlertDialogContent({ portalHost, style, children, ...props }) {
     const { theme, getShadowStyle, getContrastingColor } = useTheme();
+    const { open, onOpenChange } = AlertDialogPrimitive.useRootContext();
     const textColor = getContrastingColor(theme.colors.popover, palette.white, palette.black);
-    return (_jsx(AlertDialogPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(AlertDialogPrimitive.Overlay, { style: StyleSheet.flatten([
-                    StyleSheet.absoluteFill,
-                    { backgroundColor: theme.colors.overlay },
-                    Platform.OS === "web" && { zIndex: 52 },
-                ]), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, style: StyleSheet.absoluteFill, children: _jsx(View, { style: overlayStyles.centeredContainer, children: _jsx(AnimatedView, { type: "scale", enterDuration: 250, style: overlayStyles.sizer, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(AlertDialogPrimitive.Content, { style: StyleSheet.flatten([
+    return (_jsx(DialogPresentation, { Portal: AlertDialogPrimitive.Portal, open: open, portalHost: portalHost, onRequestClose: () => onOpenChange(false), children: _jsx(AlertDialogPrimitive.Overlay, { style: StyleSheet.flatten([
+                StyleSheet.absoluteFill,
+                { backgroundColor: theme.colors.overlay },
+                Platform.OS === "web" && { zIndex: 52 },
+            ]), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, style: StyleSheet.absoluteFill, children: _jsx(DialogKeyboardAvoidance, { children: _jsx(View, { style: overlayStyles.centeredContainer, children: _jsx(AnimatedView, { type: "scale", enterDuration: 250, style: overlayStyles.sizer, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(AlertDialogPrimitive.Content, { style: StyleSheet.flatten([
                                             {
                                                 backgroundColor: theme.colors.popover,
                                                 borderColor: theme.colors.border,
@@ -175,6 +248,11 @@ const AlertDialog = Object.assign(AlertDialogRoot, {
 // Shared styles
 // ============================================================================
 const overlayStyles = StyleSheet.create({
+    // The keyboard-avoiding wrapper fills the overlay so its bottom padding
+    // shrinks the centered container instead of the card.
+    fill: {
+        flex: 1,
+    },
     centeredContainer: {
         flex: 1,
         justifyContent: "center",

package/dist/components/InputOTP.js

@@ -5,6 +5,7 @@ import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import { StyledText } from "./StyledText.js";
 import { createThemedStyles } from "../lib/themedStyles.js";
+import { stateSurfaceProps } from "../lib/stateSurface.js";
 const CELL_WIDTH = 36;
 const CELL_HEIGHT = 40;
 const CELL_FONT_SIZE = 20;
@@ -89,7 +90,7 @@ function OTPCell({ index, total, char, isActive, hasError, disabled, theme, onPr
         : isActive
             ? theme.colors.primary
             : theme.colors.border;
-    return (_jsx(Pressable, { onPress: onPress, disabled: disabled, accessibilityRole: "button", accessibilityLabel: `Digit ${index + 1} of ${total}`, accessibilityState: { disabled }, children: _jsx(View, { style: [
+    return (_jsx(Pressable, { onPress: onPress, disabled: disabled, accessibilityRole: "button", accessibilityLabel: `Digit ${index + 1} of ${total}`, accessibilityState: { disabled }, children: _jsx(View, { ...stateSurfaceProps(), style: [
                 {
                     width: CELL_WIDTH,
                     height: CELL_HEIGHT,

package/dist/components/Slider.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { palette } from "../constants/colors.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { hapticLight } from "../lib/haptics.js";
+import { stateSurfaceProps } from "../lib/stateSurface.js";
 import { useCallback, useRef } from "react";
 import { View } from "react-native";
 import { Slider as NativeSlider } from "@expo/ui/community/slider";
@@ -31,7 +32,7 @@ size: _size = "md", disabled = false, showValue = false, style: styleOverride, }
         }
         onValueChange?.(next);
     }, [onValueChange]);
-    return (_jsxs(View, { style: [{ opacity: disabled ? 0.5 : 1, alignSelf: "stretch" }, styleOverride], children: [showValue && (_jsx(StyledText, { selectable: false, style: {
+    return (_jsxs(View, { ...stateSurfaceProps(), style: [{ opacity: disabled ? 0.5 : 1, alignSelf: "stretch" }, styleOverride], children: [showValue && (_jsx(StyledText, { selectable: false, style: {
                     fontSize: 12,
                     color: theme.colors.textDim,
                     marginBottom: 4,

package/dist/components/Switch.js

@@ -3,6 +3,7 @@ import { palette } from "../constants/colors.js";
 import { spacing } from "../constants/spacing.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { hapticLight } from "../lib/haptics.js";
+import { stateSurfaceProps } from "../lib/stateSurface.js";
 import * as SwitchPrimitives from "@rn-primitives/switch";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { ActivityIndicator, Platform, StyleSheet, View, Animated } from "react-native";
@@ -113,7 +114,7 @@ function Switch({ variant = "default", labelOn, labelOff, size = { width: 44, he
                         borderWidth: 1,
                         borderColor: trackBorderColor,
                         pointerEvents: "none",
-                    } }), labelOn && !isIOS && (_jsx(View, { style: {
+                    } }), labelOn && !isIOS && (_jsx(View, { ...stateSurfaceProps(), style: {
                         ...styles.label,
                         left: labelHorizontalInset,
                         right: thumbInset + thumbSize + labelGap,
@@ -136,7 +137,7 @@ function Switch({ variant = "default", labelOn, labelOff, size = { width: 44, he
                                 ...getShadowStyle("subtle"),
                             },
                             thumbAnimatedStyle,
-                        ], children: loading && (_jsx(ActivityIndicator, { size: "small", color: thumbIndicatorColor })) }) }), labelOff && !isIOS && (_jsx(View, { style: {
+                        ], children: loading && (_jsx(ActivityIndicator, { size: "small", color: thumbIndicatorColor })) }) }), labelOff && !isIOS && (_jsx(View, { ...stateSurfaceProps(), style: {
                         ...styles.label,
                         left: thumbInset + thumbSize + labelGap,
                         right: labelHorizontalInset,

package/dist/components/TextInput.js

@@ -10,6 +10,7 @@ import { StyledText } from "./StyledText.js";
 import { Icon } from "./Icon.js";
 import { hapticLight } from "../lib/haptics.js";
 import { createThemedStyles } from "../lib/themedStyles.js";
+import { stateSurfaceProps } from "../lib/stateSurface.js";
 import { palette } from "../constants/colors.js";
 import { clearKeyboardFocusedInput, setKeyboardFocusedInput, } from "./keyboardFocusRegistry.js";
 import { useTextInputSurfaceResponder } from "./keyboardDismiss.js";
@@ -487,7 +488,7 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
         fontSize: sizeConfig.fontSize,
         ...(nativeFontFamily ? { fontFamily: nativeFontFamily } : null),
     };
-    return (_jsxs(View, { style: wrapperStyle, children: [!!label && (_jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, size: "base", fontWeight: "medium", style: styles.label, children: [label, required && _jsx(StyledText, { selectable: false, fontWeight: "bold", style: styles.required, children: " *" })] }) })), _jsxs(View, { style: [surfaceStyle, hasSecureToggle && styles.nativeRow], hitSlop: { top: surfaceHitSlop, bottom: surfaceHitSlop }, ...surfaceResponderProps, children: [(Platform.OS === "android" ? [effectiveSecureTextEntry] : [true, false]).map((secure) => {
+    return (_jsxs(View, { style: wrapperStyle, children: [!!label && (_jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, size: "base", fontWeight: "medium", style: styles.label, children: [label, required && _jsx(StyledText, { selectable: false, fontWeight: "bold", style: styles.required, children: " *" })] }) })), _jsxs(View, { ...stateSurfaceProps(), style: [surfaceStyle, hasSecureToggle && styles.nativeRow], hitSlop: { top: surfaceHitSlop, bottom: surfaceHitSlop }, ...surfaceResponderProps, children: [(Platform.OS === "android" ? [effectiveSecureTextEntry] : [true, false]).map((secure) => {
                         const active = secure === effectiveSecureTextEntry;
                         const outgoing = handoff != null && secure === handoff.outgoingSecure;
                         if (!active && !outgoing)

package/dist/components/bottomSheetHostSupport.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Android `BottomSheet` keyboard avoidance is platform-owned, and the part the
+ * package depends on lives in the host: Material3's `ModalBottomSheet` shrinks
+ * the sheet with `imePadding()`, `@expo/ui`'s `RNHostView` re-reports its
+ * Compose size to the shadow tree (`onSizeChanged` → `ShadowNodeProxy.setViewSize`),
+ * and the `flexGrow: 1, height: 0` column the host wraps our children in
+ * follows. `expo-modules-core` <= 57.0.3 flushed that report only from a
+ * one-shot pre-draw listener on the activity window, which does not draw while
+ * the sheet's own dialog window animates the IME, so the column kept its
+ * detent height and `Footer` sat under the keyboard until the activity redrew
+ * (expo/expo#47778, fixed by expo/expo#47810 in 57.0.4 and 58.0.0; no 56.x
+ * release has it). Nothing in JS can observe a size the shadow tree never
+ * received, so the package names the floor instead: once per session, in dev,
+ * on Android, when the *native* core compiled into the app is older.
+ */
+export interface ExpoModulesCoreVersion {
+    version: string;
+    major: number;
+    minor: number;
+    patch: number;
+}
+/** First `expo-modules-core` release whose `RNHostView` size flush always lands. */
+export declare const MIN_EXPO_MODULES_CORE: Readonly<Omit<ExpoModulesCoreVersion, "version">>;
+/**
+ * The native `expo-modules-core` version compiled into the running app, as the
+ * core's own `CoreModule` publishes it on `globalThis.expo` (Android and iOS,
+ * present on every Expo release the package supports, 56 through 58).
+ * `undefined` on web, in Jest, or when the core is not loaded.
+ */
+export declare function readExpoModulesCoreVersion(): ExpoModulesCoreVersion | undefined;
+/**
+ * Whether this core drops the sheet host's size update when the keyboard opens:
+ * a defined version lexicographically below {@link MIN_EXPO_MODULES_CORE}.
+ * An unknown version is not reported as broken.
+ */
+export declare function bottomSheetHostDropsResize(version: ExpoModulesCoreVersion | undefined): boolean;
+export declare function bottomSheetHostWarning(version: ExpoModulesCoreVersion): string;
+/**
+ * Warn once per JS session, in development, on Android, when the native
+ * `expo-modules-core` is older than {@link MIN_EXPO_MODULES_CORE}. Called when a
+ * `BottomSheet.Content` mounts. Silent on iOS and web, where the sheet's
+ * avoidance does not go through `RNHostView`'s size state.
+ */
+export declare function warnIfBottomSheetHostDropsResize(): void;
+/** Test hook: forget that the warning was already shown. */
+export declare function resetBottomSheetHostWarningForTests(): void;

package/dist/components/bottomSheetHostSupport.js

@@ -0,0 +1,67 @@
+import { Platform } from "react-native";
+/** First `expo-modules-core` release whose `RNHostView` size flush always lands. */
+export const MIN_EXPO_MODULES_CORE = {
+    major: 57,
+    minor: 0,
+    patch: 4,
+};
+/**
+ * The native `expo-modules-core` version compiled into the running app, as the
+ * core's own `CoreModule` publishes it on `globalThis.expo` (Android and iOS,
+ * present on every Expo release the package supports, 56 through 58).
+ * `undefined` on web, in Jest, or when the core is not loaded.
+ */
+export function readExpoModulesCoreVersion() {
+    const expo = globalThis.expo;
+    const candidate = expo?.expoModulesCoreVersion;
+    if (typeof candidate !== "object" ||
+        candidate === null ||
+        typeof candidate.major !== "number" ||
+        typeof candidate.minor !== "number" ||
+        typeof candidate.patch !== "number") {
+        return undefined;
+    }
+    return candidate;
+}
+/**
+ * Whether this core drops the sheet host's size update when the keyboard opens:
+ * a defined version lexicographically below {@link MIN_EXPO_MODULES_CORE}.
+ * An unknown version is not reported as broken.
+ */
+export function bottomSheetHostDropsResize(version) {
+    if (!version)
+        return false;
+    const { major, minor, patch } = MIN_EXPO_MODULES_CORE;
+    if (version.major !== major)
+        return version.major < major;
+    if (version.minor !== minor)
+        return version.minor < minor;
+    return version.patch < patch;
+}
+export function bottomSheetHostWarning(version) {
+    const { major, minor, patch } = MIN_EXPO_MODULES_CORE;
+    return (`@mrmeg/expo-ui BottomSheet: expo-modules-core ${version.version} drops the sheet's ` +
+        "size update when the keyboard opens on Android, so BottomSheet.Footer and the tail " +
+        "of Body end up under the keyboard (expo/expo#47778). Update expo-modules-core to " +
+        `>= ${major}.${minor}.${patch} (fixed in 57.0.4 / 58.0.0) and rebuild the app.`);
+}
+let warned = false;
+/**
+ * Warn once per JS session, in development, on Android, when the native
+ * `expo-modules-core` is older than {@link MIN_EXPO_MODULES_CORE}. Called when a
+ * `BottomSheet.Content` mounts. Silent on iOS and web, where the sheet's
+ * avoidance does not go through `RNHostView`'s size state.
+ */
+export function warnIfBottomSheetHostDropsResize() {
+    if (warned || !__DEV__ || Platform.OS !== "android")
+        return;
+    const version = readExpoModulesCoreVersion();
+    if (!version || !bottomSheetHostDropsResize(version))
+        return;
+    warned = true;
+    console.warn(bottomSheetHostWarning(version));
+}
+/** Test hook: forget that the warning was already shown. */
+export function resetBottomSheetHostWarningForTests() {
+    warned = false;
+}

package/dist/components/keyboardDismiss.d.ts

@@ -27,6 +27,31 @@ export type TextInputSurfaceResponderProps = Pick<ViewProps, "onStartShouldSetRe
  * for that.
  */
 export declare function useTextInputSurfaceResponder(focus: () => void): TextInputSurfaceResponderProps;
+export type AncestorClaimWarningProps = Pick<ViewProps, "onStartShouldSetResponderCapture" | "onTouchStart">;
+/** Test hook: let the once-per-session ancestor-claim warning fire again. */
+export declare function resetAncestorClaimWarningForTests(): void;
+/**
+ * Dev-only diagnostic for a boundary whose subtree is drawn in another native
+ * window but still lives in the screen's React tree (`BottomSheet.Content`).
+ *
+ * React Native's responder negotiation walks the React tree, so every ancestor
+ * of the sheet takes part in the capture phase for a tap inside it, even though
+ * none of them is under the finger. An ancestor `ScrollView` left on the default
+ * `keyboardShouldPersistTaps="never"` claims the tap there as soon as a text
+ * input holds focus and RN's `Keyboard` has reported the IME, and blurs the
+ * field on release: the keyboard closes and the tapped control never fires.
+ * Nothing inside the tree can preempt a capture-phase claim, so the boundary
+ * names it instead.
+ *
+ * The signal needs no heuristics: `onStartShouldSetResponderCapture` runs on
+ * this view for every touch that reaches the negotiation without an ancestor
+ * claiming it, while `onTouchStart` bubbles regardless. A touch start with no
+ * capture call for the same native event, while a package field is focused,
+ * is exactly a tap an ancestor took. Warns once per session, Android only,
+ * `__DEV__` only; elsewhere the inner props are returned untouched. The wrapped
+ * `onTouchStart` still runs, so the boundary's own behavior is unchanged.
+ */
+export declare function useAncestorClaimWarning<P extends Pick<ViewProps, "onTouchStart">>(inner: P, message: string): P & AncestorClaimWarningProps;
 export type KeyboardDismissResponderProps = Pick<ViewProps, "onStartShouldSetResponder" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel">;
 /**
  * View props for a tap-away keyboard-dismiss boundary. Spread onto the wrapper

package/dist/components/keyboardDismiss.js

@@ -191,6 +191,55 @@ export function useTextInputSurfaceResponder(focus) {
         };
     }, []);
 }
+let warnedAncestorClaim = false;
+/** Test hook: let the once-per-session ancestor-claim warning fire again. */
+export function resetAncestorClaimWarningForTests() {
+    warnedAncestorClaim = false;
+}
+/**
+ * Dev-only diagnostic for a boundary whose subtree is drawn in another native
+ * window but still lives in the screen's React tree (`BottomSheet.Content`).
+ *
+ * React Native's responder negotiation walks the React tree, so every ancestor
+ * of the sheet takes part in the capture phase for a tap inside it, even though
+ * none of them is under the finger. An ancestor `ScrollView` left on the default
+ * `keyboardShouldPersistTaps="never"` claims the tap there as soon as a text
+ * input holds focus and RN's `Keyboard` has reported the IME, and blurs the
+ * field on release: the keyboard closes and the tapped control never fires.
+ * Nothing inside the tree can preempt a capture-phase claim, so the boundary
+ * names it instead.
+ *
+ * The signal needs no heuristics: `onStartShouldSetResponderCapture` runs on
+ * this view for every touch that reaches the negotiation without an ancestor
+ * claiming it, while `onTouchStart` bubbles regardless. A touch start with no
+ * capture call for the same native event, while a package field is focused,
+ * is exactly a tap an ancestor took. Warns once per session, Android only,
+ * `__DEV__` only; elsewhere the inner props are returned untouched. The wrapped
+ * `onTouchStart` still runs, so the boundary's own behavior is unchanged.
+ */
+export function useAncestorClaimWarning(inner, message) {
+    const messageRef = useRef(message);
+    messageRef.current = message;
+    return useMemo(() => {
+        if (!__DEV__ || Platform.OS !== "android")
+            return inner;
+        let captured = null;
+        return {
+            ...inner,
+            onStartShouldSetResponderCapture: (event) => {
+                captured = keyOf(event);
+                return false;
+            },
+            onTouchStart: (event) => {
+                if (!warnedAncestorClaim && !isSameEvent(captured, event) && hasKeyboardFocusedInput()) {
+                    warnedAncestorClaim = true;
+                    console.warn(messageRef.current);
+                }
+                inner.onTouchStart?.(event);
+            },
+        };
+    }, [inner]);
+}
 /**
  * View props for a tap-away keyboard-dismiss boundary. Spread onto the wrapper
  * `View` that encloses the screen (or a form). Nesting is safe: the innermost

package/dist/design-system.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
   "package": "@mrmeg/expo-ui",
-  "version": "0.27.0",
+  "version": "0.27.1",
   "tokens": {
     "spacing": {
       "entries": [

package/dist/lib/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./animations";
 export * from "./haptics";
 export * from "./i18n";
+export * from "./stateSurface";
 export * from "./themedStyles";

package/dist/lib/index.js

@@ -1,4 +1,5 @@
 export * from "./animations.js";
 export * from "./haptics.js";
 export * from "./i18n.js";
+export * from "./stateSurface.js";
 export * from "./themedStyles.js";

package/dist/lib/stateSurface.d.ts

@@ -0,0 +1,28 @@
+import { type ViewProps } from "react-native";
+/**
+ * Props for a "state surface": a plain `View` whose `opacity`, `pointerEvents`
+ * or `display` is computed from component state (`disabled`, `loading`,
+ * `checked`, `editable`, …).
+ *
+ * On Android (Fabric) a View forms a stacking context only while one of those
+ * props says so. A filled or bordered View at opacity 1 still gets a native
+ * view, but its children are hoisted into the nearest stacking-context
+ * ancestor; the moment its opacity drops below 1 the children are pulled back
+ * under it. A state flip that races a navigation pop therefore re-parents
+ * views mid-mutation and crashed with `addViewAt: cannot insert view … View
+ * already has a parent` (doglog #57, Pixel 6a). `collapsable={false}` makes
+ * the View a permanent stacking context, so the native tree shape never
+ * changes with state. iOS and web return nothing: their mounting layers
+ * re-parent safely and the extra native view would only cost.
+ *
+ * RN's `Pressable` already sets `collapsable={false}` on its own View, so only
+ * plain `View` surfaces need this. Spread it before any consumer prop spread so
+ * a caller can still override it.
+ *
+ * ```tsx
+ * <View {...stateSurfaceProps()} style={{ opacity: disabled ? 0.5 : 1 }} />
+ * ```
+ *
+ * Reads `Platform.OS` at call time so per-test platform flips apply.
+ */
+export declare function stateSurfaceProps(): Pick<ViewProps, "collapsable">;

package/dist/lib/stateSurface.js

@@ -0,0 +1,30 @@
+import { Platform } from "react-native";
+/**
+ * Props for a "state surface": a plain `View` whose `opacity`, `pointerEvents`
+ * or `display` is computed from component state (`disabled`, `loading`,
+ * `checked`, `editable`, …).
+ *
+ * On Android (Fabric) a View forms a stacking context only while one of those
+ * props says so. A filled or bordered View at opacity 1 still gets a native
+ * view, but its children are hoisted into the nearest stacking-context
+ * ancestor; the moment its opacity drops below 1 the children are pulled back
+ * under it. A state flip that races a navigation pop therefore re-parents
+ * views mid-mutation and crashed with `addViewAt: cannot insert view … View
+ * already has a parent` (doglog #57, Pixel 6a). `collapsable={false}` makes
+ * the View a permanent stacking context, so the native tree shape never
+ * changes with state. iOS and web return nothing: their mounting layers
+ * re-parent safely and the extra native view would only cost.
+ *
+ * RN's `Pressable` already sets `collapsable={false}` on its own View, so only
+ * plain `View` surfaces need this. Spread it before any consumer prop spread so
+ * a caller can still override it.
+ *
+ * ```tsx
+ * <View {...stateSurfaceProps()} style={{ opacity: disabled ? 0.5 : 1 }} />
+ * ```
+ *
+ * Reads `Platform.OS` at call time so per-test platform flips apply.
+ */
+export function stateSurfaceProps() {
+    return Platform.OS === "android" ? { collapsable: false } : {};
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrmeg/expo-ui",
-  "version": "0.27.0",
+  "version": "0.27.1",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [