@expo/ui 56.0.7 → 56.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expo/ui",
-  "version": "56.0.7",
+  "version": "56.0.8",
   "description": "A collection of UI components",
   "sideEffects": [
     "*.fx.js"
@@ -51,6 +51,10 @@
       "types": "./build/community/masked-view/index.d.ts",
       "default": "./src/community/masked-view/index.tsx"
     },
+    "./community/menu": {
+      "types": "./build/community/menu/index.d.ts",
+      "default": "./src/community/menu/index.tsx"
+    },
     "./babel-plugin": {
       "types": "./plugin/babel-plugin.d.ts",
       "default": "./plugin/babel-plugin.js"
@@ -87,7 +91,7 @@
     "@types/react": "~19.2.0",
     "react-native-reanimated": "4.3.1",
     "react-native-worklets": "0.8.3",
-    "expo": "56.0.0-preview.11",
+    "expo": "56.0.0-preview.12",
     "expo-module-scripts": "56.0.2"
   },
   "jest": {
@@ -116,7 +120,7 @@
       "optional": true
     }
   },
-  "gitHead": "51c27fce31a5b3a877a4b05d832dabf4a99db5e1",
+  "gitHead": "f26be3dd9396bf7c399a1d607865d0fabdbc0d64",
   "scripts": {
     "build": "expo-module build",
     "clean": "expo-module clean",

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

@@ -0,0 +1,224 @@
+import * as React from 'react';
+import { Pressable, View } from 'react-native';
+
+import type { MenuAction, MenuComponentProps, MenuComponentRef, NativeActionEvent } from './types';
+import { HorizontalDivider } from '../../jetpack-compose/Divider';
+import { DropdownMenu } from '../../jetpack-compose/DropdownMenu';
+import {
+  DropdownMenuItem,
+  type DropdownMenuItemElementColors,
+} from '../../jetpack-compose/DropdownMenu/DropdownMenuItem';
+import { Host } from '../../jetpack-compose/Host';
+import { Icon } from '../../jetpack-compose/Icon';
+import { RNHostView } from '../../jetpack-compose/RNHostView';
+import { Text as ComposeText } from '../../jetpack-compose/Text';
+import { useMaterialColors } from '../../jetpack-compose/colors';
+
+function actionId(action: MenuAction): string {
+  return action.id ?? action.title;
+}
+
+function makeEvent(action: MenuAction): NativeActionEvent {
+  return { nativeEvent: { event: actionId(action) } };
+}
+
+function buildElementColors(
+  action: MenuAction,
+  destructiveColor: string
+): DropdownMenuItemElementColors | undefined {
+  const isDestructive = action.attributes?.destructive === true;
+  const textColor = action.titleColor ?? (isDestructive ? destructiveColor : undefined);
+  // The leading icon picks up `leadingIconColor` via `LocalContentColor`, but only
+  // when the `Icon` itself doesn't set `tint` — so an explicit `imageColor` from
+  // the caller still wins.
+  const leadingIconColor = isDestructive ? destructiveColor : undefined;
+  if (textColor == null && leadingIconColor == null) {
+    return undefined;
+  }
+  return {
+    textColor,
+    disabledTextColor: textColor,
+    leadingIconColor,
+    disabledLeadingIconColor: leadingIconColor,
+  };
+}
+
+type ItemProps = {
+  action: MenuAction;
+  onPressAction: MenuComponentProps['onPressAction'];
+  dismissAll: () => void;
+  destructiveColor: string;
+};
+
+function MenuActionItem({ action, onPressAction, dismissAll, destructiveColor }: ItemProps) {
+  const [submenuExpanded, setSubmenuExpanded] = React.useState(false);
+
+  if (action.attributes?.hidden) {
+    return null;
+  }
+
+  const { subactions, displayInline, state, attributes, title, image, imageColor } = action;
+  // `image` is non-string only when caller passes an ImageSourcePropType
+  // (number from `require()` or `{ uri }`). The string form is iOS-only (SF Symbol).
+  const leadingIconSource = typeof image === 'string' || image == null ? null : image;
+  const elementColors = buildElementColors(action, destructiveColor);
+
+  if (subactions && subactions.length > 0) {
+    if (displayInline) {
+      return (
+        <>
+          <HorizontalDivider />
+          {subactions.map((sub) => (
+            <MenuActionItem
+              key={actionId(sub)}
+              action={sub}
+              onPressAction={onPressAction}
+              dismissAll={dismissAll}
+              destructiveColor={destructiveColor}
+            />
+          ))}
+          <HorizontalDivider />
+        </>
+      );
+    }
+    return (
+      <DropdownMenu expanded={submenuExpanded} onDismissRequest={() => setSubmenuExpanded(false)}>
+        <DropdownMenu.Trigger>
+          <DropdownMenuItem
+            enabled={!attributes?.disabled}
+            elementColors={elementColors}
+            onClick={() => setSubmenuExpanded(true)}>
+            <DropdownMenuItem.Text>
+              <ComposeText>{title}</ComposeText>
+            </DropdownMenuItem.Text>
+            {leadingIconSource && (
+              <DropdownMenuItem.LeadingIcon>
+                <Icon source={leadingIconSource} size={24} tint={imageColor} />
+              </DropdownMenuItem.LeadingIcon>
+            )}
+          </DropdownMenuItem>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Items>
+          {subactions.map((sub) => (
+            <MenuActionItem
+              key={actionId(sub)}
+              action={sub}
+              onPressAction={onPressAction}
+              dismissAll={() => {
+                setSubmenuExpanded(false);
+                dismissAll();
+              }}
+              destructiveColor={destructiveColor}
+            />
+          ))}
+        </DropdownMenu.Items>
+      </DropdownMenu>
+    );
+  }
+
+  return (
+    <DropdownMenuItem
+      enabled={!attributes?.disabled}
+      elementColors={elementColors}
+      onClick={() => {
+        onPressAction?.(makeEvent(action));
+        dismissAll();
+      }}>
+      <DropdownMenuItem.Text>
+        <ComposeText>{title}</ComposeText>
+      </DropdownMenuItem.Text>
+      {leadingIconSource && (
+        <DropdownMenuItem.LeadingIcon>
+          <Icon source={leadingIconSource} size={24} tint={imageColor} />
+        </DropdownMenuItem.LeadingIcon>
+      )}
+      {state === 'on' && (
+        <DropdownMenuItem.TrailingIcon>
+          <ComposeText>✓</ComposeText>
+        </DropdownMenuItem.TrailingIcon>
+      )}
+    </DropdownMenuItem>
+  );
+}
+
+/**
+ * A drop-in replacement for `@react-native-menu/menu` on Android.
+ * Wraps the trigger in a `Pressable` (whose `onPress`/`onLongPress` opens the menu) and
+ * renders the actions tree as a controlled Material `DropdownMenu`.
+ *
+ * Note: when `action.image` is a string, it is treated as an iOS SF Symbol and ignored
+ * on Android — pass an `ImageSourcePropType` (e.g. `require('./icon.xml')`) to render
+ * a leading icon. `MenuView.title` is also unused on Android since Material
+ * `DropdownMenu` has no title slot.
+ */
+export function MenuView(props: MenuComponentProps & { ref?: React.Ref<MenuComponentRef> }) {
+  const {
+    ref,
+    actions,
+    onPressAction,
+    onOpenMenu,
+    onCloseMenu,
+    shouldOpenOnLongPress,
+    style,
+    children,
+    testID,
+  } = props;
+  const [expanded, setExpanded] = React.useState(false);
+  // Mirror `expanded` into a ref and flip it eagerly inside the callbacks so a
+  // second call within the same React tick is a no-op (the state update is
+  // async and wouldn't otherwise reflect back to the ref in time).
+  const expandedRef = React.useRef(false);
+
+  const open = React.useCallback(() => {
+    if (expandedRef.current) return;
+    expandedRef.current = true;
+    setExpanded(true);
+    onOpenMenu?.();
+  }, [onOpenMenu]);
+
+  const dismissAll = React.useCallback(() => {
+    if (!expandedRef.current) return;
+    expandedRef.current = false;
+    setExpanded(false);
+    onCloseMenu?.();
+  }, [onCloseMenu]);
+
+  React.useImperativeHandle(ref, () => ({ show: open }), [open]);
+
+  const destructiveColor = useMaterialColors().error;
+
+  return (
+    <View style={style} testID={testID}>
+      <Host matchContents>
+        <DropdownMenu expanded={expanded} onDismissRequest={dismissAll}>
+          <DropdownMenu.Trigger>
+            <RNHostView matchContents>
+              <Pressable
+                onPress={shouldOpenOnLongPress ? undefined : open}
+                onLongPress={shouldOpenOnLongPress ? open : undefined}
+                // Mirror upstream `@react-native-menu/menu`, which intercepts touches
+                // natively on a bare `ReactViewGroup`: no click sound, no focus
+                // highlight, no extra a11y node — children declare their own role.
+                android_disableSound
+                focusable={false}
+                accessible={false}>
+                {children}
+              </Pressable>
+            </RNHostView>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Items>
+            {actions.map((action) => (
+              <MenuActionItem
+                key={actionId(action)}
+                action={action}
+                onPressAction={onPressAction}
+                dismissAll={dismissAll}
+                destructiveColor={destructiveColor}
+              />
+            ))}
+          </DropdownMenu.Items>
+        </DropdownMenu>
+      </Host>
+    </View>
+  );
+}

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

@@ -0,0 +1,149 @@
+import * as React from 'react';
+
+import type { MenuAction, MenuComponentProps, MenuComponentRef, NativeActionEvent } from './types';
+import { Button } from '../../swift-ui/Button';
+import { ContextMenu } from '../../swift-ui/ContextMenu';
+import { Host } from '../../swift-ui/Host';
+import { Menu } from '../../swift-ui/Menu';
+import { RNHostView } from '../../swift-ui/RNHostView';
+import { Section } from '../../swift-ui/Section';
+import { Toggle } from '../../swift-ui/Toggle';
+import {
+  disabled as disabledModifier,
+  foregroundColor as foregroundColorModifier,
+  tint as tintModifier,
+} from '../../swift-ui/modifiers';
+import type { ModifierConfig } from '../../types';
+
+function actionId(action: MenuAction): string {
+  return action.id ?? action.title;
+}
+
+function makeEvent(action: MenuAction): NativeActionEvent {
+  return { nativeEvent: { event: actionId(action) } };
+}
+
+function renderAction(
+  action: MenuAction,
+  onPressAction: MenuComponentProps['onPressAction']
+): React.ReactNode {
+  if (action.attributes?.hidden) {
+    return null;
+  }
+
+  const { subactions, displayInline, state, attributes, image, imageColor, title } = action;
+  const key = actionId(action);
+  const systemImage = typeof image === 'string' ? image : undefined;
+  // `tint` is what SwiftUI's `Menu`/`Button` honor for the leading SF Symbol —
+  // `foregroundColor` would also affect the label text.
+  const tintMod = imageColor ? tintModifier(imageColor) : null;
+
+  if (subactions && subactions.length > 0) {
+    const children = subactions.map((sub) => renderAction(sub, onPressAction));
+    if (displayInline) {
+      return (
+        <Section key={key} title={title}>
+          {children}
+        </Section>
+      );
+    }
+    // SwiftUI's system menu UI ignores per-item color modifiers on submenu
+    // headers, so we don't forward `imageColor` here. Leaf `Button`s below
+    // tint via `foregroundColor`, which does take effect.
+    return (
+      <Menu key={key} label={title} systemImage={systemImage}>
+        {children}
+      </Menu>
+    );
+  }
+
+  const fire = () => onPressAction?.(makeEvent(action));
+
+  const modifiers: ModifierConfig[] = [];
+  if (attributes?.disabled) modifiers.push(disabledModifier(true));
+
+  if (state === 'on' || state === 'off') {
+    if (tintMod) modifiers.push(tintMod);
+    return (
+      <Toggle
+        key={key}
+        label={title}
+        systemImage={systemImage}
+        isOn={state === 'on'}
+        onIsOnChange={fire}
+        modifiers={modifiers.length > 0 ? modifiers : undefined}
+      />
+    );
+  }
+
+  // For a leaf `Button`, `foregroundColor` also tints the system image —
+  // upstream uses this to color both the label and the icon. Skip when the
+  // role is destructive so SwiftUI's red tint remains in effect.
+  if (imageColor && !attributes?.destructive) {
+    modifiers.push(foregroundColorModifier(imageColor));
+  }
+
+  return (
+    <Button
+      key={key}
+      label={title}
+      systemImage={systemImage}
+      role={attributes?.destructive ? 'destructive' : undefined}
+      modifiers={modifiers.length > 0 ? modifiers : undefined}
+      onPress={fire}
+    />
+  );
+}
+
+let warnedShowNoop = false;
+
+/**
+ * A drop-in replacement for `@react-native-menu/menu` on iOS.
+ * Uses SwiftUI `Menu` for tap triggers and `ContextMenu` for long-press triggers.
+ */
+export function MenuView(props: MenuComponentProps & { ref?: React.Ref<MenuComponentRef> }) {
+  const { ref, actions, onPressAction, shouldOpenOnLongPress, title, style, children, testID } =
+    props;
+
+  // SwiftUI `Menu`/`ContextMenu` expose no programmatic open API, so `show()`
+  // can't do anything on iOS. Surface that as a one-time dev warning instead of
+  // silently no-opping.
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      show: () => {
+        if (__DEV__ && !warnedShowNoop) {
+          warnedShowNoop = true;
+          console.warn(
+            '[@expo/ui] MenuView.show() is a no-op on iOS. SwiftUI Menu/ContextMenu have no programmatic open API.'
+          );
+        }
+      },
+    }),
+    []
+  );
+
+  const items = actions.map((action) => renderAction(action, onPressAction));
+  const body = title ? <Section title={title}>{items}</Section> : items;
+
+  // RNHostView requires a single ReactElement; wrap in a fragment so callers
+  // can pass any `ReactNode` (string, array, etc.).
+  const trigger = (
+    <RNHostView matchContents>
+      <>{children}</>
+    </RNHostView>
+  );
+
+  return (
+    <Host matchContents style={style} testID={testID}>
+      {shouldOpenOnLongPress ? (
+        <ContextMenu>
+          <ContextMenu.Trigger>{trigger}</ContextMenu.Trigger>
+          <ContextMenu.Items>{body}</ContextMenu.Items>
+        </ContextMenu>
+      ) : (
+        <Menu label={trigger}>{body}</Menu>
+      )}
+    </Host>
+  );
+}

