@expo/ui 57.0.12 → 57.0.14

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

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

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

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

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

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

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

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

package/src/swift-ui/RNHostView.tsx

@@ -1,10 +1,13 @@
 import { requireNativeView } from 'expo';
 
+import { PresentedContentContext, useIsPresentedInOwnWindow } from '../PresentedContentContext';
+
 const RNHostNativeView: React.ComponentType<any> = requireNativeView('ExpoUI', 'RNHostView');
 
 export interface RNHostViewProps {
   /**
-   * When `true`, the RNHost will update its size in the React Native view tree to match the children's size.
+   * When `true`, the RNHost will update its size in the React Native view tree to match the
+   * children's size.
    * When `false`, the RNHost will use the size of the parent SwiftUI View.
    * Can be only set once on mount.
    * @default false
@@ -17,12 +20,23 @@ export interface RNHostViewProps {
 }
 
 export function RNHostView(props: RNHostViewProps) {
+  // A sheet or popover presents its content in its own view controller, where the React Native
+  // surface root is not an ancestor and so touch dispatches don't work.
+  // Hosted content there owns its touches and is the origin it is measured from; native reads
+  // this one prop for both.
+  const layoutRoot = useIsPresentedInOwnWindow();
+
   return (
     <RNHostNativeView
       {...props}
+      layoutRoot={layoutRoot}
       // `matchContents` can only be used once on mount
       // So we force unmount when it changes to prevent unexpected layout
-      key={props.matchContents ? 'matchContents' : 'noMatchContents'}
-    />
+      key={props.matchContents ? 'matchContents' : 'noMatchContents'}>
+      {/* Reset context here so only nearest RNHostView becomes the layout root for its children, and not any other RNHostView above it in the tree. */}
+      <PresentedContentContext.Provider value={false}>
+        {props.children}
+      </PresentedContentContext.Provider>
+    </RNHostNativeView>
   );
 }

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

@@ -2,6 +2,7 @@ import { requireNativeView } from 'expo';
 import type { Ref } from 'react';
 
 import { getStateId, type ObservableState, useWorkletProp, worklets } from '../../State';
+import { useHostedTextInput } from '../../keyboard';
 import type { ViewEvent } from '../../types';
 import { Slot } from '../SlotView';
 import { createViewModifierEventListener } from '../modifiers/utils';
