@expo/ui 56.0.16 → 56.0.17

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

@@ -1 +1 @@
-06d44b3caa511e0c357fa5a4b97c3867
+60c5694e01fc3b8dcd52745fd34646eb

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

@@ -1 +1 @@
-6b09b188d3943a03a462cc08d80212d62490d2b9
+86afe3595463910ac648dbece60ea85603f093da

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

@@ -1 +1 @@
-680aeda3449ab8b21e06cec91465124d63053367f1be0fa5c6b005526a0eccf4
+e33fc63e4f06dfa13f99ce5b5ceafeaf1d4045473ecbbe42799c66be3c5a1bc7

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

@@ -1 +1 @@
-3a7cfc9313dacce167a1c0e9ff4519e357d5043205c6c16e47365cf5c5db3ea7b5660c5981e619f5e3d3f2079768975ba35d8eea6adb0d2bd9afd9543a4787d0
+8a94e8065a8cf5abcbc83a6d2ce2d927133a4670a8313b921b7369f6793cede644c762fefc3807c9bc2d7bfdf15aeccc183cb4c9b383094576455cbe6d8e0fa6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expo/ui",
-  "version": "56.0.16",
+  "version": "56.0.17",
   "description": "A collection of UI components",
   "sideEffects": [
     "*.fx.js"
@@ -95,7 +95,7 @@
     "@types/react": "~19.2.0",
     "react-native-reanimated": "4.3.1",
     "react-native-worklets": "0.8.3",
-    "expo": "56.0.9",
+    "expo": "56.0.10",
     "expo-module-scripts": "56.0.3"
   },
   "jest": {
@@ -124,7 +124,7 @@
       "optional": true
     }
   },
