@expo/ui 58.0.14 → 58.0.16

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

@@ -9,6 +9,7 @@ import {
   useColorScheme as useRNColorScheme,
 } from 'react-native';
 
+import { NativeTreeContext, useWarnIfNestedHost } from '../../NativeTreeContext';
 import { TextInputHostProvider, useTextInputHostRef } from '../../keyboard';
 import { useMergeRefs } from '../../utils/useMergeRefs';
 import { getMaterialColors, HostPaletteContext } from '../colors';
@@ -93,6 +94,7 @@ export function Host(props: HostProps) {
     colorScheme,
     seedColor,
     ref,
+    children,
     ...restProps
   } = props;
   const schemeString = colorScheme === 'light' || colorScheme === 'dark' ? colorScheme : undefined;
@@ -105,6 +107,7 @@ export function Host(props: HostProps) {
   );
   const hostRef = useTextInputHostRef();
   const mergedRef = useMergeRefs(ref, hostRef);
+  useWarnIfNestedHost('Jetpack Compose');
 
   return (
     <HostPaletteContext.Provider value={palette}>
@@ -124,8 +127,9 @@ export function Host(props: HostProps) {
           layoutDirection={
             layoutDirection ?? (I18nManager.getConstants().isRTL ? 'rightToLeft' : 'leftToRight')
           }
-          ref={mergedRef}
-        />
+          ref={mergedRef}>
+          <NativeTreeContext.Provider value>{children}</NativeTreeContext.Provider>
+        </HostNativeView>
       </TextInputHostProvider>
     </HostPaletteContext.Provider>
   );

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

@@ -2,6 +2,7 @@ import { requireNativeView } from 'expo';
 import type { ReactElement, ComponentType } from 'react';
 import type { LayoutChangeEvent } from 'react-native';
 
+import { NativeTreeContext } from '../../NativeTreeContext';
 import { PresentedContentContext, useIsPresentedInOwnWindow } from '../../PresentedContentContext';
 import type { ModifierConfig } from '../../types';
 import { resolveMatchContents } from '../../utils/matchContents';
@@ -80,7 +81,8 @@ export function RNHostView(props: RNHostProps) {
       key={`${nativeProps.matchContentsHorizontal}-${nativeProps.matchContentsVertical}`}>
       {/* 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}
+        {/* Hosted children are React Native views again, so a `Host` among them is not nested. */}
+        <NativeTreeContext.Provider value={false}>{props.children}</NativeTreeContext.Provider>
       </PresentedContentContext.Provider>
     </NativeRNHostView>
   );

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

@@ -102,6 +102,16 @@ export type PieChartStyle = {
    * Space between slices in points.
    */
   angularInset?: number;
+  /**
+   * Corner radius of each slice in points. On a donut, half the ring's thickness gives fully rounded ends.
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * Opacity of each slice, from 0 to 1.
+   * @default 0.8
+   */
+  opacity?: number;
 };
 
 /**

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

@@ -2,6 +2,7 @@ import { requireNativeView } from 'expo';
 import type { Ref } from 'react';
 import { I18nManager, type ColorValue, type StyleProp, type ViewStyle } from 'react-native';
 
+import { NativeTreeContext, useWarnIfNestedHost } from '../../NativeTreeContext';
 import { TextInputHostProvider, useTextInputHostRef } from '../../keyboard';
 import { useMergeRefs } from '../../utils/useMergeRefs';
 import { createViewModifierEventListener } from '../modifiers/utils';
@@ -81,10 +82,12 @@ export function Host(props: HostProps) {
     layoutDirection,
     seedColor,
     ref,
+    children,
     ...restProps
   } = props;
   const hostRef = useTextInputHostRef();
   const mergedRef = useMergeRefs(ref, hostRef);
+  useWarnIfNestedHost('SwiftUI');
 
   return (
     <TextInputHostProvider hostRef={hostRef}>
@@ -104,8 +107,9 @@ export function Host(props: HostProps) {
         ignoreSafeArea={ignoreSafeArea}
         seedColor={seedColor}
         {...restProps}
-        ref={mergedRef}
-      />
+        ref={mergedRef}>
+        <NativeTreeContext.Provider value>{children}</NativeTreeContext.Provider>
+      </HostNativeView>
     </TextInputHostProvider>
   );
 }

package/src/swift-ui/RNHostView.tsx

@@ -1,6 +1,7 @@
 import { requireNativeView } from 'expo';
 import type { LayoutChangeEvent } from 'react-native';
 
+import { NativeTreeContext } from '../NativeTreeContext';
 import { PresentedContentContext, useIsPresentedInOwnWindow } from '../PresentedContentContext';
 import { resolveMatchContents } from '../utils/matchContents';
 
@@ -45,7 +46,8 @@ export function RNHostView({ matchContents, ...props }: RNHostViewProps) {
       key={`${matchContentsHorizontal}-${matchContentsVertical}`}>
       {/* 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}
+        {/* Hosted children are React Native views again, so a `Host` among them is not nested. */}
+        <NativeTreeContext.Provider value={false}>{props.children}</NativeTreeContext.Provider>
       </PresentedContentContext.Provider>
     </RNHostNativeView>
   );

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