@@ -74,14 +75,19 @@ function Placeholder({ children }: { children: React.ReactNode }) {
  * Renders a SwiftUI `SecureField` for password input.
  */
 export function SecureField(props: SecureFieldProps) {
-  const { text, onTextChange, onFocusChange, modifiers, ...restProps } = props;
+  const { text, onTextChange, onFocusChange, modifiers, ref, ...restProps } = props;
 
   const isWorklet = !!onTextChange && !!worklets?.isWorkletFunction?.(onTextChange);
   const workletCallback = useWorkletProp(isWorklet ? onTextChange : undefined, 'onTextChange');
+  // `blurOnUnmount`: a field left first responder while its row is removed makes UIKit
+  // assert ("refused to resign"); native teardown hooks run too late to clear SwiftUI's
+  // `@FocusState`. https://github.com/expo/expo/issues/49348
+  const hosted = useHostedTextInput<SecureFieldRef>(ref, onFocusChange, { blurOnUnmount: true });
 
   return (
     <SecureFieldNativeView
       {...restProps}
+      ref={hosted.ref}
       modifiers={modifiers}
       {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
       text={getStateId(text)}
@@ -89,7 +95,7 @@ export function SecureField(props: SecureFieldProps) {
       onTextChange={
         !isWorklet && onTextChange ? (event) => onTextChange(event.nativeEvent.value) : undefined
       }
-      onFocusChange={onFocusChange ? (event) => onFocusChange(event.nativeEvent.value) : undefined}
+      onFocusChange={(event) => hosted.onFocusChange(event.nativeEvent.value)}
     />
   );
 }

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

@@ -2,6 +2,7 @@ import { requireNativeView } from 'expo';
 import type { Ref } from 'react';
 
 import { getStateId, type ObservableState, useWorkletProp, worklets } from '../../State';
+import { useHostedTextInput } from '../../keyboard';
 import type { ViewEvent } from '../../types';
 import { Slot } from '../SlotView';
 import { createViewModifierEventListener } from '../modifiers/utils';
@@ -114,15 +115,21 @@ export function TextField(props: TextFieldProps) {
     onFocusChange,
     onSelectionChange,
     modifiers,
+    ref,
     ...restProps
   } = props;
 
   const isWorklet = !!onTextChange && !!worklets?.isWorkletFunction?.(onTextChange);
   const workletCallback = useWorkletProp(isWorklet ? onTextChange : undefined, 'onTextChange');
+  // `blurOnUnmount`: a field left first responder while its row is removed makes UIKit
+  // assert ("refused to resign"); native teardown hooks run too late to clear SwiftUI's
+  // `@FocusState`. https://github.com/expo/expo/issues/49348
+  const hosted = useHostedTextInput<TextFieldRef>(ref, onFocusChange, { blurOnUnmount: true });
 
   return (
     <TextFieldNativeView
       {...restProps}
+      ref={hosted.ref}
       modifiers={modifiers}
       {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
       text={getStateId(text)}
@@ -131,7 +138,7 @@ export function TextField(props: TextFieldProps) {
       onTextChange={
         !isWorklet && onTextChange ? (event) => onTextChange(event.nativeEvent.value) : undefined
       }
-      onFocusChange={onFocusChange ? (event) => onFocusChange(event.nativeEvent.value) : undefined}
+      onFocusChange={(event) => hosted.onFocusChange(event.nativeEvent.value)}
       onSelectionChange={
         onSelectionChange
           ? (event) =>

package/src/swift-ui/index.tsx

@@ -52,6 +52,7 @@ export * from './ScrollView';
 export * from './Shapes';
 export * from './Mask';
 export * from './Overlay';
+export * from './Background';
 export * from './Popover';
 export * from './Grid';
 export * from './RNHostView';

package/src/swift-ui/modifiers/index.ts

@@ -1129,6 +1129,30 @@ export const listRowSeparatorTint = (color?: Color, edges?: 'all' | 'top' | 'bot
  */
 export const listRowSpacing = (spacing?: number) => createModifier('listRowSpacing', { spacing });
 
+/**
+ * Sets the position of a horizontal alignment guide of this view.
+ *
+ * Use the `'listRowSeparatorLeading'` guide to set where the separator of a `List` row starts.
+ * SwiftUI insets a row separator past a leading `Image`, but not past other leading content, so
+ * rows with different leading content get separators that start at different offsets.
+ * @param guide - The horizontal alignment guide to set. `'listRowSeparatorLeading'` and
+ * `'listRowSeparatorTrailing'` do nothing on tvOS, where SwiftUI does not provide them.
+ * @param value - The position of the guide, in points from the leading edge of the view.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/alignmentguide(_:computevalue:)-9mdoh).
+ *
+ * @example
+ * ```tsx
+ * <HStack modifiers={[alignmentGuide('listRowSeparatorLeading', 32)]}>
+ *   <Text>A</Text>
+ *   <Text>The separator starts 32 points from the leading edge</Text>
+ * </HStack>
+ * ```
+ */
+export const alignmentGuide = (
+  guide: 'leading' | 'center' | 'trailing' | 'listRowSeparatorLeading' | 'listRowSeparatorTrailing',
+  value: number
+) => createModifier('alignmentGuide', { guide, value });
+
 /**
  * Sets the truncation mode for lines of text that are too long to fit in the available space.
  * @param mode - The truncation mode that specifies where to truncate the text within the text view, if needed.
@@ -1743,6 +1767,7 @@ export type BuiltInModifier =
   | ReturnType<typeof listRowSeparator>
   | ReturnType<typeof listRowSeparatorTint>
   | ReturnType<typeof listRowSpacing>
+  | ReturnType<typeof alignmentGuide>
   | ReturnType<typeof truncationMode>
   | ReturnType<typeof allowsTightening>
   | ReturnType<typeof kerning>

package/src/ts-declarations/react-native-text-input-state.d.ts

@@ -0,0 +1,26 @@
+declare module 'react-native/Libraries/Components/TextInput/TextInputState' {
+  import type { ReactNativeElement } from 'react-native';
+
+  /**
+   * React Native's registry of focusable text inputs. `ScrollView` reads it to
+   * decide whether a touch landed on the focused input, and `Keyboard.dismiss()`
+   * blurs whatever it points at. `TextInput.State` re-exports only a read-only
+   * subset publicly, so participating in the registry requires this module.
+   */
+  const TextInputState: {
+    currentlyFocusedInput(): ReactNativeElement | null;
+    /** Marks an instance as focused. Does not dispatch a native focus command. */
+    focusInput(instance: ReactNativeElement | null): void;
+    /** Clears the focused instance, but only if it is the one passed in. */
+    blurInput(instance: ReactNativeElement | null): void;
+    registerInput(instance: ReactNativeElement): void;
+    unregisterInput(instance: ReactNativeElement): void;
+    isTextInput(instance: ReactNativeElement): boolean;
+    /** Marks an instance as focused, then dispatches a native `focus` command. */
+    focusTextInput(instance: ReactNativeElement | null): void;
+    /** Clears the focused instance, then dispatches a native `blur` command. */
+    blurTextInput(instance: ReactNativeElement | null): void;
+  };
+
+  export default TextInputState;
+}

package/src/universal/BottomSheet/index.android.tsx

@@ -40,6 +40,8 @@ export function BottomSheet({
   testID,
   modifiers,
   shouldDismissOnBackPress = true,
+  shouldDismissOnClickOutside = true,
+  scrimColor,
   contentPadding,
 }: BottomSheetProps) {
   const sheetRef = useRef<ModalBottomSheetRef>(null);
@@ -82,7 +84,8 @@ export function BottomSheet({
         onDismissRequest={onDismiss}
         showDragHandle={showDragIndicator}
         skipPartiallyExpanded={shouldSkipPartiallyExpanded(snapPoints)}
-        properties={{ shouldDismissOnBackPress }}
+        properties={{ shouldDismissOnBackPress, shouldDismissOnClickOutside }}
+        scrimColor={scrimColor}
         modifiers={modifiers}>
         <Column modifiers={contentModifiers}>{children}</Column>
       </ModalBottomSheet>

package/src/universal/BottomSheet/types.ts

@@ -1,3 +1,5 @@
+import type { ColorValue } from 'react-native';
+
 import type { ModifierConfig } from '../../types';
 
 /**
@@ -88,6 +90,21 @@ export interface BottomSheetProps {
    */
   shouldDismissOnBackPress?: boolean;
 
+  /**
+   * Whether tapping the backdrop (scrim) dismisses the bottom sheet.
+   * When `false`, the sheet stays open until the user explicitly closes it (e.g. via a button).
+   * @default true
+   * @platform android
+   */
+  shouldDismissOnClickOutside?: boolean;
+
+  /**
+   * The color of the scrim overlay rendered behind the bottom sheet.
+   * Pass `'transparent'` to make the backdrop invisible while still blocking touches.
+   * @platform android
+   */
+  scrimColor?: ColorValue;
+
   /**
    * Platform-specific modifier escape hatch. Pass an array of modifier configs
    * from `@expo/ui/swift-ui/modifiers` or `@expo/ui/jetpack-compose/modifiers`.

package/src/utils/useMergeRefs.ts

@@ -0,0 +1,47 @@
+import { useCallback, useRef, type Ref } from 'react';
+
+/**
+ * Builds a ref that forwards its value to each of the given refs, in the order
+ * they are given. Handles object refs and callback refs, including a callback
+ * ref that returns its own cleanup function.
+ *
+ * A copy of React Native's `useMergeRefs`, which lives behind a deep internal
+ * import: those are deprecated, warn in development, and have no counterpart in
+ * React Native for web.
+ */
+export function useMergeRefs<T>(...refs: (Ref<T> | undefined)[]): (instance: T | null) => void {
+  const cleanups = useRef<(void | (() => void))[]>([]);
+
+  return useCallback(
+    (instance: T | null) => {
+      for (const cleanup of cleanups.current) {
+        cleanup?.();
+      }
+      cleanups.current = [];
+      if (instance == null) {
+        return;
+      }
+      cleanups.current = refs.map((ref) => {
+        if (ref == null) {
+          return undefined;
+        }
+        if (typeof ref === 'function') {
+          const cleanup = ref(instance);
+          return typeof cleanup === 'function' ? cleanup : () => ref(null);
+        }
+        // React's `RefObject<T>` type does not admit null, but a detached ref has
+        // to be cleared, which is what React itself does here.
+        const refObject = ref as { current: T | null };
+        refObject.current = instance;
+        return () => {
+          refObject.current = null;
+        };
+      });
+    },
+    // The refs are the dependencies. Changing one has to produce a new ref so that
+    // React detaches the old one and attaches the new, which is how React Native's
+    // own `useMergeRefs` behaves.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    refs
+  );
+}

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.12/expo.modules.ui-57.0.12-sources.jar.md5

@@ -1 +0,0 @@
-46f030ed2d5faa9fc07df319df125512

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.12/expo.modules.ui-57.0.12-sources.jar.sha1

@@ -1 +0,0 @@
-dabe60c8f675eb6123187ef607915dccbeb79789

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.12/expo.modules.ui-57.0.12-sources.jar.sha256

@@ -1 +0,0 @@
-3f5266c79c694c7d3ae5a885827d2dfb4ae922a9f66fceca406cd7556b753ac0

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.12/expo.modules.ui-57.0.12-sources.jar.sha512

@@ -1 +0,0 @@
-bee3386af6f699916c5f3b09c72510621403743e5e887bf0e60d13142304a97964289f39f1fe79355ca9127cc02dfc88cf2d21bbfa4638ed4b9446de05030856

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.12/expo.modules.ui-57.0.12.aar.md5

@@ -1 +0,0 @@
-4508cfcae86a661e2c66bbf15b5909b0

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.12/expo.modules.ui-57.0.12.aar.sha1

@@ -1 +0,0 @@
-2ba19351886430ec818130eab431ce8143a56693

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.12/expo.modules.ui-57.0.12.aar.sha256

@@ -1 +0,0 @@
-cdc531cad279eabcfce2c71e778614be0e16c45c77222fe4fa51fcbd7991e30b

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.12/expo.modules.ui-57.0.12.aar.sha512

@@ -1 +0,0 @@
-8feb6c5213343355b543cddfedde01251c5a8a9067aa01efb89fe663b2a0e04f3284ab62ed2c9a2f8e65305691f61dd248ba2fdbc3dc7415c5d09ced6425edd1

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.12/expo.modules.ui-57.0.12.module.md5

@@ -1 +0,0 @@
-e5ac93703a61ae630a0dd0c0e6d369f3

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.12/expo.modules.ui-57.0.12.module.sha1

@@ -1 +0,0 @@
-64563430ecb895ad72e936b019402ccd7c9e6c89

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.12/expo.modules.ui-57.0.12.module.sha256

@@ -1 +0,0 @@
-a615e1f0a09d6a7e76aba8b907fde6ffae9af29c50e411d880ba36a30908ccdb

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.12/expo.modules.ui-57.0.12.module.sha512

@@ -1 +0,0 @@
-fab8c1e40a8d6e25b66e77c977f415a05a3c4f6b5dcafb461c3a1be165b8db57f21b6cce4b46446a7855090b367fd38ff678b6d48e807dc22712d5e207cd9336

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.12/expo.modules.ui-57.0.12.pom.md5

@@ -1 +0,0 @@
-a337a557c57ffe7e752768ab50d3a6b5

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.12/expo.modules.ui-57.0.12.pom.sha1

@@ -1 +0,0 @@
-dcf4640e9a602afa20af004bae13cdcb182d7cc6

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.12/expo.modules.ui-57.0.12.pom.sha256

@@ -1 +0,0 @@
-3f88190776e8ff18c8b42b46ee0b8b4e2a827cf671160966b6a3e1e62301f913

package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.12/expo.modules.ui-57.0.12.pom.sha512

@@ -1 +0,0 @@
-62c5c2b27746a876d4db64eef13f596835a2f876c0808457d1a82b38fc93e7e5e667a11a5cbcb603efa58ff10b9001981bb347f99b6bd009e452445c80299689