@mrmeg/expo-ui 0.22.0 → 0.24.0

package/dist/components/Accordion.js

@@ -132,7 +132,7 @@ function AccordionTrigger({ children, style: styleOverride, disabled, ...props }
                                     justifyContent: "space-between",
                                     gap: spacing.md,
                                     borderRadius: spacing.radiusMd,
-                                    paddingVertical: spacing.md,
+                                    paddingVertical: spacing.smd,
                                     ...(Platform.OS === "web" && {
                                         cursor: "pointer",
                                         userSelect: "none",

package/dist/components/BottomSheet.js

@@ -181,7 +181,7 @@ function SheetCloseButton({ style }) {
  *     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
+ *     a tap-to-dismiss overlay in the app. 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.

package/dist/components/Card.js

@@ -98,24 +98,24 @@ const createCardStyles = (theme) => StyleSheet.create({
         backgroundColor: "transparent",
     },
     header: {
-        padding: spacing.lg,
+        padding: spacing.cardPadding,
         paddingBottom: spacing.xs,
         gap: spacing.xs,
     },
     content: {
-        paddingHorizontal: spacing.lg,
-        paddingBottom: spacing.lg,
+        paddingHorizontal: spacing.cardPadding,
+        paddingBottom: spacing.cardPadding,
     },
     footer: {
         flexDirection: "row",
         alignItems: "center",
-        paddingHorizontal: spacing.lg,
-        paddingBottom: spacing.lg,
+        paddingHorizontal: spacing.cardPadding,
+        paddingBottom: spacing.cardPadding,
         paddingTop: 0,
     },
     title: {
-        fontSize: 18,
-        lineHeight: 24,
+        fontSize: 16,
+        lineHeight: 22,
         letterSpacing: 0,
     },
     description: {

package/dist/components/Checkbox.js

@@ -117,7 +117,7 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         alignItems: "center",
         gap: spacing.sm,
-        minHeight: spacing.touchTarget,
+        minHeight: Platform.select({ web: spacing.formRowMinHeight, default: spacing.touchTarget }),
     },
     labelContainer: {
         flex: 1,

package/dist/components/Dialog.js

@@ -22,7 +22,25 @@ function DialogRoot({ children, ...props }) {
 function DialogContent({ portalHost, style, children, ...props }) {
     const { theme, getShadowStyle, getContrastingColor } = useTheme();
     const textColor = getContrastingColor(theme.colors.popover, palette.white, palette.black);
-    return (_jsx(DialogPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(DialogPrimitive.Overlay, { style: StyleSheet.flatten([
+    return (_jsx(DialogPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { 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,
+                // 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 },
@@ -32,7 +50,8 @@ function DialogContent({ portalHost, style, children, ...props }) {
                                                 borderColor: theme.colors.border,
                                                 borderWidth: 1,
                                                 borderRadius: spacing.radiusLg,
-                                                padding: spacing.lg,
+                                                padding: spacing.dialogPadding,
+                                                gap: spacing.md,
                                                 width: "100%",
                                                 ...getShadowStyle("soft"),
                                             },
@@ -40,7 +59,7 @@ function DialogContent({ portalHost, style, children, ...props }) {
                                         ]), ...props, children: children }) }) }) }) }) }) }) }) }));
 }
 function DialogHeader({ children, style, ...props }) {
-    return (_jsx(View, { style: StyleSheet.flatten([{ gap: spacing.xs, marginBottom: spacing.md }, style]), ...props, children: children }));
+    return (_jsx(View, { style: StyleSheet.flatten([{ gap: spacing.xs }, style]), ...props, children: children }));
 }
 function DialogFooter({ children, style, ...props }) {
     return (_jsx(View, { style: StyleSheet.flatten([
@@ -48,7 +67,6 @@ function DialogFooter({ children, style, ...props }) {
                 flexDirection: "row",
                 justifyContent: "flex-end",
                 gap: spacing.sm,
-                marginTop: spacing.lg,
             },
             style,
         ]), ...props, children: children }));
@@ -107,7 +125,8 @@ function AlertDialogContent({ portalHost, style, children, ...props }) {
                                                 borderColor: theme.colors.border,
                                                 borderWidth: 1,
                                                 borderRadius: spacing.radiusLg,
-                                                padding: spacing.lg,
+                                                padding: spacing.dialogPadding,
+                                                gap: spacing.md,
                                                 width: "100%",
                                                 ...getShadowStyle("soft"),
                                             },

package/dist/components/DismissKeyboard.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleProp, ViewStyle } from "react-native";
+import { type StyleProp, type ViewStyle } from "react-native";
 type Props = {
     children: React.ReactNode;
     style?: StyleProp<ViewStyle>;
@@ -9,7 +9,18 @@ type Props = {
     scrollable?: boolean;
 };
 /**
- * @returns Wrapper for a view that dismisses the keyboard when tapped outside of a text input
+ * Wrapper for a screen (or form) that dismisses the keyboard when the user taps
+ * outside of a text input.
+ *
+ * Mirrors RN's `keyboardShouldPersistTaps="handled"` for the native `@expo/ui`
+ * field, which RN itself cannot see: the wrapper never claims the touch, so
+ * buttons, other fields and the focused field's own gestures win, and it
+ * dismisses on release only when nothing else took the tap and the finger did
+ * not scroll. See `useKeyboardDismissResponder`.
+ *
+ * A drag on the inner ScrollView also hides the keyboard: `interactive` on iOS
+ * (UIKit resigns any first responder, SwiftUI fields included) and an explicit
+ * dismiss on drag start on Android, where RN's `on-drag` only knows RN inputs.
  */
-export declare const DismissKeyboard: (props: Props) => React.JSX.Element;
+export declare function DismissKeyboard({ children, style, avoidKeyboard, scrollable, }: Props): React.JSX.Element;
 export {};

package/dist/components/DismissKeyboard.js

@@ -1,58 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { Platform, ScrollView, View, } from "react-native";
-import { KeyboardController, useKeyboardContext, useKeyboardState, } from "./keyboardController";
+import { Platform, ScrollView, View } from "react-native";
 import { KeyboardAvoidingView, useKeyboardAvoidance } from "./KeyboardAvoidingView.js";
-import { isTouchInsideKeyboardFocusedInput } from "./keyboardFocusRegistry.js";
+import { dismissKeyboard, useKeyboardDismissResponder } from "./keyboardDismiss.js";
 /**
- * Native tap-away keyboard dismissal.
+ * Wrapper for a screen (or form) that dismisses the keyboard when the user taps
+ * outside of a text input.
  *
- * Why window-level dismissal: the native `@expo/ui` TextInput is a SwiftUI /
- * Compose field that never registers with React Native's `TextInputState`, so
- * `Keyboard.dismiss()` (which only blurs RN-tracked inputs) does nothing for it.
- * `KeyboardController.dismiss()` resigns the focused responder at the IME level,
- * which works for both native and RN fields.
+ * Mirrors RN's `keyboardShouldPersistTaps="handled"` for the native `@expo/ui`
+ * field, which RN itself cannot see: the wrapper never claims the touch, so
+ * buttons, other fields and the focused field's own gestures win, and it
+ * dismisses on release only when nothing else took the tap and the finger did
+ * not scroll. See `useKeyboardDismissResponder`.
  *
- * 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.
+ * A drag on the inner ScrollView also hides the keyboard: `interactive` on iOS
+ * (UIKit resigns any first responder, SwiftUI fields included) and an explicit
+ * dismiss on drag start on Android, where RN's `on-drag` only knows RN inputs.
  */
-function useDismissKeyboardOnOutsideTouch() {
-    const isVisible = useKeyboardState((state) => state.isVisible);
-    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
- */
-function DismissKeyboardLayout({ children, style, avoidKeyboard = true, scrollable = true, dismissOnTouchStart, }) {
+export function DismissKeyboard({ children, style, avoidKeyboard = true, scrollable = true, }) {
+    const responderProps = useKeyboardDismissResponder();
     const hasKeyboardAvoidance = useKeyboardAvoidance();
-    const content = scrollable ? (_jsx(ScrollView, { style: { flex: 1 }, contentContainerStyle: { flexGrow: 1, justifyContent: "center" }, keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, children: children })) : (children);
+    const content = scrollable ? (_jsx(ScrollView, { style: { flex: 1 }, contentContainerStyle: { flexGrow: 1, justifyContent: "center" }, keyboardShouldPersistTaps: "handled", keyboardDismissMode: Platform.OS === "ios" ? "interactive" : "none", onScrollBeginDrag: Platform.OS === "android" ? dismissKeyboard : undefined, showsVerticalScrollIndicator: false, children: children })) : (children);
     if (!avoidKeyboard || hasKeyboardAvoidance) {
-        return (_jsx(View, { style: { flex: 1 }, onStartShouldSetResponderCapture: dismissOnTouchStart, children: content }));
+        return (_jsx(View, { style: { flex: 1 }, ...responderProps, children: content }));
     }
-    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 }));
+    return (_jsx(KeyboardAvoidingView, { style: [{ flex: 1, width: "100%" }, style], keyboardVerticalOffset: 0, ...responderProps, children: content }));
 }