@@ -96,6 +96,7 @@ function ToolbarContent(props: ToolbarContentProps) {
  * ```
  *
  * @platform ios
+ * @platform tvos
  */
 export function ToolbarItem({
   placement = 'automatic',
@@ -125,6 +126,7 @@ export function ToolbarItem({
  * ```
  *
  * @platform ios
+ * @platform tvos
  */
 function ToolbarComponent(props: ToolbarProps) {
   const { modifiers, children, ...restProps } = props;

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

@@ -49,7 +49,7 @@ export type HingeChangeHandler = (oldContext: HingeContext, newContext: HingeCon
  * state for interactions and effects, not for layout.
  *
  * Pass a plain function to run it on the JS thread, or a callback from
- * [`useWorkletCallback`](../usenativestate/#useworkletcallback) to run it synchronously on the UI
+ * [`useWorkletCallback`](./usenativestate/#useworkletcallbackcallback) to run it synchronously on the UI
  * thread, which suits driving a native state value from the continuous `angle`.
  *
  * The first call happens when the view appears, and its old context has a `null` hinge. On devices

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

@@ -1999,6 +1999,7 @@ export * from './presentationModifiers';
 export * from './environment';
 export type { ShapeStyle } from './shapeStyle';
 export * from './scrollPosition';
+export * from './searchable';
 export * from './symbolEffect';
 export * from './scrollObservation';
 export * from './hingeObservation';

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

@@ -130,12 +130,28 @@ export const interactiveDismissDisabled = (isDisabled: boolean = true) =>
  */
 export type PresentationSizingType = 'automatic' | 'fitted' | 'form' | 'page';
 
+/**
+ * Options for the `presentationSizing` modifier.
+ */
+export type PresentationSizingOptions = {
+  /**
+   * The axes on which the sheet fits its content. An axis that is not set keeps the size from
+   * `sizing`. For example, `{ horizontal: false, vertical: true }` fits the height to the content
+   * and lets the system choose the width.
+   * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/presentationsizing/fitted(horizontal:vertical:)).
+   */
+  fitted?: { horizontal?: boolean; vertical?: boolean };
+};
+
 /**
  * Sets the sizing of a sheet presentation.
  * @param sizing - The sizing behavior to apply.
+ * @param options - Additional sizing options.
  * @platform ios 18.0+
  * @platform tvos 18.0+
  * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/presentationsizing(_:)).
  */
-export const presentationSizing = (sizing: PresentationSizingType) =>
-  createModifier('presentationSizing', { sizing });
+export const presentationSizing = (
+  sizing: PresentationSizingType,
+  options?: PresentationSizingOptions
+) => createModifier('presentationSizing', { sizing, ...options });

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

@@ -0,0 +1,107 @@
+import { getStateId, type ObservableState } from '../../State';
+import { createModifier, createModifierWithEventListener } from './createModifier';
+
+/**
+ * The placement of a search field in a view hierarchy.
+ *
+ * - `automatic`: SwiftUI places the search field automatically.
+ * - `toolbar`: The search field appears in the toolbar. Falls back to `automatic` on tvOS.
+ * - `sidebar`: The search field appears in the sidebar of a navigation view. Falls back to
+ *   `automatic` on tvOS.
+ * - `navigationBarDrawer`: The search field appears in the navigation bar. Falls back to
+ *   `automatic` on macOS and tvOS.
+ */
+export type SearchFieldPlacement = 'automatic' | 'toolbar' | 'sidebar' | 'navigationBarDrawer';
+
+/**
+ * Marks this view as searchable, which configures the display of a search field.
+ *
+ * @param text - The text to display and edit in the search field. An `ObservableState<string>`
+ *   created with `useNativeState`.
+ * @param options.placement - The preferred placement of the search field within the containing
+ *   view hierarchy. Defaults to `automatic`.
+ * @param options.prompt - The prompt of the search field, which provides users with guidance on
+ *   what to search for.
+ * @param options.onChange - Fires on the JS thread when the user edits or clears the search field.
+ *   It does not fire for values written from JavaScript.
+ *
+ * @platform ios
+ * @platform tvos
+ * @platform macos
+ *
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/searchable(text:placement:prompt:)-18a8f).
+ *
+ * @example
+ * ```tsx
+ * const query = useNativeState('');
+ *
+ * <Host>
+ *   <NavigationStack>
+ *     <List
+ *       modifiers={[
+ *         searchable(query, {
+ *           prompt: 'Search agents',
+ *           onChange: (text) => setFilter(text),
+ *         }),
+ *       ]}>
+ *       {rows.map((row) => (
+ *         <Text key={row.id}>{row.name}</Text>
+ *       ))}
+ *     </List>
+ *   </NavigationStack>
+ * </Host>
+ * ```
+ */
+export const searchable = (
+  text: ObservableState<string>,
+  options?: {
+    placement?: SearchFieldPlacement;
+    prompt?: string;
+    onChange?: (text: string) => void;
+  }
+) => {
+  const params = {
+    text: getStateId(text),
+    placement: options?.placement,
+    prompt: options?.prompt,
+  };
+  const onChange = options?.onChange;
+  if (onChange) {
+    return createModifierWithEventListener(
+      'searchable',
+      (event: { text?: string }) => onChange(event?.text ?? ''),
+      params
+    );
+  }
+  return createModifier('searchable', params);
+};
+
+/**
+ * The behavior of a search field in a toolbar.
+ *
+ * - `automatic`: The automatic behavior.
+ * - `minimize`: A search toolbar behavior that prefers rendering a search field as a button-like
+ *   control. Falls back to `automatic` on macOS and tvOS.
+ */
+export type SearchToolbarBehavior = 'automatic' | 'minimize';
+
+/**
+ * Configures the behavior for search in the toolbar.
+ *
+ * On iOS below 26.0, the modifier is a no-op.
+ *
+ * @param behavior - The search field behavior.
+ *
+ * @platform ios 26.0+
+ * @platform tvos 26.0+
+ * @platform macos 26.0+
+ *
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/searchtoolbarbehavior(_:)).
+ *
+ * @example
+ * ```tsx
+ * <List modifiers={[searchable(query), searchToolbarBehavior('minimize')]}>
+ * ```
+ */
+export const searchToolbarBehavior = (behavior: SearchToolbarBehavior) =>
+  createModifier('searchToolbarBehavior', { behavior });

package/src/types.ts

@@ -50,3 +50,31 @@ export type DialogProperties = {
    */
   decorFitsSystemWindows?: boolean;
 };
+
+/**
+ * Properties for the popup window, matching `PopupProperties` in Compose.
+ */
+export type PopupProperties = {
+  /**
+   * Whether the popup is focusable. When `true`, the popup receives IME events and key presses,
+   * such as the back button.
+   * @default true
+   */
+  focusable?: boolean;
+  /**
+   * Whether the popup can be dismissed by pressing the back button. Has no effect when `focusable` is `false`.
+   * @default true
+   */
+  dismissOnBackPress?: boolean;
+  /**
+   * Whether the popup can be dismissed by clicking outside of its bounds.
+   * @default true
+   */
+  dismissOnClickOutside?: boolean;
+  /**
+   * Whether the popup window is clipped to the screen boundaries. Set to `false` to let it extend
+   * beyond them, which positions the popup accurately.
+   * @default true
+   */
+  clippingEnabled?: boolean;
+};

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

@@ -7,6 +7,7 @@ import {
 } from '@expo/ui/jetpack-compose/modifiers';
 import { useEffect, useRef, useState } from 'react';
 
+import { useIsInsideNativeTree } from '../../NativeTreeContext';
 import type { BottomSheetProps, SnapPoint } from './types';
 import { resolveContentPadding } from './utils';
 
@@ -46,6 +47,7 @@ export function BottomSheet({
   containerColor,
   contentColor,
 }: BottomSheetProps) {
+  const isInsideHost = useIsInsideNativeTree();
   const sheetRef = useRef<ModalBottomSheetRef>(null);
   const [mount, setMount] = useState(isPresented);
 
@@ -79,20 +81,29 @@ export function BottomSheet({
   if (shouldFillMaxHeight(snapPoints)) contentModifiers.push(fillMaxHeight());
   if (testID) contentModifiers.push(testIDModifier(testID));
 
+  const sheet = (
+    <ModalBottomSheet
+      ref={sheetRef}
+      onDismissRequest={onDismiss}
+      showDragHandle={showDragIndicator}
+      skipPartiallyExpanded={shouldSkipPartiallyExpanded(snapPoints)}
+      properties={{ shouldDismissOnBackPress, shouldDismissOnClickOutside }}
+      scrimColor={scrimColor}
+      containerColor={containerColor}
+      contentColor={contentColor}
+      modifiers={modifiers}>
+      <Column modifiers={contentModifiers}>{children}</Column>
+    </ModalBottomSheet>
+  );
+
+  // Already inside a `Host`, for example nested in another sheet's content: a `Host` of its own
+  // would be a `Host` directly inside Compose.
+  if (isInsideHost) {
+    return sheet;
+  }
   return (
     <Host style={{ position: 'absolute' }} pointerEvents="none">
-      <ModalBottomSheet
-        ref={sheetRef}
-        onDismissRequest={onDismiss}
-        showDragHandle={showDragIndicator}
-        skipPartiallyExpanded={shouldSkipPartiallyExpanded(snapPoints)}
-        properties={{ shouldDismissOnBackPress, shouldDismissOnClickOutside }}
-        scrimColor={scrimColor}
-        containerColor={containerColor}
-        contentColor={contentColor}
-        modifiers={modifiers}>
-        <Column modifiers={contentModifiers}>{children}</Column>
-      </ModalBottomSheet>
+      {sheet}
     </Host>
   );
 }

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

@@ -9,6 +9,7 @@ import {
   type PresentationDetent,
 } from '@expo/ui/swift-ui/modifiers';
 
+import { useIsInsideNativeTree } from '../../NativeTreeContext';
 import type { BottomSheetProps, SnapPoint } from './types';
 import { resolveContentPadding } from './utils';
 
@@ -29,6 +30,7 @@ export function BottomSheet({
   contentPadding,
   containerColor,
 }: BottomSheetProps) {
+  const isInsideHost = useIsInsideNativeTree();
   const { top, bottom, left, right } = resolveContentPadding(contentPadding, {
     top: 16,
     bottom: 0,
@@ -50,17 +52,26 @@ export function BottomSheet({
     presentationModifiers.push(...modifiers);
   }
 
+  const sheet = (
+    <SwiftUIBottomSheet
+      isPresented={isPresented}
+      onIsPresentedChange={(presented) => {
+        if (!presented) onDismiss();
+      }}
+      fitToContents={!snapPoints || snapPoints.length === 0}
+      testID={testID}>
+      <Group modifiers={presentationModifiers}>{children}</Group>
+    </SwiftUIBottomSheet>
+  );
+
+  // Already inside a `Host`, for example nested in another sheet's content: a `Host` of its own
+  // would be a `Host` directly inside SwiftUI.
+  if (isInsideHost) {
+    return sheet;
+  }
   return (
     <Host style={{ position: 'absolute' }} pointerEvents="none">
-      <SwiftUIBottomSheet
-        isPresented={isPresented}
-        onIsPresentedChange={(presented) => {
-          if (!presented) onDismiss();
-        }}
-        fitToContents={!snapPoints || snapPoints.length === 0}
-        testID={testID}>
-        <Group modifiers={presentationModifiers}>{children}</Group>
-      </SwiftUIBottomSheet>
+      {sheet}
     </Host>
   );
 }

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

@@ -1 +0,0 @@
-041ed0d6d536bbcf8d08e7a653bea8ef

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

@@ -1 +0,0 @@
-e587fcde7f1c58c339f95759565034f989a49dcf

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

@@ -1 +0,0 @@
-eee15e7c9f3aeb7b3941ead7ce0e72d8174b0b95964c69ef5a1d5fbf02536fbe

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

@@ -1 +0,0 @@
-3e6c99d1b6aa74d01d30339d222653a631dae2abf99075e4c25fc171fbb33f9d55bca7daee4d1cd4c6ecdcdc89fb71067de948ac4a91135b6ce38cbb337c52d1

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

@@ -1 +0,0 @@
-26e374a25a5054c68e67a99ea46b3858

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

@@ -1 +0,0 @@
-1409db74c61bae87d4830fa0652a822c1ba21d80

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

@@ -1 +0,0 @@
-dc0a8e5a28e1f4f7d722e8706b5858844aa6eac089e89e5f8099374b309bed60

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

@@ -1 +0,0 @@
-ef66aaa30d2d2703c4ff5c36c117ffaf8dd41a2d2a9a8a286224b817f77d20ae2298cd6e0959e1a78ccc3c741cbc286db2e8d5a086b4ed9e11acc6a206207d68

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

@@ -1 +0,0 @@
-8620eb4f3a0034ee25df426d15a2132c

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

@@ -1 +0,0 @@
-bac0bb14d7f8206e4f6fea13dab4cf103839b7f6

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

@@ -1 +0,0 @@
-9211bc6ae1cb6ca9bae211e99fdfecb0870b0e5dfc1bf31d50552e794cc02abf

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

@@ -1 +0,0 @@
-250717c1fdfaad128b302fc4d7ce975d8cb26444b84ebb91de16d911d91cef07f40632026edc6fe3653c5ebbb621a90e35c1749b301b9e70961f72428265ae4e

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

@@ -1 +0,0 @@
-5830eabc528b387a16b2c11fa647cccf

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

@@ -1 +0,0 @@
-2aa19c59ef78a58437075381e54f80196277f198

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

@@ -1 +0,0 @@
-190fae0bf2c5e0e704aff6203b831db1bb670bb9d12db1d93e2c382a1aaca0a6

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

@@ -1 +0,0 @@
-b1e6707e0766bbcc90144b50abbb05f9dc5bd5c29bda43a4ba32924d7c930425a8c173d500f1ac3d9b1a3d3ad8fb4667fd848ec1ab58bc9ed4d26bbbb7ca7ee7