@mrmeg/expo-ui 0.12.0 → 0.12.1

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to `@mrmeg/expo-ui` are documented here. This project
 adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.12.1]
+
+### Fixed
+
+- **`BottomSheet` now dismisses the keyboard when tapping outside a focused
+  field on Android.** The native sheet hosts its content in a separate window
+  (via `@expo/ui`'s `RNHostView`), outside the app's `KeyboardProvider` — so the
+  app-wide tap-away never reached sheet content, and `useKeyboardState()` /
+  `KeyboardController.dismiss()` are blind to that window. iOS papered over this
+  (SwiftUI resigns first-responder on outside taps for free); Compose did not,
+  leaving a focused field stuck open. `BottomSheet.Content` now mounts a
+  transparent dismiss overlay while a field is focused, detecting focus via the
+  window-independent `keyboardFocusRegistry` and resigning the field through its
+  own native `blur()` ref. The registry gained `subscribeKeyboardFocus`,
+  `hasKeyboardFocusedInput`, and `dismissKeyboardFocusedInput`, and `TextInput`
+  now registers a `blur` handle on focus.
+
 ## [0.12.0]
 
 ### Added

package/dist/components/BottomSheet.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, use, useCallback, useEffect, useReducer, useRef } from "react";
-import { View, Pressable, ScrollView, Platform, useWindowDimensions, } from "react-native";
+import React, { createContext, use, useCallback, useEffect, useMemo, useReducer, useRef, useSyncExternalStore } from "react";
+import { View, Pressable, StyleSheet, ScrollView, Platform, useWindowDimensions, } from "react-native";
 import { BottomSheet as NativeBottomSheet } from "@expo/ui/community/bottom-sheet";
+import { KeyboardController } from "react-native-keyboard-controller";
 import { useSafeAreaInsets, initialWindowMetrics } from "react-native-safe-area-context";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import { TextColorContext, TextClassContext } from "./StyledText.context";
 import { Icon } from "./Icon.js";
+import { dismissKeyboardFocusedInput, hasKeyboardFocusedInput, subscribeKeyboardFocus, } from "./keyboardFocusRegistry.js";
+const DEFAULT_SNAP_POINTS = ["50%"];
 function clampSnapIndex(index, maxSnapIndex) {
     return Math.min(Math.max(index, 0), maxSnapIndex);
 }
@@ -22,25 +25,42 @@ function createInitialRootState(defaultOpen, maxSnapIndex) {
 }
 function bottomSheetRootReducer(state, action) {
     switch (action.type) {
-        case "setInternalOpen":
+        case "setInternalOpen": {
+            const snapIndex = action.open ? state.snapIndex : action.maxSnapIndex;
+            const snapDirection = action.open ? state.snapDirection : -1;
+            if (state.internalOpen === action.open &&
+                state.snapIndex === snapIndex &&
+                state.snapDirection === snapDirection) {
+                return state;
+            }
             return {
                 ...state,
                 internalOpen: action.open,
-                snapIndex: action.open ? state.snapIndex : action.maxSnapIndex,
-                snapDirection: action.open ? state.snapDirection : -1,
+                snapIndex,
+                snapDirection,
             };
+        }
         case "setScrollable":
+            if (state.scrollable === action.scrollable)
+                return state;
             return { ...state, scrollable: action.scrollable };
         case "setHasHeader":
+            if (state.hasHeader === action.present)
+                return state;
             return { ...state, hasHeader: action.present };
         case "setHasFooter":
+            if (state.hasFooter === action.present)
+                return state;
             return { ...state, hasFooter: action.present };
         case "setSnapIndex": {
             const snapIndex = clampSnapIndex(action.index, action.maxSnapIndex);
+            const snapDirection = snapIndex === 0 ? 1 : snapIndex === action.maxSnapIndex ? -1 : state.snapDirection;
+            if (state.snapIndex === snapIndex && state.snapDirection === snapDirection)
+                return state;
             return {
                 ...state,
                 snapIndex,
-                snapDirection: snapIndex === 0 ? 1 : snapIndex === action.maxSnapIndex ? -1 : state.snapDirection,
+                snapDirection,
             };
         }
         case "cycleSnapPoint": {
@@ -140,9 +160,51 @@ function SheetCloseButton({ style }) {
         ], children: _jsx(Icon, { name: "x", size: 22, color: "text" }) }));
 }
 // ============================================================================