-  "gitHead": "175f1e78e3444ca99ddea473faea6777a0656668",
+  "gitHead": "b1e94a5c1c5b19472a42ca25752a3533699bc46a",
   "scripts": {
     "build": "expo-module build",
     "clean": "expo-module clean",

package/src/State/index.fx.ts

@@ -41,7 +41,8 @@ function registerSharedObjectSerializer(): void {
     unpack: (packed) => {
       'worklet';
       const obj = (globalThis as any).expo.SharedObject.__resolveInWorklet(packed.objectId);
-      // Define .value property if the object has getValue/setValue (e.g. ObservableState)
+      // Define .value plus the get/set accessors if the object has
+      // getValue/setValue (e.g. ObservableState)
       if (typeof obj.getValue === 'function' && typeof obj.setValue === 'function') {
         Object.defineProperty(obj, 'value', {
           get() {
@@ -51,6 +52,8 @@ function registerSharedObjectSerializer(): void {
             obj.setValue({ value: v });
           },
         });
+        obj.get = () => obj.getValue();
+        obj.set = (v: any) => obj.setValue({ value: v });
       }
       return obj;
     },

package/src/State/useNativeState.ts

@@ -20,6 +20,16 @@ export type ObservableState<T> = SharedObject & {
    */
   value: T;
 
+  /**
+   * Reads the current value. A React Compiler compliant alternative to reading `.value`
+   */
+  get(): T;
+
+  /**
+   * Writes a new value. A React Compiler-compliant alternative to assigning `.value`
+   */
+  set(value: T): void;
+
   /**
    * A single listener invoked on the native UI runtime whenever the value changes
    * (after iOS `didSet` and Android's setter). Assigning replaces the previous
@@ -38,9 +48,6 @@ export type ObservableState<T> = SharedObject & {
    *     'worklet';
    *     console.log('changed to', value);
    *   };
-   *   return () => {
-   *     state.onChange = null;
-   *   };
    * }, []);
    * ```
    */
@@ -65,10 +72,13 @@ type NativeObservableState = {
   getValue(): unknown;
   setValue(v: { value: unknown }): void;
   setOnChange(callback: object | null): void;
+  get?: () => unknown;
+  set?: (value: unknown) => void;
 };
 
 /**
- * Adds a `value` property that delegates to the native `getValue`/`setValue` functions.
+ * Adds a `value` property plus `get`/`set` methods that delegate to the native
+ * `getValue`/`setValue` functions.
  */
 function defineValueProperty(state: NativeObservableState): void {
   Object.defineProperty(state, 'value', {
@@ -79,6 +89,8 @@ function defineValueProperty(state: NativeObservableState): void {
       state.setValue({ value: v });
     },
   });
+  state.get = () => state.getValue();
+  state.set = (v: unknown) => state.setValue({ value: v });
 }
 
 /**
@@ -96,7 +108,14 @@ function defineOnChangeProperty(state: NativeObservableState): void {
     set(fn: ((value: unknown) => void) | null | undefined) {
       if (!fn) {
         currentFn = null;
-        state.setOnChange(null);
+        try {
+          state.setOnChange(null);
+        } catch {
+          // On unmount the shared object is often released before this cleanup
+          // runs (useReleasingSharedObject releases it earlier in the component),
+          // so setOnChange throws "already released". Clearing a listener on a
+          // gone object is a no-op, so ignore it rather than crash teardown.
+        }
         return;
       }
       if (!worklets) {

package/src/community/datetime-picker/DateTimePicker.tsx

@@ -87,7 +87,7 @@ export function DateTimePicker(props: DateTimePickerProps) {
   };
 
   return (
-    <Host matchContents={{ vertical: true }} style={style}>
+    <Host matchContents={{ vertical: true }} style={style} ignoreSafeArea="all">
       <DatePicker {...iosProps} />
     </Host>
   );

package/src/community/menu/MenuView.ios.tsx

@@ -135,7 +135,7 @@ export function MenuView(props: MenuComponentProps & { ref?: React.Ref<MenuCompo
   );
 
   return (
-    <Host matchContents style={style} testID={testID}>
+    <Host matchContents style={style} testID={testID} ignoreSafeArea="all">
       {shouldOpenOnLongPress ? (
         <ContextMenu>
           <ContextMenu.Trigger>{trigger}</ContextMenu.Trigger>

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

@@ -8,7 +8,7 @@ import {
   useState,
   type ReactElement,
 } from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import { wrapNativeEvent, type PagerViewProps } from './types';
 import { worklets } from '../../State';
@@ -43,6 +43,13 @@ export function PagerView(props: PagerViewProps) {
     setScrollEnabledState(scrollEnabled);
   }, [scrollEnabled]);
 
+  // All pages share the same (0,0) origin in RN's layout — Compose, not Yoga,
+  // applies the per-page offset — so off-screen pages overlap the visible one in
+  // RN's coordinate space and can steal its touches (#46386). Track the settled
+  // page and make only it interactive; non-settled pages are `pointerEvents`
+  // "none" so hit-testing resolves taps to the page actually on screen.
+  const [settledPage, setSettledPage] = useState(initialPage);
+
   // Synthesize pager-view's `idle | dragging | settling` from Compose's raw
   // signals: `isScrollInProgress` (drag or snap-animation in flight) plus
   // drag interactions (start/stop/cancel).
@@ -73,7 +80,9 @@ export function PagerView(props: PagerViewProps) {
     .filter((child): child is ReactElement => isValidElement(child))
     .map((child, index) => (
       <RNHostView key={child.key ?? String(index)} modifiers={[fillMaxSize()]}>
-        {child}
+        <View style={styles.page} pointerEvents={index === settledPage ? 'auto' : 'none'}>
+          {child}
+        </View>
       </RNHostView>
     ));
 
@@ -101,6 +110,7 @@ export function PagerView(props: PagerViewProps) {
         beyondViewportPageCount={offscreenPageLimit}
         modifiers={pagerModifiers}
         onSettledPageChange={(page) => {
+          setSettledPage(page);
           onPageSelected?.(wrapNativeEvent({ position: page }));
         }}
         onPageScroll={pageScrollHandler}
@@ -222,3 +232,7 @@ function warnAboutStringBorderRadiusOnce(key: string, value: string): void {
       `Use a numeric pixel value, or omit the style key.`
   );
 }
+
+const styles = StyleSheet.create({
+  page: { flex: 1 },
+});

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

@@ -213,7 +213,7 @@ export function PagerView(props: PagerViewProps) {
   ];
 
   return (
-    <Host style={style ?? { flex: 1 }} {...passthrough}>
+    <Host style={style ?? { flex: 1 }} ignoreSafeArea="all" {...passthrough}>
       <ScrollView axes="horizontal" showsIndicators={false} modifiers={modifiers}>
         <LazyHStack spacing={0} modifiers={[scrollTargetLayout()]}>
           {pages}

package/src/community/picker/Picker.ios.tsx

@@ -41,7 +41,7 @@ export function Picker<T extends PickerItemValue>(props: PickerProps<T>) {
   }));
 
   return (
-    <Host matchContents={{ vertical: true }} style={style}>
+    <Host matchContents={{ vertical: true }} style={style} ignoreSafeArea="all">
       <SwiftUIPicker
         modifiers={modifiers}
         selection={selectedValue}

package/src/community/slider/Slider.ios.tsx

@@ -32,7 +32,7 @@ export function Slider(props: SliderProps) {
     modifiers.push(tintModifier(minimumTrackTintColor as string));
   }
   return (
-    <Host matchContents={{ vertical: true }} style={hostStyle}>
+    <Host matchContents={{ vertical: true }} style={hostStyle} ignoreSafeArea="all">
       <SwiftUISlider
         value={value}
         min={minimumValue}

package/src/jetpack-compose/TextField/BasicTextField.tsx

@@ -0,0 +1,118 @@
+import { requireNativeView } from 'expo';
+import type { ColorValue } from 'react-native';
+
+import {
+  type CommonNativeTextFieldProps,
+  type CommonTextFieldProperties,
+  type TextFieldRef,
+  useCommonTextFieldProps,
+} from './shared';
+import { Slot } from '../SlotView';
+
+// region Types
+
+/**
+ * Imperative methods for `BasicTextField`. Identical to {@link TextFieldRef}.
+ */
+export type BasicTextFieldRef = TextFieldRef;
+
+/**
+ * Props for `BasicTextField`. Mirrors Compose's `BasicTextField`: a bare,
+ * unstyled text field with no Material chrome (no container, indicator, or
+ * built-in padding). Shares {@link CommonTextFieldProperties} with `TextField` and
+ * `OutlinedTextField`; use `BasicTextField.DecorationBox` to add your own
+ * decoration.
+ */
+export type BasicTextFieldProps = CommonTextFieldProperties & {
+  /**
+   * Color of the text cursor. Maps to Compose's `cursorBrush` via
+   * `SolidColor(color)`. Defaults to the theme's primary color
+   * (`MaterialTheme.colorScheme.primary`) so it stays visible in light and dark.
+   */
+  cursorColor?: ColorValue;
+};
+
+// endregion Types
+
+// region Native
+
+type NativeBasicTextFieldProps = Omit<
+  BasicTextFieldProps,
+  | 'value'
+  | 'selection'
+  | 'onValueChange'
+  | 'onFocusChanged'
+  | 'onSelectionChange'
+  | 'keyboardActions'
+  | 'children'
+> &
+  CommonNativeTextFieldProps;
+
+const BasicTextFieldNativeView: React.ComponentType<NativeBasicTextFieldProps> = requireNativeView(
+  'ExpoUI',
+  'BasicTextFieldView'
+);
+
+const InnerTextFieldNativeView: React.ComponentType<object> = requireNativeView(
+  'ExpoUI',
+  'InnerTextFieldView'
+);
+
+const PlaceholderNativeView: React.ComponentType<{ children?: React.ReactNode }> =
+  requireNativeView('ExpoUI', 'PlaceholderView');
+
+function useTransformedProps(props: BasicTextFieldProps): NativeBasicTextFieldProps {
+  return useCommonTextFieldProps(props);
+}
+
+// endregion Native
+
+// region Slot components
+
+/**
+ * Wraps the editable text with custom decoration. Maps to Compose's
+ * `decorationBox`. Place {@link InnerTextField} inside it where the text
+ * should render.
+ */
+function DecorationBox(props: { children: React.ReactNode }) {
+  return <Slot slotName="decorationBox">{props.children}</Slot>;
+}
+
+/**
+ * The editable text itself, placed wherever you want it inside
+ * {@link DecorationBox}. Maps to the `innerTextField` lambda Compose passes to
+ * `decorationBox`.
+ */
+function InnerTextField() {
+  return <InnerTextFieldNativeView />;
+}
+
+/**
+ * A placeholder shown only while the field is empty. Place it inside
+ * {@link DecorationBox}, typically overlaying {@link InnerTextField}. Its
+ * visibility is toggled natively from the field's text, so it stays correct for
+ * every change — typing, `clear()`, `setText`, and writes to the `value`
+ * observable — without a JS round-trip.
+ */
+function Placeholder(props: { children: React.ReactNode }) {
+  return <PlaceholderNativeView>{props.children}</PlaceholderNativeView>;
+}
+
+// endregion Slot components
+
+// region Component
+
+/**
+ * A bare, unstyled Compose `BasicTextField` with no Material decoration.
+ */
+function BasicTextFieldComponent(props: BasicTextFieldProps) {
+  return <BasicTextFieldNativeView {...useTransformedProps(props)} />;
+}
+
+BasicTextFieldComponent.DecorationBox = DecorationBox;
+BasicTextFieldComponent.InnerTextField = InnerTextField;
+BasicTextFieldComponent.Placeholder = Placeholder;
+
+// endregion Component
+
+export { BasicTextFieldComponent as BasicTextField };

package/src/jetpack-compose/TextField/TextField.tsx

@@ -0,0 +1,198 @@
+import { requireNativeView } from 'expo';
+import type { ColorValue } from 'react-native';
+
+import {
+  type CommonNativeTextFieldProps,
+  type CommonTextFieldProperties,
+  useCommonTextFieldProps,
+} from './shared';
+import { type ObservableState } from '../../State';
+import { parseJSXShape, type ShapeJSXElement, type ShapeRecordProps } from '../Shape';
+import { Slot } from '../SlotView';
+
+// region Types
+
+/**
+ * Colors for `TextField` and `OutlinedTextField`.
+ * Maps to `TextFieldColors` in Compose, shared by both variants.
+ */
+export type TextFieldColors = {
+  focusedTextColor?: ColorValue;
+  unfocusedTextColor?: ColorValue;
+  disabledTextColor?: ColorValue;
+  errorTextColor?: ColorValue;
+  focusedContainerColor?: ColorValue;
+  unfocusedContainerColor?: ColorValue;
+  disabledContainerColor?: ColorValue;
+  errorContainerColor?: ColorValue;
+  cursorColor?: ColorValue;
+  errorCursorColor?: ColorValue;
+  focusedIndicatorColor?: ColorValue;
+  unfocusedIndicatorColor?: ColorValue;
+  disabledIndicatorColor?: ColorValue;
+  errorIndicatorColor?: ColorValue;
+  focusedLeadingIconColor?: ColorValue;
+  unfocusedLeadingIconColor?: ColorValue;
+  disabledLeadingIconColor?: ColorValue;
+  errorLeadingIconColor?: ColorValue;
+  focusedTrailingIconColor?: ColorValue;
+  unfocusedTrailingIconColor?: ColorValue;
+  disabledTrailingIconColor?: ColorValue;
+  errorTrailingIconColor?: ColorValue;
+  focusedLabelColor?: ColorValue;
+  unfocusedLabelColor?: ColorValue;
+  disabledLabelColor?: ColorValue;
+  errorLabelColor?: ColorValue;
+  focusedPlaceholderColor?: ColorValue;
+  unfocusedPlaceholderColor?: ColorValue;
+  disabledPlaceholderColor?: ColorValue;
+  errorPlaceholderColor?: ColorValue;
+  focusedSupportingTextColor?: ColorValue;
+  unfocusedSupportingTextColor?: ColorValue;
+  disabledSupportingTextColor?: ColorValue;
+  errorSupportingTextColor?: ColorValue;
+  focusedPrefixColor?: ColorValue;
+  unfocusedPrefixColor?: ColorValue;
+  disabledPrefixColor?: ColorValue;
+  errorPrefixColor?: ColorValue;
+  focusedSuffixColor?: ColorValue;
+  unfocusedSuffixColor?: ColorValue;
+  disabledSuffixColor?: ColorValue;
+  errorSuffixColor?: ColorValue;
+};
+
+// Material props inlined per variant (not a shared named base) so docs render them directly.
+export type TextFieldProps = CommonTextFieldProperties & {
+  /** @default false */
+  isError?: boolean;
+  /**
+   * Shape used for the field's container outline/fill. Use the helpers from
+   * `Shape` (for example, `<Shape.Pill />` or `<Shape.RoundedCorner cornerRadii={...} />`).
+   * Defaults to the Material `OutlinedTextFieldDefaults.shape`/`TextFieldDefaults.shape`.
+   */
+  shape?: ShapeJSXElement;
+  colors?: TextFieldColors;
+};
+
+export type OutlinedTextFieldProps = CommonTextFieldProperties & {
+  /** @default false */
+  isError?: boolean;
+  /**
+   * Shape used for the field's container outline/fill. Use the helpers from
+   * `Shape` (for example, `<Shape.Pill />` or `<Shape.RoundedCorner cornerRadii={...} />`).
+   * Defaults to the Material `OutlinedTextFieldDefaults.shape`/`TextFieldDefaults.shape`.
+   */
+  shape?: ShapeJSXElement;
+  colors?: TextFieldColors;
+};
+
+// endregion Types
+
+// region Native
+
+type NativeTextFieldProps = Omit<
+  TextFieldProps,
+  | 'value'
+  | 'selection'
+  | 'onValueChange'
+  | 'onFocusChanged'
+  | 'onSelectionChange'
+  | 'keyboardActions'
+  | 'children'
+  | 'shape'
+> &
+  CommonNativeTextFieldProps & {
+    variant: 'filled' | 'outlined';
+    colors?: TextFieldColors;
+    shape?: ShapeRecordProps;
+  };
+
+const TextFieldNativeView: React.ComponentType<NativeTextFieldProps> = requireNativeView(
+  'ExpoUI',
+  'TextFieldView'
+);
+
+function useTransformedProps(
+  props: TextFieldProps | OutlinedTextFieldProps,
+  variant: 'filled' | 'outlined'
+): NativeTextFieldProps {
+  const { shape, ...rest } = props;
+  return {
+    ...useCommonTextFieldProps(rest),
+    variant,
+    shape: parseJSXShape(shape),
+  };
+}
+
+// endregion Native
+
+// region Slot components
+
+function Label(props: { children: React.ReactNode }) {
+  return <Slot slotName="label">{props.children}</Slot>;
+}
+
+function Placeholder(props: { children: React.ReactNode }) {
+  return <Slot slotName="placeholder">{props.children}</Slot>;
+}
+
+function LeadingIcon(props: { children: React.ReactNode }) {
+  return <Slot slotName="leadingIcon">{props.children}</Slot>;
+}
+
+function TrailingIcon(props: { children: React.ReactNode }) {
+  return <Slot slotName="trailingIcon">{props.children}</Slot>;
+}
+
+function Prefix(props: { children: React.ReactNode }) {
+  return <Slot slotName="prefix">{props.children}</Slot>;
+}
+
+function Suffix(props: { children: React.ReactNode }) {
+  return <Slot slotName="suffix">{props.children}</Slot>;
+}
+
+function SupportingText(props: { children: React.ReactNode }) {
+  return <Slot slotName="supportingText">{props.children}</Slot>;
+}
+
+// endregion Slot components
+
+// region Components
+
+/**
+ * A Material3 `TextField`.
+ */
+function TextFieldComponent(props: TextFieldProps) {
+  return <TextFieldNativeView {...useTransformedProps(props, 'filled')} />;
+}
+
+TextFieldComponent.Label = Label;
+TextFieldComponent.Placeholder = Placeholder;
+TextFieldComponent.LeadingIcon = LeadingIcon;
+TextFieldComponent.TrailingIcon = TrailingIcon;
+TextFieldComponent.Prefix = Prefix;
+TextFieldComponent.Suffix = Suffix;
+TextFieldComponent.SupportingText = SupportingText;
+
+/**
+ * A Material3 `OutlinedTextField` with a transparent background and border outline.
+ */
+function OutlinedTextFieldComponent(props: OutlinedTextFieldProps) {
+  return <TextFieldNativeView {...useTransformedProps(props, 'outlined')} />;
+}
+
+OutlinedTextFieldComponent.Label = Label;
+OutlinedTextFieldComponent.Placeholder = Placeholder;
+OutlinedTextFieldComponent.LeadingIcon = LeadingIcon;
+OutlinedTextFieldComponent.TrailingIcon = TrailingIcon;
+OutlinedTextFieldComponent.Prefix = Prefix;
+OutlinedTextFieldComponent.Suffix = Suffix;
+OutlinedTextFieldComponent.SupportingText = SupportingText;
+
+// endregion Components
+
+export { TextFieldComponent as TextField, OutlinedTextFieldComponent as OutlinedTextField };
+
+// Exported for docs api data
+export { type ObservableState };

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

@@ -0,0 +1,19 @@
+export {
+  TextField,
+  OutlinedTextField,
+  type TextFieldColors,
+  type TextFieldProps,
+  type OutlinedTextFieldProps,
+  type ObservableState,
+} from './TextField';
+export { BasicTextField, type BasicTextFieldProps, type BasicTextFieldRef } from './BasicTextField';
+export type {
+  TextFieldRef,
+  TextFieldCapitalization,
+  TextFieldImeAction,
+  TextFieldKeyboardType,
+  TextFieldKeyboardOptions,
+  TextFieldKeyboardActions,
+  TextFieldTextStyle,
+  CommonTextFieldProperties,
+} from './shared';