package/src/community/menu/MenuView.tsx

@@ -0,0 +1,36 @@
+import { type Ref, useEffect, useImperativeHandle } from 'react';
+import { View } from 'react-native';
+
+import type { MenuComponentProps, MenuComponentRef } from './types';
+
+let warned = false;
+
+/**
+ * A drop-in replacement for `@react-native-menu/menu`'s `MenuView`. Wrap any trigger
+ * view; long-pressing or tapping (per `shouldOpenOnLongPress`) shows a popup menu
+ * built from the `actions` tree.
+ *
+ * - On Android, renders via Compose's `DropdownMenu` anchored to a `Pressable`.
+ * - On iOS, renders via SwiftUI's `Menu` (tap) or `ContextMenu` (long-press).
+ * - On web, the trigger renders the trigger but actions do not fire;
+ *   a one-time `console.warn` is emitted.
+ *
+ * @platform android
+ * @platform ios
+ */
+export function MenuView(props: MenuComponentProps & { ref?: Ref<MenuComponentRef> }) {
+  useEffect(() => {
+    if (!warned) {
+      warned = true;
+      console.warn(
+        "[@expo/ui] MenuView is currently Android and iOS-only; the trigger will render but actions won't fire on this platform."
+      );
+    }
+  }, []);
+  useImperativeHandle(props.ref, () => ({ show: () => {} }), []);
+  return (
+    <View style={props.style} testID={props.testID}>
+      {props.children}
+    </View>
+  );
+}