+// Keyboard dismiss overlay — tap-away dismissal inside the sheet
+// ============================================================================
+/**
+ * Tap-away keyboard dismissal for sheet content.
+ *
+ * The native sheet (SwiftUI `.sheet()` / Material `ModalBottomSheet`) hosts its
+ * RN children in a separate native window via @expo/ui's `RNHostView`, OUTSIDE
+ * the app's `KeyboardProvider` / `KeyboardDismissBoundary`. Two consequences,
+ * both worked around here:
+ *
+ *  1. Detection: `react-native-keyboard-controller`'s `useKeyboardState` watches
+ *     the main window and does NOT see a keyboard raised inside the sheet's
+ *     window (the same isolation that makes `useSafeAreaInsets()` read zero in
+ *     here). So presence is read from the `keyboardFocusRegistry` instead, which
+ *     is fed by @expo/ui's own native focus events and is window-independent.
+ *  2. Dispatch: RN's JS responder chain (onStartShouldSetResponder*) is NOT
+ *     dispatched across the `RNHostView` boundary on Android — only `Pressable`
+ *     hit-testing (native `measure()`) works inside the host. So this is a
+ *     transparent `Pressable` mounted ONLY while a field is focused, mirroring
+ *     the app's `DismissKeyboardOverlay`. The tap blurs the focused field via
+ *     its own native ref (`dismissKeyboardFocusedInput`), which resigns the
+ *     responder regardless of window; `KeyboardController.dismiss()` is a
+ *     best-effort fallback for the (rare) case with no registered blur handle.
+ *
+ * iOS doesn't strictly need this (SwiftUI resigns first-responder on outside
+ * taps for free), but the same path is harmless and keeps behavior identical.
+ */
+function SheetKeyboardDismissOverlay() {
+    const hasFocus = useSyncExternalStore(subscribeKeyboardFocus, hasKeyboardFocusedInput, () => false);
+    if (Platform.OS === "web" || !hasFocus)
+        return null;
+    return (_jsx(Pressable, { style: [StyleSheet.absoluteFill, styles.keyboardDismissOverlay], onPressIn: () => {
+            if (!dismissKeyboardFocusedInput())
+                KeyboardController.dismiss();
+        }, accessibilityLabel: "Dismiss keyboard", accessibilityRole: "button" }));
+}
+const styles = StyleSheet.create({
+    keyboardDismissOverlay: {
+        zIndex: 999,
+    },
+});
+// ============================================================================
 // Root
 // ============================================================================
-function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, snapPoints = ["50%"], closeOnBackdropPress = true, children, }) {
+function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, snapPoints = DEFAULT_SNAP_POINTS, closeOnBackdropPress = true, children, }) {
     const maxSnapIndex = Math.max(snapPoints.length - 1, 0);
     const [state, dispatch] = useReducer(bottomSheetRootReducer, undefined, () => createInitialRootState(defaultOpen, maxSnapIndex));
     const isControlled = controlledOpen !== undefined;
@@ -167,7 +229,16 @@ function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenC
         }
     }, [controlledOnOpenChange, isControlled, maxSnapIndex]);
     const toggle = useCallback(() => onOpenChange(!open), [onOpenChange, open]);
-    const contextValue = {
+    const setScrollable = useCallback((scrollable) => {
+        dispatch({ type: "setScrollable", scrollable });
+    }, []);
+    const setHasHeader = useCallback((present) => {
+        dispatch({ type: "setHasHeader", present });
+    }, []);
+    const setHasFooter = useCallback((present) => {
+        dispatch({ type: "setHasFooter", present });
+    }, []);
+    const contextValue = useMemo(() => ({
         open,
         onOpenChange,
         toggle,
@@ -177,12 +248,27 @@ function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenC
         cycleSnapPoint,
         closeOnBackdropPress,
         scrollable: state.scrollable,
-        setScrollable: (scrollable) => dispatch({ type: "setScrollable", scrollable }),
+        setScrollable,
         hasHeader: state.hasHeader,
-        setHasHeader: (present) => dispatch({ type: "setHasHeader", present }),
+        setHasHeader,
         hasFooter: state.hasFooter,
-        setHasFooter: (present) => dispatch({ type: "setHasFooter", present }),
-    };
+        setHasFooter,
+    }), [
+        open,
+        onOpenChange,
+        toggle,
+        snapPoints,
+        snapIndex,
+        setSnapIndex,
+        cycleSnapPoint,
+        closeOnBackdropPress,
+        state.scrollable,
+        setScrollable,
+        state.hasHeader,
+        setHasHeader,
+        state.hasFooter,
+        setHasFooter,
+    ]);
     return (_jsx(BottomSheetContext.Provider, { value: contextValue, children: children }));
 }
 // ============================================================================