-/**
- * @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 });
-};

package/dist/components/EmptyState.js

@@ -33,7 +33,7 @@ const createStyles = (theme) => StyleSheet.create({
     container: {
         alignItems: "center",
         justifyContent: "center",
-        paddingVertical: spacing.xxl,
+        paddingVertical: spacing.xl,
         paddingHorizontal: spacing.lg,
     },
     bordered: {
@@ -41,7 +41,7 @@ const createStyles = (theme) => StyleSheet.create({
         borderStyle: "dashed",
         borderColor: theme.colors.border,
         borderRadius: spacing.radiusLg,
-        padding: spacing.xl,
+        padding: spacing.lg,
     },
     iconWrapper: {
         width: MEDIA_SIZE,

package/dist/components/InputOTP.js

@@ -63,7 +63,10 @@ function InputOTP({ length = 6, value = "", onChangeText, onComplete, error = fa
     const markOtpBlurred = useCallback(() => {
         setFocused(false);
     }, []);
-    return (_jsxs(View, { style: StyleSheet.flatten([styles.container, styleOverride]), children: [_jsx(RNTextInput, { ref: inputRef, value: value, onChangeText: handleChangeText, onKeyPress: handleKeyPress, onFocus: markOtpFocused, onBlur: markOtpBlurred, maxLength: length, autoFocus: autoFocus, editable: !disabled, inputMode: inputMode, autoComplete: "one-time-code", textContentType: "oneTimeCode", caretHidden: true, style: styles.hiddenInput, accessibilityLabel: "Verification code input", importantForAccessibility: "yes" }), _jsx(View, { style: styles.cellRow, children: Array.from({ length }, (_, index) => {
+    return (_jsxs(View, { style: StyleSheet.flatten([styles.container, styleOverride]), children: [_jsx(RNTextInput, { ref: inputRef, value: value, onChangeText: handleChangeText, onKeyPress: handleKeyPress, onFocus: markOtpFocused, onBlur: markOtpBlurred, maxLength: length, autoFocus: autoFocus, editable: !disabled, inputMode: inputMode, 
+                // Android only recognises the `sms-otp` autofill hint; iOS and web use
+                // `one-time-code` + `oneTimeCode` to offer codes from Messages / Mail.
+                autoComplete: Platform.OS === "android" ? "sms-otp" : "one-time-code", textContentType: "oneTimeCode", caretHidden: true, style: styles.hiddenInput, accessibilityLabel: "Verification code input", importantForAccessibility: "yes" }), _jsx(View, { style: styles.cellRow, children: Array.from({ length }, (_, index) => {
                     const char = value[index] ?? "";
                     const isActive = focused && index === activeIndex;
                     const displayChar = char

package/dist/components/Item.d.ts

@@ -16,8 +16,9 @@ export interface ItemProps {
 /**
  * Item
  *
- * Grouped-list row container: `spacing.md` padding and gap, a comfortable
- * 44pt min height, and an optional pressable scale interaction. Compose
+ * Grouped-list row container: compact row padding (`spacing.rowPaddingY` /
+ * `spacing.rowPaddingX`) and gap, a 44pt min height on native (40 on web),
+ * and an optional pressable scale interaction. Compose
  * with `ItemMedia`, `ItemContent` (+ `ItemTitle`/`ItemDescription`), and
  * `ItemActions`.
  *

package/dist/components/Item.js

@@ -8,12 +8,13 @@ import { spacing } from "../constants/spacing.js";
 // Default ItemMedia footprint (see ItemMedia's `size` prop) — used to inset
 // the optional separator past the media slot without needing a context.
 const DEFAULT_MEDIA_SIZE = 40;
-const SEPARATOR_INSET = spacing.md + DEFAULT_MEDIA_SIZE + spacing.md;
+const SEPARATOR_INSET = spacing.rowPaddingX + DEFAULT_MEDIA_SIZE + spacing.rowGap;
 /**
  * Item
  *
- * Grouped-list row container: `spacing.md` padding and gap, a comfortable
- * 44pt min height, and an optional pressable scale interaction. Compose
+ * Grouped-list row container: compact row padding (`spacing.rowPaddingY` /
+ * `spacing.rowPaddingX`) and gap, a 44pt min height on native (40 on web),
+ * and an optional pressable scale interaction. Compose
  * with `ItemMedia`, `ItemContent` (+ `ItemTitle`/`ItemDescription`), and
  * `ItemActions`.
  *
@@ -104,9 +105,10 @@ const styles = StyleSheet.create({
     row: {
         flexDirection: "row",
         alignItems: "center",
-        minHeight: spacing.touchTarget,
-        padding: spacing.md,
-        gap: spacing.md,
+        minHeight: Platform.select({ web: spacing.rowMinHeight, default: spacing.touchTarget }),
+        paddingVertical: spacing.rowPaddingY,
+        paddingHorizontal: spacing.rowPaddingX,
+        gap: spacing.rowGap,
     },
     content: {
         flex: 1,

package/dist/components/RadioGroup.js

@@ -151,7 +151,7 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         alignItems: "center",
         gap: spacing.sm,
-        minHeight: spacing.touchTarget,
+        minHeight: Platform.select({ web: spacing.formRowMinHeight, default: spacing.touchTarget }),
     },
     labelContainer: {
         flex: 1,

package/dist/components/StatCard.js

@@ -37,5 +37,5 @@ export function StatCard({ label, value, unit, change, icon, onPress, style }) {
             : change.direction === "down"
                 ? theme.colors.destructive
                 : theme.colors.textDim;
-    return (_jsx(Card, { onPress: onPress, style: style, children: _jsxs(View, { style: { padding: spacing.lg, gap: spacing.xs }, children: [_jsxs(View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [_jsx(CaptionText, { selectable: false, style: { color: theme.colors.textDim, textTransform: "uppercase", letterSpacing: 0.96 }, children: label }), !!icon && _jsx(Icon, { name: icon, size: spacing.iconSm, color: theme.colors.mutedForeground, decorative: true })] }), _jsxs(View, { style: { flexDirection: "row", alignItems: "flex-end" }, children: [_jsx(StyledText, { selectable: false, size: "xxl", fontWeight: "bold", style: { color: theme.colors.foreground, fontVariant: ["tabular-nums"] }, children: value }), !!unit && (_jsx(StyledText, { selectable: false, size: "base", style: { color: theme.colors.textDim, marginLeft: spacing.xxs, marginBottom: 2 }, children: unit }))] }), !!change && (_jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: spacing.xxs }, children: [change.direction !== "neutral" && (_jsx(Icon, { name: DIRECTION_ICON[change.direction], size: spacing.iconXs, color: changeColor, decorative: true })), _jsx(StyledText, { selectable: false, size: "sm", style: { color: changeColor }, children: change.value })] }))] }) }));
+    return (_jsx(Card, { onPress: onPress, style: style, children: _jsxs(View, { style: { padding: spacing.cardPadding, gap: spacing.xs }, children: [_jsxs(View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [_jsx(CaptionText, { selectable: false, style: { color: theme.colors.textDim, textTransform: "uppercase", letterSpacing: 0.96 }, children: label }), !!icon && _jsx(Icon, { name: icon, size: spacing.iconSm, color: theme.colors.mutedForeground, decorative: true })] }), _jsxs(View, { style: { flexDirection: "row", alignItems: "flex-end" }, children: [_jsx(StyledText, { selectable: false, size: "xxl", fontWeight: "bold", style: { color: theme.colors.foreground, fontVariant: ["tabular-nums"] }, children: value }), !!unit && (_jsx(StyledText, { selectable: false, size: "base", style: { color: theme.colors.textDim, marginLeft: spacing.xxs, marginBottom: 2 }, children: unit }))] }), !!change && (_jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: spacing.xxs }, children: [change.direction !== "neutral" && (_jsx(Icon, { name: DIRECTION_ICON[change.direction], size: spacing.iconXs, color: changeColor, decorative: true })), _jsx(StyledText, { selectable: false, size: "sm", style: { color: changeColor }, children: change.value })] }))] }) }));
 }

package/dist/components/TextInput.js

@@ -10,8 +10,11 @@ import { Icon } from "./Icon.js";
 import { hapticLight } from "../lib/haptics.js";
 import { createThemedStyles } from "../lib/themedStyles.js";
 import { palette } from "../constants/colors.js";
-import { clearKeyboardFocusedInputLayout, setKeyboardFocusedInputLayout, } from "./keyboardFocusRegistry.js";
+import { clearKeyboardFocusedInput, setKeyboardFocusedInput, } from "./keyboardFocusRegistry.js";
+import { useTextInputSurfaceResponder } from "./keyboardDismiss.js";
 const NUMERIC_REGEX = /^[0-9]*$/;
+/** Platform touch-target guideline (pt); the compact fields sit below it. */
+const MIN_TOUCH_TARGET = 44;
 const SIZE_CONFIGS = {
     sm: {
         height: 32,
@@ -207,11 +210,36 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
     const [passwordVisible, setPasswordVisible] = useState(false);
     const hasError = error || !!errorText;
     const sizeConfig = SIZE_CONFIGS[size];
-    // Password visibility toggle. Flipping `secureTextEntry` swaps SwiftUI's
-    // SecureField <-> TextField on iOS and toggles Compose's visualTransformation
-    // on Android; both bind the same `state` observable, so the text survives.
+    // Password visibility toggle. Flipping `secureTextEntry` toggles Compose's
+    // visualTransformation in place on Android, but on iOS it selects a different
+    // native view (SwiftUI SecureField vs TextField), so React remounts the field
+    // and the keyboard drops with a full dismiss + re-present bounce.
+    //
+    // iOS handoff: while the field is focused, the toggle keeps the OLD view
+    // mounted (and visible) and mounts the NEW view hidden with `autoFocus`.
+    // UIKit hands first responder from old to new without hiding the keyboard;
+    // once the new view reports focus, it takes the layout slot and the old one
+    // unmounts. Both views bind the same `state`, so the text carries over.
     const hasSecureToggle = !!(secureTextEntry && showSecureEntryToggle);
-    const effectiveSecureTextEntry = secureTextEntry && !passwordVisible;
+    const effectiveSecureTextEntry = !!secureTextEntry && !passwordVisible;
+    const [handoff, setHandoff] = useState(null);
+    const handoffRef = useRef(null);
+    const isFocusedRef = useRef(false);
+    const activeSecureRef = useRef(effectiveSecureTextEntry);
+    activeSecureRef.current = effectiveSecureTextEntry;
+    // Taps that land while a handoff is in flight are counted and applied (by
+    // parity) once it settles.
+    const queuedTogglesRef = useRef(0);
+    const toggleRef = useRef(() => { });
+    // Per-flavour mount generation. Bumped whenever a flavour becomes the incoming
+    // view so React always mounts a FRESH native view (whose `autoFocus` will run)
+    // instead of reusing one that is still unmounting from the previous handoff.
+    const generationRef = useRef({ secure: 0, plain: 0 });
+    // Last text the JS side knows about; see handleChangeText.
+    const lastTextRef = useRef(value ?? defaultValue ?? "");
+    // Armed when the hide toggle hands focus to the SecureField (iOS); see
+    // handleChangeText.
+    const restoreAfterSecureHandoffRef = useRef(false);
     // Native text buffer. Seeded once; `value` changes are reconciled below.
     const state = useNativeState(value ?? defaultValue ?? "");
     // Reconcile controlled `value` -> native buffer WITHOUT echoing keystrokes.
@@ -221,62 +249,159 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
         if (value !== undefined && value !== state.value) {
             state.value = value;
         }
+        if (value !== undefined)
+            lastTextRef.current = value;
     }, [value, state]);
     // The inner ref is the @expo/ui handle; the outward ref is typed as
     // RNTextInput because that's what the public TextInputCustomProps declares.
     // 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);