package/src/community/menu/index.tsx

@@ -0,0 +1,14 @@
+import { MenuView } from './MenuView';
+
+export type {
+  MenuAction,
+  MenuAttributes,
+  MenuComponentProps,
+  MenuState,
+  MenuComponentRef,
+  NativeActionEvent,
+} from './types';
+
+export default MenuView;
+// named export needed for docs generator
+export { MenuView };

package/src/community/menu/types.tsx

@@ -0,0 +1,171 @@
+import type { ReactNode } from 'react';
+import type { ColorValue, ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+import type { SFSymbol } from 'sf-symbols-typescript';
+
+/**
+ * Visual and behavioral attributes of a menu action.
+ * Compatible with `@react-native-menu/menu`.
+ */
+export type MenuAttributes = {
+  /**
+   * Renders the action with a destructive style (red text/icon).
+   */
+  destructive?: boolean;
+  /**
+   * Disables the action so it can't be activated.
+   */
+  disabled?: boolean;
+  /**
+   * Hides the action from the menu.
+   */
+  hidden?: boolean;
+};
+
+/**
+ * Selection state for a menu action.
+ * `'on'` renders a checkmark; `'off'` doesn't.
+ */
+export type MenuState = 'on' | 'off';
+
+/**
+ * A single action inside a `MenuView`.
+ * Compatible with `@react-native-menu/menu`.
+ */
+export type MenuAction = {
+  /**
+   * Identifier passed back via `onPressAction.nativeEvent.event` when this action is selected.
+   * Defaults to `title` if omitted.
+   */
+  id?: string;
+  /**
+   * Action label shown in the menu.
+   */
+  title: string;
+  /**
+   * Text color of the action label.
+   * @platform android
+   */
+  titleColor?: ColorValue;
+  /**
+   * Icon to render beside the action label.
+   *
+   * - When an `SFSymbol` name (e.g. `'trash'`), rendered on iOS only.
+   *   Not rendered on Android — pass an `ImageSourcePropType` instead to show an
+   *   icon there.
+   * - When an `ImageSourcePropType` (e.g. `require('./trash.xml')` or
+   *   `{ uri: '...' }`), rendered on Android via Compose `Icon`. Ignored on iOS;
+   *   SwiftUI menus only accept SF Symbol names for built-in `Menu`/`Button`
+   *   labels.
+   */
+  image?: SFSymbol | ImageSourcePropType;
+  /**
+   * Tint color applied to the action's icon.
+   *
+   * Visually applied on Android via the leading `Icon`'s tint. On iOS, the
+   * value is accepted but **may not render**: SwiftUI's `Menu`/`ContextMenu`
+   * draw their items via the system menu UI, which ignores per-item color
+   * modifiers.
+   */
+  imageColor?: ColorValue;
+  /**
+   * Selection state. When `'on'`, the action renders a checkmark.
+   */
+  state?: MenuState;
+  /**
+   * Visual/behavioral flags.
+   */
+  attributes?: MenuAttributes;
+  /**
+   * Nested actions. Without `displayInline`, renders as a submenu;
+   * with `displayInline: true`, renders as an inline section.
+   */
+  subactions?: MenuAction[];
+  /**
+   * When `true` and `subactions` is present, renders the children as an inline section
+   * inside the parent menu (with this action's `title` as the section header on iOS).
+   */
+  displayInline?: boolean;
+};
+
+/**
+ * Imperative handle exposed by `MenuView` via `ref`.
+ * Compatible with `@react-native-menu/menu`'s `ref.show()` API.
+ */
+export type MenuComponentRef = {
+  /**
+   * Programmatically open the menu.
+   *
+   * On Android, opens the anchored `DropdownMenu` (equivalent to the user tapping
+   * the trigger). On iOS this is a no-op — SwiftUI `Menu`/`ContextMenu` have no
+   * programmatic open API; a one-time `console.warn` is emitted in development.
+   * @platform android
+   */
+  show: () => void;
+};
+
+/**
+ * Event payload delivered to `onPressAction` when an action is selected.
+ * Compatible with `@react-native-menu/menu`.
+ */
+export type NativeActionEvent = {
+  nativeEvent: {
+    /** Identifier of the pressed action: `action.id ?? action.title`. */
+    event: string;
+  };
+};
+
+/**
+ * Props for the `MenuView` component.
+ * Drop-in compatible with `@react-native-menu/menu`.
+ */
+export type MenuComponentProps = {
+  /**
+   * Menu title shown at the top of the menu.
+   * @platform ios
+   */
+  title?: string;
+  /**
+   * Callback invoked when a menu action is selected.
+   */
+  onPressAction?: (event: NativeActionEvent) => void;
+  /**
+   * Callback invoked when the menu opens.
+   *
+   * On Android, fires when the trigger's tap/long-press flips `expanded` to `true`.
+   * On iOS, SwiftUI `Menu`/`ContextMenu` do not expose an open hook, so this is not
+   * fired there.
+   * @platform android
+   */
+  onOpenMenu?: () => void;
+  /**
+   * Callback invoked when the menu closes (either via dismissal or after an action
+   * fires).
+   *
+   * On Android, fires from the controlled `DropdownMenu`'s dismiss path.
+   * On iOS, SwiftUI `Menu`/`ContextMenu` do not expose a close hook in a way we can
+   * forward, so this is not fired there.
+   * @platform android
+   */
+  onCloseMenu?: () => void;
+  /**
+   * The actions to display in the menu.
+   */
+  actions: MenuAction[];
+  /**
+   * When `true`, the menu opens on long-press of the trigger instead of a single tap.
+   * @default false
+   */
+  shouldOpenOnLongPress?: boolean;
+  /**
+   * Style applied to the trigger wrapper.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Test identifier passed through to the trigger view.
+   */
+  testID?: string;
+  /**
+   * Trigger view. Long-pressing or tapping (per `shouldOpenOnLongPress`) opens the menu.
+   */
+  children?: ReactNode;
+};

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

@@ -291,6 +291,31 @@ export const clickable = (handler: () => void, options?: { indication?: boolean
     indication: options?.indication ?? true,
   });
 
+/**
+ * Makes the view respond to both click and long-click gestures.
+ * Wraps Compose's `Modifier.combinedClickable`. Useful for triggering a `DropdownMenu`
+ * on long-press while keeping a separate short-press action.
+ * @param handlers.onClick - Function to call on a short tap.
+ * @param handlers.onLongClick - Function to call on a long press.
+ * @param options - Optional configuration.
+ * @param options.indication - Whether to show a ripple indication. Defaults to `true`.
+ */
+export const combinedClickable = (
+  handlers: { onClick?: () => void; onLongClick?: () => void },
+  options?: { indication?: boolean }
+) =>
+  createModifierWithEventListener(
+    'combinedClickable',
+    (params: { event: 'click' | 'longClick' }) => {
+      if (params.event === 'click') {
+        handlers.onClick?.();
+      } else if (params.event === 'longClick') {
+        handlers.onLongClick?.();
+      }
+    },
+    { indication: options?.indication ?? true }
+  );
+
 /**
  * Makes the view selectable, like a radio button row.
  * @param selected - Whether the item is currently selected.