@@ -259,7 +345,7 @@ swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDra
                             backgroundColor: theme.colors.card,
                         },
                         styleOverride,
-                    ], children: [children, showFloatingClose && (_jsx(SheetCloseButton, { style: {
+                    ], children: [children, _jsx(SheetKeyboardDismissOverlay, {}), 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/DismissKeyboard.d.ts

@@ -11,5 +11,5 @@ type Props = {
 /**
  * @returns Wrapper for a view that dismisses the keyboard when tapped outside of a text input
  */
-export declare const DismissKeyboard: ({ children, style, avoidKeyboard, scrollable }: Props) => React.JSX.Element;
+export declare const DismissKeyboard: (props: Props) => React.JSX.Element;
 export {};

package/dist/components/DismissKeyboard.js

@@ -1,10 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Pressable, StyleSheet, Platform, ScrollView, View, } from "react-native";
-import { KeyboardController, useKeyboardState } from "react-native-keyboard-controller";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { Platform, ScrollView, View, } from "react-native";
+import { KeyboardController, useKeyboardContext, useKeyboardState, } from "react-native-keyboard-controller";
 import { KeyboardAvoidingView, useKeyboardAvoidance } from "./KeyboardAvoidingView.js";
+import { isTouchInsideKeyboardFocusedInput } from "./keyboardFocusRegistry.js";
 /**
- * Full-screen tap-catcher that dismisses the keyboard, mounted ONLY while the
- * keyboard is visible.
+ * Native tap-away keyboard dismissal.
  *
  * Why window-level dismissal: the native `@expo/ui` TextInput is a SwiftUI /
  * Compose field that never registers with React Native's `TextInputState`, so
@@ -12,34 +13,46 @@ import { KeyboardAvoidingView, useKeyboardAvoidance } from "./KeyboardAvoidingVi
  * `KeyboardController.dismiss()` resigns the focused responder at the IME level,
  * which works for both native and RN fields.
  *
- * Why only-while-visible: an always-mounted catcher would intercept the very tap
- * that focuses a field and close the keyboard before it opens, and would fight
- * bottom sheets / modals. Rendering it solely while the keyboard is up means
- * nothing intercepts taps when no field is focused; once one is, a tap anywhere
- * off the field dismisses.
+ * Why responder capture: a full-screen overlay also catches taps on the focused
+ * input, which breaks double-tap text selection. Capture lets the tap continue
+ * to children while still dismissing when the touch starts outside the focused
+ * input bounds.
  */
-function KeyboardDismissOverlay() {
+function useDismissKeyboardOnOutsideTouch() {
     const isVisible = useKeyboardState((state) => state.isVisible);
-    if (!isVisible)
-        return null;
-    return (_jsx(Pressable, { style: [StyleSheet.absoluteFill, styles.overlay], onPressIn: () => KeyboardController.dismiss(), accessibilityLabel: "Dismiss keyboard", accessibilityRole: "button" }));
+    const { layout: focusedInput } = useKeyboardContext();
+    return React.useCallback((event) => {
+        if (Platform.OS === "web" || !isVisible) {
+            return false;
+        }
+        if (isTouchInsideKeyboardFocusedInput(event, focusedInput.value?.layout)) {
+            return false;
+        }
+        KeyboardController.dismiss();
+        return false;
+    }, [focusedInput, isVisible]);
 }
 /**
  * @returns Wrapper for a view that dismisses the keyboard when tapped outside of a text input
  */
-export const DismissKeyboard = ({ children, style, avoidKeyboard = true, scrollable = true }) => {
+function DismissKeyboardLayout({ children, style, avoidKeyboard = true, scrollable = true, dismissOnTouchStart, }) {
     const hasKeyboardAvoidance = useKeyboardAvoidance();
     const content = scrollable ? (_jsx(ScrollView, { style: { flex: 1 }, contentContainerStyle: { flexGrow: 1, justifyContent: "center" }, keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, children: children })) : (children);
-    // Web has no software keyboard, so the tap-catcher is native-only. The overlay
-    // is never created on web, keeping `useKeyboardState` off that platform.
-    const overlay = Platform.OS !== "web" ? _jsx(KeyboardDismissOverlay, {}) : null;
     if (!avoidKeyboard || hasKeyboardAvoidance) {
-        return (_jsxs(View, { style: { flex: 1 }, children: [content, overlay] }));
+        return (_jsx(View, { style: { flex: 1 }, onStartShouldSetResponderCapture: dismissOnTouchStart, children: content }));
     }
-    return (_jsxs(KeyboardAvoidingView, { style: [{ flex: 1, width: "100%" }, style], keyboardVerticalOffset: Platform.OS === "ios" ? 0 : 0, children: [content, overlay] }));
+    return (_jsx(KeyboardAvoidingView, { style: [{ flex: 1, width: "100%" }, style], keyboardVerticalOffset: Platform.OS === "ios" ? 0 : 0, onStartShouldSetResponderCapture: dismissOnTouchStart, children: content }));
+}
+function NativeDismissKeyboard(props) {
+    const dismissOnTouchStart = useDismissKeyboardOnOutsideTouch();
+    return (_jsx(DismissKeyboardLayout, { ...props, dismissOnTouchStart: dismissOnTouchStart }));
+}
+/**
+ * @returns Wrapper for a view that dismisses the keyboard when tapped outside of a text input
+ */
+export const DismissKeyboard = (props) => {
+    if (Platform.OS === "web") {
+        return _jsx(DismissKeyboardLayout, { ...props });
+    }
+    return _jsx(NativeDismissKeyboard, { ...props });
 };
-const styles = StyleSheet.create({
-    overlay: {
-        zIndex: 999,
-    },
-});

package/dist/components/TextInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
+import { useEffect, useCallback, useImperativeHandle, useMemo, useRef, useState, } from "react";
 import { StyleSheet, TextInput as RNTextInput, Platform, View, Pressable, } from "react-native";
 import { Host, TextInput as ExpoTextInput, useNativeState, } from "@expo/ui";
 import { useTheme } from "../hooks/useTheme.js";
@@ -9,6 +9,7 @@ import { StyledText } from "./StyledText.js";
 import { Icon } from "./Icon.js";
 import { hapticLight } from "../lib/haptics.js";
 import { palette } from "../constants/colors.js";
+import { clearKeyboardFocusedInputLayout, setKeyboardFocusedInputLayout, } from "./keyboardFocusRegistry.js";
 const NUMERIC_REGEX = /^[0-9]*$/;
 const SIZE_CONFIGS = {
     sm: {
@@ -188,7 +189,7 @@ function WebTextInput({ variant = "outline", size = "md", label, helperText, err
  * elements, and error icon — are intentionally omitted on native to avoid
  * layering RN views over the native host view.
  */
-function NativeTextInput({ variant = "outline", size = "md", label, helperText, errorText, error, required, rows, forceLight, inputMode, onChangeText, value, defaultValue, editable = true, multiline, secureTextEntry, showSecureEntryToggle, ref, wrapperStyle, 
+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
 // the native field; intentionally unused on this path (see doc comment above).
 // `style` (an RN TextStyle) is likewise dropped — it doesn't map to
@@ -220,6 +221,43 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
     // We expose the subset consumers use, plus a `setNativeProps` shim so the
     // uncontrolled AuthTextField can push corrected text into the native buffer.
     const innerRef = useRef(null);
+    const surfaceRef = useRef(null);
+    const isFocusedRef = useRef(false);
+    const focusRegistryToken = useMemo(() => ({}), []);
+    const syncFocusedInputLayout = useCallback(() => {
+        if (!isFocusedRef.current)
+            return;
+        surfaceRef.current?.measureInWindow((absoluteX, absoluteY, width, height) => {
+            if (!isFocusedRef.current)
+                return;
+            setKeyboardFocusedInputLayout(focusRegistryToken, {
+                x: 0,
+                y: 0,
+                width,
+                height,
+                absoluteX,
+                absoluteY,
+            }, 
+            // Window-independent dismissal: blur the native field directly. Inside a
+            // native bottom sheet the field lives in its own window, where
+            // `KeyboardController.dismiss()` can miss; calling the field's own ref
+            // always resigns it.
+            () => innerRef.current?.blur());
+        });
+    }, [focusRegistryToken]);
+    const handleFocus = useCallback(() => {
+        isFocusedRef.current = true;
+        syncFocusedInputLayout();
+        onFocus?.();
+    }, [onFocus, syncFocusedInputLayout]);
+    const handleBlur = useCallback(() => {
+        isFocusedRef.current = false;
+        clearKeyboardFocusedInputLayout(focusRegistryToken);
+        onBlur?.();
+    }, [focusRegistryToken, onBlur]);
+    useEffect(() => {
+        return () => clearKeyboardFocusedInputLayout(focusRegistryToken);
+    }, [focusRegistryToken]);
     useImperativeHandle(ref, () => ({
         focus: () => innerRef.current?.focus(),
         blur: () => innerRef.current?.blur(),
@@ -289,7 +327,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, style: styles.label, children: [label, required && _jsx(StyledText, { selectable: false, style: styles.required, children: " *" })] }) })), _jsxs(View, { style: [surfaceStyle, hasSecureToggle && styles.nativeRow], children: [_jsx(Host, { matchContents: { vertical: true }, style: hasSecureToggle ? styles.nativeHostFlex : styles.nativeHost, children: _jsx(ExpoTextInput, { ...rest, ref: innerRef, value: state, defaultValue: defaultValue, onChangeText: onChangeText, editable: editable, multiline: multiline, rows: rows, inputMode: inputMode, secureTextEntry: effectiveSecureTextEntry, placeholderTextColor: theme.colors.textDim, style: boxStyle, textStyle: textStyle }) }), hasSecureToggle && (_jsx(Pressable, { style: styles.nativePasswordToggle, onPress: () => setPasswordVisible((v) => !v), accessibilityLabel: passwordVisible ? "Hide password" : "Show password", accessibilityRole: "button", children: _jsx(Icon, { name: passwordVisible ? "eye-off" : "eye", size: spacing.iconSm + 4, color: "textDim" }) }))] }), !!(helperText || errorText) && (_jsx(StyledText, { selectable: false, style: [styles.helperText, hasError && styles.errorText], children: errorText || helperText }))] }));
+    return (_jsxs(View, { style: wrapperStyle, children: [!!label && (_jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, style: styles.label, children: [label, required && _jsx(StyledText, { selectable: false, style: styles.required, children: " *" })] }) })), _jsxs(View, { ref: surfaceRef, style: [surfaceStyle, hasSecureToggle && styles.nativeRow], onLayout: syncFocusedInputLayout, children: [_jsx(Host, { matchContents: { vertical: true }, style: hasSecureToggle ? styles.nativeHostFlex : styles.nativeHost, children: _jsx(ExpoTextInput, { ...rest, ref: innerRef, value: state, defaultValue: defaultValue, onChangeText: onChangeText, onFocus: handleFocus, onBlur: handleBlur, editable: editable, multiline: multiline, rows: rows, inputMode: inputMode, secureTextEntry: effectiveSecureTextEntry, placeholderTextColor: theme.colors.textDim, style: boxStyle, textStyle: textStyle }) }), hasSecureToggle && (_jsx(Pressable, { style: styles.nativePasswordToggle, onPress: () => setPasswordVisible((v) => !v), accessibilityLabel: passwordVisible ? "Hide password" : "Show password", accessibilityRole: "button", children: _jsx(Icon, { name: passwordVisible ? "eye-off" : "eye", size: spacing.iconSm + 4, color: "textDim" }) }))] }), !!(helperText || errorText) && (_jsx(StyledText, { selectable: false, style: [styles.helperText, hasError && styles.errorText], children: errorText || helperText }))] }));
 }
 const createStyles = (theme, variant, size) => StyleSheet.create({
     nativeHost: {

package/dist/components/keyboardFocusRegistry.d.ts

@@ -0,0 +1,29 @@
+import type { GestureResponderEvent } from "react-native";
+import type { FocusedInputLayoutChangedEvent } from "react-native-keyboard-controller";
+export type KeyboardFocusedInputLayout = FocusedInputLayoutChangedEvent["layout"];
+export type KeyboardFocusedInputToken = object;
+/**
+ * Subscribe to focus presence changes. Pairs with {@link hasKeyboardFocusedInput}
+ * via `useSyncExternalStore` so a component can mount/unmount with focus WITHOUT
+ * `react-native-keyboard-controller`'s `useKeyboardState` — which doesn't observe
+ * keyboards raised inside a native sheet's isolated window.
+ */
+export declare function subscribeKeyboardFocus(listener: () => void): () => void;
+export declare function setKeyboardFocusedInputLayout(token: KeyboardFocusedInputToken, layout: KeyboardFocusedInputLayout, blur?: () => void): void;
+export declare function clearKeyboardFocusedInputLayout(token: KeyboardFocusedInputToken): void;
+export declare function getKeyboardFocusedInputLayout(): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    absoluteX: number;
+    absoluteY: number;
+} | undefined;
+/** Whether any native field currently holds focus. Stable boolean for snapshots. */
+export declare function hasKeyboardFocusedInput(): boolean;
+/**
+ * Resign the currently-focused native field, dismissing its keyboard. Returns
+ * `true` if a field was focused and a blur handle was available.
+ */
+export declare function dismissKeyboardFocusedInput(): boolean;
+export declare function isTouchInsideKeyboardFocusedInput(event: GestureResponderEvent, nativeLayout?: KeyboardFocusedInputLayout | null): boolean;

package/dist/components/keyboardFocusRegistry.js

@@ -0,0 +1,64 @@
+const FOCUSED_INPUT_TOUCH_SLOP = 16;
+let focusedInput = null;
+const listeners = new Set();
+function emit() {
+    listeners.forEach((listener) => listener());
+}
+/**
+ * Subscribe to focus presence changes. Pairs with {@link hasKeyboardFocusedInput}
+ * via `useSyncExternalStore` so a component can mount/unmount with focus WITHOUT
+ * `react-native-keyboard-controller`'s `useKeyboardState` — which doesn't observe
+ * keyboards raised inside a native sheet's isolated window.
+ */
+export function subscribeKeyboardFocus(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+export function setKeyboardFocusedInputLayout(token, layout, blur) {
+    const wasPresent = focusedInput != null;
+    focusedInput = { token, layout, blur };
+    // Only notify subscribers on a presence transition; re-measures (scroll,
+    // layout) update the layout silently so the overlay doesn't churn.
+    if (!wasPresent)
+        emit();
+}
+export function clearKeyboardFocusedInputLayout(token) {
+    if (focusedInput?.token === token) {
+        focusedInput = null;
+        emit();
+    }
+}
+export function getKeyboardFocusedInputLayout() {
+    return focusedInput?.layout;
+}
+/** Whether any native field currently holds focus. Stable boolean for snapshots. */
+export function hasKeyboardFocusedInput() {
+    return focusedInput != null;
+}
+/**
+ * Resign the currently-focused native field, dismissing its keyboard. Returns
+ * `true` if a field was focused and a blur handle was available.
+ */
+export function dismissKeyboardFocusedInput() {
+    if (focusedInput?.blur) {
+        focusedInput.blur();
+        return true;
+    }
+    return false;
+}
+function isTouchInsideLayout(event, layout) {
+    if (!layout)
+        return false;
+    const { pageX, pageY } = event.nativeEvent;
+    const left = layout.absoluteX - FOCUSED_INPUT_TOUCH_SLOP;
+    const right = layout.absoluteX + layout.width + FOCUSED_INPUT_TOUCH_SLOP;
+    const top = layout.absoluteY - FOCUSED_INPUT_TOUCH_SLOP;
+    const bottom = layout.absoluteY + layout.height + FOCUSED_INPUT_TOUCH_SLOP;
+    return pageX >= left && pageX <= right && pageY >= top && pageY <= bottom;
+}
+export function isTouchInsideKeyboardFocusedInput(event, nativeLayout) {
+    return (isTouchInsideLayout(event, getKeyboardFocusedInputLayout()) ||
+        isTouchInsideLayout(event, nativeLayout));
+}

package/package.json

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