+    // One ref per native view flavour; only the active one (or, mid-handoff on
+    // iOS, both) is mounted.
+    const secureRef = useRef(null);
+    const plainRef = useRef(null);
+    const activeInput = useCallback(() => (activeSecureRef.current ? secureRef : plainRef).current, []);
+    const blurAll = useCallback(() => {
+        secureRef.current?.blur();
+        plainRef.current?.blur();
+    }, []);
     const focusRegistryToken = useMemo(() => ({}), []);
-    const syncFocusedInputLayout = useCallback(() => {
-        if (!isFocusedRef.current)
+    const finishHandoff = useCallback(() => {
+        const pending = handoffRef.current;
+        if (!pending)
+            return;
+        clearTimeout(pending.timer);
+        handoffRef.current = null;
+        setHandoff(null);
+        const queued = queuedTogglesRef.current;
+        queuedTogglesRef.current = 0;
+        if (queued % 2 === 1) {
+            // Next tick: let this commit settle first.
+            setTimeout(() => toggleRef.current(), 0);
+        }
+    }, []);
+    const parentOnFocus = onFocus;
+    const parentOnBlur = onBlur;
+    // Focus/blur from a view that is not the active flavour is ignored: that is
+    // the outgoing view resigning during a handoff, or a stale event from a view
+    // React is unmounting.
+    const handleFocus = useCallback((secure) => {
+        if (secure !== activeSecureRef.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(() => {
+        // Register a blur handle so tap-away dismissal (`keyboardDismiss.ts`) and
+        // the BottomSheet overlay can resign this field: RN's `TextInputState`
+        // never sees SwiftUI / Compose fields, so `Keyboard.dismiss()` cannot.
+        // Blurring through the field's own ref is window-independent — inside a
+        // native bottom sheet `KeyboardController.dismiss()` can miss, the ref
+        // never does.
+        setKeyboardFocusedInput(focusRegistryToken, blurAll);
+        if (handoffRef.current) {
+            // The incoming view took first responder; the parent never saw focus leave.
+            restoreAfterSecureHandoffRef.current = secure && lastTextRef.current.length > 0;
+            finishHandoff();
+            return;
+        }
+        parentOnFocus?.();
+    }, [blurAll, finishHandoff, focusRegistryToken, parentOnFocus]);
+    const handleBlur = useCallback((secure) => {
+        if (secure !== activeSecureRef.current)
+            return;
         isFocusedRef.current = false;
-        clearKeyboardFocusedInputLayout(focusRegistryToken);
-        onBlur?.();
-    }, [focusRegistryToken, onBlur]);
+        restoreAfterSecureHandoffRef.current = false;
+        clearKeyboardFocusedInput(focusRegistryToken);
+        parentOnBlur?.();
+    }, [focusRegistryToken, parentOnBlur]);
+    const togglePasswordVisible = useCallback(() => {
+        if (handoffRef.current) {
+            // Mid-handoff: flipping now would unmount the view about to take first
+            // responder and drop the keyboard. Apply it once the handoff settles.
+            queuedTogglesRef.current += 1;
+            return;
+        }
+        restoreAfterSecureHandoffRef.current = false;
+        const outgoingSecure = activeSecureRef.current;
+        if (outgoingSecure)
+            generationRef.current.plain += 1;
+        else
+            generationRef.current.secure += 1;
+        if (Platform.OS === "ios" && isFocusedRef.current) {
+            const timer = setTimeout(() => {
+                // The incoming view never took first responder. Rather than unmount
+                // the focused outgoing view (which would drop the keyboard), undo the
+                // toggle so the outgoing flavour stays active; the user can tap again.
+                finishHandoff();
+                if (!activeInput()?.isFocused()) {
+                    setPasswordVisible(!outgoingSecure);
+                    setTimeout(() => {
+                        // If the outgoing view lost focus in the meantime (e.g. a tap
+                        // away during the handoff), report the blur its handler ignored.
+                        if (!activeInput()?.isFocused()) {
+                            isFocusedRef.current = false;
+                            clearKeyboardFocusedInput(focusRegistryToken);
+                            parentOnBlur?.();
+                        }
+                    }, 0);
+                }
+            }, 600);
+            handoffRef.current = { outgoingSecure, timer };
+            setHandoff({ outgoingSecure });
+        }
+        setPasswordVisible((v) => !v);
+    }, [activeInput, finishHandoff, focusRegistryToken, parentOnBlur]);
+    toggleRef.current = togglePasswordVisible;
+    // iOS clears a secure field's existing text on the first keystroke after it
+    // becomes first responder (text it did not see typed). Right after the hide
+    // toggle hands focus to the SecureField that reads as "type one character,
+    // lose the password", so the wiped text is put back with the keystroke
+    // applied. Only the first change after that handoff is eligible. A wipe
+    // shows up as a single character that cannot be a backspace of the previous
+    // text, or as an empty string (the wipe followed by a backspace that hit
+    // nothing) while the previous text had more than one character.
+    const handleChangeText = useCallback((text) => {
+        const previous = lastTextRef.current;
+        const armed = restoreAfterSecureHandoffRef.current && previous.length > 0;
+        const wipedByKey = armed && text.length === 1 && !previous.startsWith(text);
+        const wipedByBackspace = armed && text === "" && previous.length > 1;
+        const wiped = wipedByKey || wipedByBackspace;
+        restoreAfterSecureHandoffRef.current = false;
+        const next = wipedByKey ? previous + text : wipedByBackspace ? previous.slice(0, -1) : text;
+        lastTextRef.current = next;
+        if (wiped)
+            state.value = next;
+        onChangeText?.(next);
+    }, [onChangeText, state]);
     useEffect(() => {
-        return () => clearKeyboardFocusedInputLayout(focusRegistryToken);
+        return () => {
+            if (handoffRef.current)
+                clearTimeout(handoffRef.current.timer);
+            clearKeyboardFocusedInput(focusRegistryToken);
+        };
     }, [focusRegistryToken]);
+    // The SwiftUI field only hit-tests its text line, so a tap on the box's
+    // vertical padding (or on the hitSlop below) would otherwise be a no-op.
+    const surfaceResponderProps = useTextInputSurfaceResponder(() => {
+        if (editable === false)
+            return;
+        activeInput()?.focus();
+    });
+    // Stretch the touch target to the 44pt guideline without changing the box.
+    const surfaceHitSlop = Math.max(0, Math.ceil((MIN_TOUCH_TARGET - sizeConfig.height) / 2));
     useImperativeHandle(ref, () => ({
-        focus: () => innerRef.current?.focus(),
-        blur: () => innerRef.current?.blur(),
+        focus: () => activeInput()?.focus(),
+        blur: () => blurAll(),
         clear: () => {
             state.value = "";
+            lastTextRef.current = "";
         },
-        isFocused: () => innerRef.current?.isFocused() ?? false,
+        isFocused: () => activeInput()?.isFocused() ?? false,
         setNativeProps: (props) => {
             if (typeof props?.text === "string") {
                 state.value = props.text;
+                lastTextRef.current = props.text;
             }
         },
-    }), [state]);
+    }), [activeInput, blurAll, state]);
     const backgroundColor = forceLight
         ? palette.white
         : variant === "filled"
