@mrmeg/expo-ui 0.26.0 → 0.27.1

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/StyledText.d.ts

@@ -74,8 +74,12 @@ export type TextProps = RNTextProps & {
  *   real Inter font files on native, and family + numeric fontWeight on web
  * - Per-size letter-spacing scale (tight on large headings, positive on micro
  *   labels); explicit `style` letterSpacing always wins
- * - Text selection enabled by default; pass `selectable={false}` for control
- *   chrome such as button labels, tabs, badges, and field labels
+ * - Text selection on by default on iOS and web, off by default on Android:
+ *   a selectable Android `Text` is focusable-in-touch-mode, so a tap on a label
+ *   next to a focused input moved view focus to the label and hid the keyboard.
+ *   Pass `selectable` to opt copyable content in (codes, addresses, chat
+ *   bubbles); pass `selectable={false}` on every platform for control chrome
+ *   such as button labels, tabs, badges, and field labels
  * - numberOfLines and ellipsizeMode support from RN TextProps
  */
 export declare function StyledText(props: TextProps): import("react").JSX.Element;

package/dist/components/StyledText.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { use } from "react";
-import { Text as RNText, StyleSheet } from "react-native";
+import { Platform, Text as RNText, StyleSheet } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
 import { resolveFontStyle } from "../constants/fonts.js";
 import { useThemeStore } from "../state/themeStore.js";
@@ -67,8 +67,12 @@ const SEMANTIC_CONFIGS = {
  *   real Inter font files on native, and family + numeric fontWeight on web
  * - Per-size letter-spacing scale (tight on large headings, positive on micro
  *   labels); explicit `style` letterSpacing always wins
- * - Text selection enabled by default; pass `selectable={false}` for control
- *   chrome such as button labels, tabs, badges, and field labels
+ * - Text selection on by default on iOS and web, off by default on Android:
+ *   a selectable Android `Text` is focusable-in-touch-mode, so a tap on a label
+ *   next to a focused input moved view focus to the label and hid the keyboard.
+ *   Pass `selectable` to opt copyable content in (codes, addresses, chat
+ *   bubbles); pass `selectable={false}` on every platform for control chrome
+ *   such as button labels, tabs, badges, and field labels
  * - numberOfLines and ellipsizeMode support from RN TextProps
  */
 export function StyledText(props) {
@@ -81,7 +85,9 @@ export function StyledText(props) {
     const contextColor = use(TextColorContext);
     const contextTextStyle = use(TextStyleContext);
     const contextSelectable = use(TextSelectabilityContext);
-    const resolvedSelectable = selectable ?? contextSelectable ?? true;
+    // Read at render time (not module load) so tests can flip `Platform.OS`.
+    const platformDefaultSelectable = Platform.OS !== "android";
+    const resolvedSelectable = selectable ?? contextSelectable ?? platformDefaultSelectable;
     // Use context color if provided, otherwise use theme default
     const color = contextColor ?? theme.colors.text;
     // If semantic variant is provided, use its config

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";
@@ -207,6 +208,10 @@ function WebTextInput({ variant = "outline", size = "md", label, helperText, err
  * toggle laid out beside the native Host. Clear buttons, left/right elements,
  * and the error icon remain web-only; RN overlays are not layered over the
  * native host view.
+ *
+ * On Android `onBlur` is reported only after a forwarded `onFocus`: Compose
+ * reports `isFocused=false` on first composition and the field forwards it,
+ * so an unguarded consumer saw a blur before any interaction.
  */
 function NativeTextInput({ variant = "outline", size = "md", label, helperText, errorText, error, required, rows, forceLight, inputMode, onChangeText, onFocus, onBlur, value, defaultValue, editable = true, multiline, secureTextEntry, showSecureEntryToggle, ref, wrapperStyle, 
 // Web-only affordances. Destructured out of `rest` so they're NOT forwarded to
@@ -321,9 +326,16 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
     const handleBlur = useCallback((secure) => {
         if (Platform.OS === "ios" && secure !== activeSecureRef.current)
             return;
+        // Compose reports `isFocused=false` when the field is first composed and
+        // the Android field forwards it as a blur. A blur the field never
+        // preceded with a focus is not the user leaving the field: keep it from
+        // the consumer so blur validation does not flag untouched fields.
+        const wasFocused = isFocusedRef.current;
         isFocusedRef.current = false;
         restoreAfterSecureHandoffRef.current = false;
         clearKeyboardFocusedInput(focusRegistryToken);
+        if (Platform.OS === "android" && !wasFocused)
+            return;
         parentOnBlur?.();
     }, [focusRegistryToken, parentOnBlur]);
     const togglePasswordVisible = useCallback(() => {
@@ -476,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.26.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/llms-full.md

@@ -103,7 +103,7 @@ before creating a new app-local primitive.
 | `AnimatedView` | Entrance and visibility animation | Keep simple reveal effects in this wrapper. |
 | `Avatar`, `AvatarGroup` | Profile images with initials/icon fallback | Pass both `source` and `name`; set `size`/`shape` on the group, not per child. |
 | `Badge` | Short status labels | Prefer over custom pill views. |
-| `BottomSheet` | Mobile-first modal sheets | Requires root `UIProvider`. Native sheet via `@expo/ui`; `swipeEnabled`, `avoidKeyboard`, `dismissKeyboardOnDrag` are accepted but ignored. |
+| `BottomSheet` | Mobile-first modal sheets | Requires root `UIProvider`. Native sheet via `@expo/ui`; `swipeEnabled`, `avoidKeyboard`, `dismissKeyboardOnDrag` are accepted but ignored (the iOS sheet presentation and Android Material3 keep content above the keyboard; never nest a `KeyboardAvoidingView` in a sheet). |
 | `Button` | Commands and CTAs | Use `preset`, not `variant`; heights are 28/32/40. |
 | `Card` | Individual framed content groups | Do not wrap whole page sections in cards. |
 | `Carousel` | Small known set of horizontally snapping slides | Renders every child (no virtualization); fractional `itemWidth` measures the viewport until first layout. |