@expo/ui 57.0.13 → 57.0.14

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml

@@ -3,11 +3,11 @@
   <groupId>expo.modules.ui</groupId>
   <artifactId>expo.modules.ui</artifactId>
   <versioning>
-    <latest>57.0.13</latest>
-    <release>57.0.13</release>
+    <latest>57.0.14</latest>
+    <release>57.0.14</release>
     <versions>
-      <version>57.0.13</version>
+      <version>57.0.14</version>
     </versions>
-    <lastUpdated>20260824074615</lastUpdated>
+    <lastUpdated>20260826195105</lastUpdated>
   </versioning>
 </metadata>

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.md5

@@ -1 +1 @@
-c5687c59b58e66b61d7ad8422409a52b
+4dfe61c00978e656bb86f7a4aba692dd

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha1

@@ -1 +1 @@
-19e37e7626a16f1bed2cb5e7e532fe5b2849156f
+b9406185faafd8465b9a6d8c48ab5f7f70546764

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha256

@@ -1 +1 @@
-53945cd66292791187c0bc9fab8427ab497726954b09a946a1b4324dc85ac04f
+39b0c675409d452116a0df7c42ac801510989b59056cbac7611145c7e2548593

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha512

@@ -1 +1 @@
-e3b22c7838747c4ad21b1a89b65060b12b1511e30770682da53e9056895af8cbad35096654e090e29bc57b794de2f6b0390f70db5c4d3b75187edbbf36f321cb
+de8e79434bbdd397d0eba8e9679e265eb3f2b388de06555138c1a2c9e1f337b9ef0240ba566686cba658d7a7b501523141df379c83d1b35a44f0b6b94210046a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expo/ui",
-  "version": "57.0.13",
+  "version": "57.0.14",
   "description": "A collection of UI components",
   "sideEffects": [
     "*.fx.js",
@@ -96,8 +96,8 @@
     "@types/react": "~19.2.0",
     "react-native-reanimated": "4.5.1",
     "react-native-worklets": "0.10.1",
-    "expo": "57.0.16",
-    "expo-module-scripts": "56.0.3"
+    "expo-module-scripts": "56.0.3",
+    "expo": "57.0.17"
   },
   "jest": {
     "preset": "expo-module-scripts"
@@ -121,7 +121,7 @@
       "optional": true
     }
   },