@@ -335,7 +460,20 @@ 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, { 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, size: "sm", 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, 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: [[true, false].map((secure) => {
+                        const active = secure === effectiveSecureTextEntry;
+                        const outgoing = handoff != null && secure === handoff.outgoingSecure;
+                        if (!active && !outgoing)
+                            return null;
+                        // Mid-handoff the outgoing view keeps the visible slot (and focus)
+                        // while the incoming one mounts hidden and takes first responder.
+                        const inLayout = handoff ? outgoing : active;
+                        return (_jsx(Host, { matchContents: { vertical: true }, style: inLayout
+                                ? hasSecureToggle
+                                    ? styles.nativeHostFlex
+                                    : styles.nativeHost
+                                : styles.nativeHostHandoff, pointerEvents: inLayout ? "auto" : "none", accessibilityElementsHidden: !inLayout, importantForAccessibility: inLayout ? "auto" : "no-hide-descendants", children: _jsx(ExpoTextInput, { ...rest, autoFocus: rest.autoFocus || (handoff != null && active), ref: secure ? secureRef : plainRef, value: state, defaultValue: defaultValue, onChangeText: handleChangeText, onFocus: () => handleFocus(secure), onBlur: () => handleBlur(secure), editable: editable, multiline: multiline, rows: rows, inputMode: inputMode, secureTextEntry: secure, placeholderTextColor: theme.colors.textDim, style: boxStyle, textStyle: textStyle }) }, secure ? `secure-${generationRef.current.secure}` : `plain-${generationRef.current.plain}`));
+                    }), hasSecureToggle && (_jsx(Pressable, { style: styles.nativePasswordToggle, onPress: togglePasswordVisible, 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, size: "sm", style: [styles.helperText, hasError && styles.errorText], children: errorText || helperText }))] }));
 }
 const createStyles = (theme, variant, size) => StyleSheet.create({
     nativeHost: {
@@ -349,6 +487,15 @@ const createStyles = (theme, variant, size) => StyleSheet.create({
     nativeHostFlex: {
         flex: 1,
     },
+    // Incoming view during an iOS secure/plain handoff: mounted and focusable,
+    // but invisible and out of the row's layout until it holds first responder.
+    nativeHostHandoff: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        opacity: 0,
+    },
     nativePasswordToggle: {
         paddingHorizontal: spacing.xs,
     },

package/dist/components/index.d.ts

@@ -11,6 +11,7 @@ export * from "./Checkbox";
 export * from "./Collapsible";
 export * from "./Dialog";
 export * from "./DismissKeyboard";
+export * from "./keyboardDismiss";
 export * from "./Drawer";
 export * from "./DropdownMenu";
 export * from "./EmptyState";