-  "gitHead": "52fc013ec8c75e89ba8f83c167e4b6b0416e6bf7",
+  "gitHead": "c300d2cc60c9e684e64f48d9bc90ea18a571d01d",
   "scripts": {
     "build": "expo-module build",
     "clean": "expo-module clean",

package/src/PresentedContentContext.tsx

@@ -0,0 +1,22 @@
+import { createContext, useContext, type ReactNode } from 'react';
+
+export const PresentedContentContext = createContext(false);
+
+/**
+ * Whether the surrounding content is presented in its own view controller — a sheet, a popover
+ * — rather than in the React Native surface.
+ *
+ * `RNHostView` needs this because nothing above such content dispatches React Native touches: the
+ * surface root is not one of its ancestors. A hosted view there has to dispatch its own touches and
+ * be the origin its content is measured from, and both of those come from a single `layoutRoot`
+ * prop.
+ *
+ * Defaults to `false`, so content that is not wrapped keeps deferring to the surface root.
+ */
+export function useIsPresentedInOwnWindow(): boolean {
+  return useContext(PresentedContentContext);
+}
+
+export function PresentedContent({ children }: { children: ReactNode }) {
+  return <PresentedContentContext.Provider value>{children}</PresentedContentContext.Provider>;
+}

package/src/community/pager-view/PagerView.android.tsx

@@ -77,13 +77,7 @@ export function PagerView(props: PagerViewProps) {
   const pages = Children.toArray(children)
     .filter((child): child is ReactElement => isValidElement(child))
     .map((child, index) => (
-      <RNHostView
-        key={child.key ?? String(index)}
-        // Overlap pages at one origin so each page's RN shadow position matches
-        // where Compose draws it; otherwise `measure()`-based hit-testing
-        // (e.g. `Pressable`) misfires on pages after the first (#46386).
-        style={StyleSheet.absoluteFill}
-        modifiers={[fillMaxSize()]}>
+      <RNHostView key={child.key ?? String(index)} modifiers={[fillMaxSize()]}>
         <View style={styles.page} pointerEvents={index === settledPage ? 'auto' : 'none'}>
           {child}
         </View>

package/src/jetpack-compose/AlertDialog/index.tsx

@@ -1,6 +1,7 @@
 import { requireNativeView } from 'expo';
 import { type ColorValue } from 'react-native';
 
+import { PresentedContent } from '../../PresentedContentContext';
 import { type ViewEvent, type ModifierConfig, type DialogProperties } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
@@ -123,7 +124,11 @@ function AlertDialogIcon(props: { children: React.ReactNode }) {
  */
 function AlertDialogComponent(props: AlertDialogProps) {
   const { children, ...restProps } = props;
-  return <AlertDialogNativeView {...transformProps(restProps)}>{children}</AlertDialogNativeView>;
+  return (
+    <AlertDialogNativeView {...transformProps(restProps)}>
+      <PresentedContent>{children}</PresentedContent>
+    </AlertDialogNativeView>
+  );
 }
 
 AlertDialogComponent.Title = AlertDialogTitle;

package/src/jetpack-compose/BasicAlertDialog/index.tsx

@@ -1,5 +1,6 @@
 import { requireNativeView } from 'expo';
 
+import { PresentedContent } from '../../PresentedContentContext';
 import { type ViewEvent, type ModifierConfig, type DialogProperties } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
@@ -51,7 +52,12 @@ function transformProps(props: BasicAlertDialogProps): NativeBasicAlertDialogPro
  * Unlike `AlertDialog`, this component does not have structured title/text/buttons slots.
  */
 export function BasicAlertDialog(props: BasicAlertDialogProps) {
-  return <BasicAlertDialogNativeView {...transformProps(props)} />;
+  const { children, ...rest } = props;
+  return (
+    <BasicAlertDialogNativeView {...transformProps(rest as BasicAlertDialogProps)}>
+      <PresentedContent>{children}</PresentedContent>
+    </BasicAlertDialogNativeView>
+  );
 }
 
 // Re-exported so the docs generator includes DialogProperties on the BasicAlertDialog API page.

package/src/jetpack-compose/DropdownMenu/index.tsx

@@ -2,6 +2,7 @@ import { requireNativeView } from 'expo';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle, ColorValue } from 'react-native';
 
+import { PresentedContent } from '../../PresentedContentContext';
 import type { ModifierConfig } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
@@ -67,7 +68,12 @@ type NativeMenuProps = {
  * Children should be `DropdownMenuItem` components or other native views.
  */
 export function Items(props: { children: ReactNode }) {
-  return <SlotNativeView slotName="items">{props.children}</SlotNativeView>;
+  // The items are presented in their own popup window; the trigger stays in the React Native surface.
+  return (
+    <SlotNativeView slotName="items">
+      <PresentedContent>{props.children}</PresentedContent>
+    </SlotNativeView>
+  );
 }
 Items.tag = 'Items';
 

package/src/jetpack-compose/ExposedDropdownMenuBox/ExposedDropdownMenu.tsx

@@ -2,6 +2,7 @@ import { requireNativeView } from 'expo';
 import type { ReactNode } from 'react';
 import { type ColorValue } from 'react-native';
 
+import { PresentedContent } from '../../PresentedContentContext';
 import { type ModifierConfig } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
@@ -48,7 +49,8 @@ export function ExposedDropdownMenu(props: ExposedDropdownMenuProps) {
       modifiers={modifiers}
       {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
       {...restProps}>
-      {children}
+      {/* The menu is a popup in its own window. The anchor stays in `ExposedDropdownMenuBox`. */}
+      <PresentedContent>{children}</PresentedContent>
     </NativeView>
   );
 }

package/src/jetpack-compose/Host/index.tsx

@@ -1,5 +1,5 @@
 import { requireNativeView } from 'expo';
-import { useMemo } from 'react';
+import { useMemo, type Ref } from 'react';
 import {
   type ColorSchemeName,
   type ColorValue,
@@ -9,6 +9,8 @@ import {
   useColorScheme as useRNColorScheme,
 } from 'react-native';
 
+import { TextInputHostProvider, useTextInputHostRef } from '../../keyboard';
+import { useMergeRefs } from '../../utils/useMergeRefs';
 import { getMaterialColors, HostPaletteContext } from '../colors';
 import { type PrimitiveBaseProps } from '../layout';
 
@@ -65,6 +67,8 @@ export interface HostProps extends PrimitiveBaseProps {
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
   pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto';
+  /** @hidden */
+  ref?: Ref<any>;
 }
 
 type NativeHostProps = Omit<HostProps, 'colorScheme'> & {
@@ -72,6 +76,7 @@ type NativeHostProps = Omit<HostProps, 'colorScheme'> & {
   matchContentsHorizontal?: boolean;
   colorScheme?: ColorSchemeName;
   seedColor?: ColorValue;
+  ref?: Ref<any>;
 };
 
 const HostNativeView: React.ComponentType<NativeHostProps> = requireNativeView(
@@ -87,6 +92,7 @@ export function Host(props: HostProps) {
     layoutDirection,
     colorScheme,
     seedColor,
+    ref,
     ...restProps
   } = props;
   const schemeString = colorScheme === 'light' || colorScheme === 'dark' ? colorScheme : undefined;
@@ -97,25 +103,30 @@ export function Host(props: HostProps) {
     () => getMaterialColors({ scheme: resolvedScheme, seedColor }),
     [resolvedScheme, seedColor]
   );
+  const hostRef = useTextInputHostRef();
+  const mergedRef = useMergeRefs(ref, hostRef);
 
   return (
     <HostPaletteContext.Provider value={palette}>
-      <HostNativeView
-        {...restProps}
-        modifiers={modifiers}
-        matchContentsVertical={
-          typeof matchContents === 'object' ? matchContents.vertical : matchContents
-        }
-        matchContentsHorizontal={
-          typeof matchContents === 'object' ? matchContents.horizontal : matchContents
-        }
-        colorScheme={schemeString}
-        seedColor={seedColor}
-        onLayoutContent={onLayoutContent}
-        layoutDirection={
-          layoutDirection ?? (I18nManager.getConstants().isRTL ? 'rightToLeft' : 'leftToRight')
-        }
-      />
+      <TextInputHostProvider hostRef={hostRef}>
+        <HostNativeView
+          {...restProps}
+          modifiers={modifiers}
+          matchContentsVertical={
+            typeof matchContents === 'object' ? matchContents.vertical : matchContents
+          }
+          matchContentsHorizontal={
+            typeof matchContents === 'object' ? matchContents.horizontal : matchContents
+          }
+          colorScheme={schemeString}
+          seedColor={seedColor}
+          onLayoutContent={onLayoutContent}
+          layoutDirection={
+            layoutDirection ?? (I18nManager.getConstants().isRTL ? 'rightToLeft' : 'leftToRight')
+          }
+          ref={mergedRef}
+        />
+      </TextInputHostProvider>
     </HostPaletteContext.Provider>
   );
 }

package/src/jetpack-compose/ModalBottomSheet/index.tsx

@@ -2,6 +2,7 @@ import { requireNativeView } from 'expo';
 import type { Ref, ReactNode, ComponentType } from 'react';
 import type { ColorValue } from 'react-native';
 
+import { PresentedContent } from '../../PresentedContentContext';
 import { type ModifierConfig } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
@@ -138,7 +139,13 @@ function DragHandle(props: { children: ReactNode }) {
  * A Material Design modal bottom sheet.
  */
 function ModalBottomSheetComponent(props: ModalBottomSheetProps) {
-  return <ModalBottomSheetNativeView {...transformProps(props)} />;
+  const { children, ...rest } = props;
+  // The whole sheet, drag handle included, is presented in its own window, so all of it is marked.
+  return (
+    <ModalBottomSheetNativeView {...transformProps(rest as ModalBottomSheetProps)}>
+      <PresentedContent>{children}</PresentedContent>
+    </ModalBottomSheetNativeView>
+  );
 }
 
 ModalBottomSheetComponent.DragHandle = DragHandle;

package/src/jetpack-compose/Progress/index.tsx

@@ -128,9 +128,38 @@ export const CircularProgressIndicator = createProgressComponent<CircularProgres
 
 // endregion
 
+// region WavyProgressIndicators
+
+/**
+ * Wave configuration shared by the wavy progress indicator variants.
+ */
+export type WavyProgressCommonConfig = {
+  /**
+   * Height of the wave, where `0` draws a flat line and `1` draws the full wave height.
+   * When set, the amplitude stays the same across the whole track.
+   * When omitted, a determinate indicator uses the Material 3 default, which flattens the wave as
+   * progress approaches `0` and `1`.
+   * An indeterminate indicator defaults to the full wave height.
+   */
+  amplitude?: number;
+  /**
+   * Length of a single wave in dp. `CircularWavyProgressIndicator` rounds this to fit a whole
+   * number of waves around the ring, so the wave it draws can be slightly shorter or longer.
+   */
+  wavelength?: number;
+  /**
+   * Speed of the wave in dp per second. Defaults to `wavelength`, which advances the wave by one
+   * wavelength per second. Set it to `0` to stop the wave from moving.
+   */
+  waveSpeed?: number;
+};
+
+// endregion
+
 // region LinearWavyProgressIndicator
 
-export interface LinearWavyProgressIndicatorProps extends ProgressCommonConfig {
+export interface LinearWavyProgressIndicatorProps
+  extends ProgressCommonConfig, WavyProgressCommonConfig {
   /**
    * Size of the stop indicator in dp at the end of the determinate progress track.
    */
@@ -149,7 +178,8 @@ export const LinearWavyProgressIndicator =
 
 // region CircularWavyProgressIndicator
 
-export interface CircularWavyProgressIndicatorProps extends ProgressCommonConfig {}
+export interface CircularWavyProgressIndicatorProps
+  extends ProgressCommonConfig, WavyProgressCommonConfig {}
 
 /**
  * A circular progress indicator with wavy animation style.

package/src/jetpack-compose/RNHostView/index.tsx

@@ -1,7 +1,7 @@
 import { requireNativeView } from 'expo';
 import type { ReactElement, ComponentType } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
 
+import { PresentedContentContext, useIsPresentedInOwnWindow } from '../../PresentedContentContext';
 import type { ModifierConfig } from '../../types';
 import type { PrimitiveBaseProps } from '../layout';
 import { createViewModifierEventListener } from '../modifiers/utils';
@@ -22,11 +22,6 @@ export interface RNHostProps extends PrimitiveBaseProps {
    * Modifiers for the component.
    */
   modifiers?: ModifierConfig[];
-  /**
-   * Style applied to the host view's React Native shadow node. Useful for
-   * controlling its layout position (e.g. `position: 'absolute'`).
-   */
-  style?: StyleProp<ViewStyle>;
 }
 
 type NativeRNHostProps = RNHostProps & {
@@ -37,25 +32,33 @@ const NativeRNHostView: ComponentType<NativeRNHostProps> = requireNativeView(
   'RNHostView'
 );
 
-function transformProps(props: RNHostProps): NativeRNHostProps {
+function transformProps(props: RNHostProps, layoutRoot: boolean): NativeRNHostProps {
   const { modifiers, ...restProps } = props;
   return {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
-    // Touches on hosted content are dispatched relative to the host, so `measure()` must report
-    // the same coordinate space; otherwise `Pressable` cancels the press on any finger movement.
-    layoutRoot: true,
+    layoutRoot,
   };
 }
 
 export function RNHostView(props: RNHostProps) {
+  // Content presented in its own window — a modal bottom sheet, a dialog — has no React root above
+  // it, so it dispatches its own touches and is measured from itself. Everywhere else the surface
+  // root already streams this subtree's touches, and a second stream in a second coordinate space
+  // is what makes a `Pressable` drop its press on the first finger movement.
+  const layoutRoot = useIsPresentedInOwnWindow();
+
   return (
     <NativeRNHostView
-      {...transformProps(props)}
+      {...transformProps(props, 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>
+    </NativeRNHostView>
   );
 }

package/src/jetpack-compose/TextField/shared.ts

@@ -2,6 +2,7 @@ import type { ReactNode, Ref } from 'react';
 import type { ColorValue } from 'react-native';
 
 import { getStateId, type ObservableState, useWorkletProp, worklets } from '../../State';
+import { useHostedTextInput } from '../../keyboard';
 import type { ModifierConfig, ViewEvent } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
@@ -180,6 +181,7 @@ export type CommonTextFieldProperties = {
  * else on the props passes through untouched.
  */
 type TransformedKeys =
+  | 'ref'
   | 'value'
   | 'selection'
   | 'modifiers'
@@ -195,6 +197,7 @@ type TransformedKeys =
  * callbacks become `nativeEvent`-wrapped listeners.
  */
 export type CommonNativeTextFieldProps = {
+  ref?: Ref<any>;
   modifiers?: ModifierConfig[];
   children?: ReactNode;
   value?: number | null;
@@ -209,6 +212,7 @@ export function useCommonTextFieldProps<T extends CommonTextFieldProperties>(
   props: T
 ): CommonNativeTextFieldProps & Omit<T, TransformedKeys> {
   const {
+    ref,
     value,
     selection,
     modifiers,
@@ -222,9 +226,11 @@ export function useCommonTextFieldProps<T extends CommonTextFieldProperties>(
 
   const isWorklet = !!onValueChange && !!worklets?.isWorkletFunction?.(onValueChange);
   const workletCallback = useWorkletProp(isWorklet ? onValueChange : undefined, 'onValueChange');
+  const hosted = useHostedTextInput<TextFieldRef>(ref, onFocusChanged);
 
   return {
     ...rest,
+    ref: hosted.ref,
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     children,
@@ -233,7 +239,7 @@ export function useCommonTextFieldProps<T extends CommonTextFieldProperties>(
     onValueChangeSync: getStateId(workletCallback),
     onValueChange:
       !isWorklet && onValueChange ? (event) => onValueChange(event.nativeEvent.text) : undefined,
-    onFocusChanged: onFocusChanged ? (event) => onFocusChanged(event.nativeEvent.value) : undefined,
+    onFocusChanged: (event) => hosted.onFocusChange(event.nativeEvent.value),
     onSelectionChange: onSelectionChange
       ? (event) => onSelectionChange({ start: event.nativeEvent.start, end: event.nativeEvent.end })
       : undefined,

package/src/jetpack-compose/Tooltip/index.tsx

@@ -2,6 +2,7 @@ import { requireNativeView } from 'expo';
 import { type Ref } from 'react';
 import { type ColorValue } from 'react-native';
 
+import { PresentedContent } from '../../PresentedContentContext';
 import { type ModifierConfig } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
@@ -146,7 +147,7 @@ function RichTooltipComponent(props: RichTooltipProps) {
         modifiers={modifiers}
         {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
         {...restProps}>
-        {children}
+        <PresentedContent>{children}</PresentedContent>
       </RichTooltipNativeView>
     </SlotNativeView>
   );