@expo/ui 56.0.7 → 56.0.9

package/ios/State/ObservableState.swift

@@ -13,7 +13,18 @@ import SwiftUI
  *   Toggle(label, isOn: state.binding(false))
  */
 internal class ObservableState: SharedObject, ObservableObject {
-  @Published var value: Any?
+  var onChange: WorkletCallback?
+  private var isNotifying = false
+
+  @Published var value: Any? {
+    didSet {
+      // Skip re-invoking onChange if state.value was written from inside onChange.
+      guard !isNotifying else { return }
+      isNotifying = true
+      defer { isNotifying = false }
+      onChange?.invoke(arguments: [value ?? NSNull()])
+    }
+  }
 
   init(value: Any?) {
     self.value = value

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

@@ -0,0 +1 @@
+792086c87c80e11e11b3e96d4b0a27d5

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

@@ -0,0 +1 @@
+b68d51962848180ac90fcb20a9766fabd72327ad

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

@@ -0,0 +1 @@
+e068f417d7a302f7d37e1d8648b7f61d2da46d215aede6ad991e35f780e794ea

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

@@ -0,0 +1 @@
+408e70adeb3b30e509e418a2a6edbd5afb888a27f8fcd5c04032a1089ef32c4483e542854cd1621a74aa2763094cd2e6ba98b30e99e213dd06734167e6d4083c

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

@@ -0,0 +1 @@
+1375a9ac8dc803a405dd2fa39159a0bc

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

@@ -0,0 +1 @@
+4631f8e63a9536ef63c03c7666fbaa0e5a4f60a1

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

@@ -0,0 +1 @@
+7f2175675f65b6caaf5ce6580cdd24a10f208ae6d80b894e4460796fe2f0dc05

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

@@ -0,0 +1 @@
+ba0dfa2c02b2ad1f248bfe43a5a922a95dbb83c493eb23cd8d3b98f3e790d9be19133002ac2ab408f3a9268af3c5718072f0646c2e13b0ce2d01b8198ae8ccc6

package/local-maven-repo/expo/modules/ui/expo.modules.ui/{56.0.7/expo.modules.ui-56.0.7.module → 56.0.9/expo.modules.ui-56.0.9.module}

@@ -3,7 +3,7 @@
   "component": {
     "group": "expo.modules.ui",
     "module": "expo.modules.ui",
-    "version": "56.0.7",
+    "version": "56.0.9",
     "attributes": {
       "org.gradle.status": "release"
     }
@@ -24,13 +24,13 @@
       },
       "files": [
         {
-          "name": "expo.modules.ui-56.0.7.aar",
-          "url": "expo.modules.ui-56.0.7.aar",
-          "size": 1742882,
-          "sha512": "2214ac6df49634ec222a3563eb91161f0ba5977ea600f354473f9dd5d166dd79b5230c634d59c15fe027d77f9010fd3d984718d4c392adf444acf687e40e076e",
-          "sha256": "05e8833b0c8b22442fa1d70cd203ec9f986fd4e9d8541393c843779bca1bed6a",
-          "sha1": "63505c031167b651fcd2b3ed1cddbcb5a014bfa8",
-          "md5": "ea2684e30595f6e153476b3bd38b40f7"
+          "name": "expo.modules.ui-56.0.9.aar",
+          "url": "expo.modules.ui-56.0.9.aar",
+          "size": 1805504,
+          "sha512": "ba0dfa2c02b2ad1f248bfe43a5a922a95dbb83c493eb23cd8d3b98f3e790d9be19133002ac2ab408f3a9268af3c5718072f0646c2e13b0ce2d01b8198ae8ccc6",
+          "sha256": "7f2175675f65b6caaf5ce6580cdd24a10f208ae6d80b894e4460796fe2f0dc05",
+          "sha1": "4631f8e63a9536ef63c03c7666fbaa0e5a4f60a1",
+          "md5": "1375a9ac8dc803a405dd2fa39159a0bc"
         }
       ]
     },
@@ -141,13 +141,13 @@
       ],
       "files": [
         {
-          "name": "expo.modules.ui-56.0.7.aar",
-          "url": "expo.modules.ui-56.0.7.aar",
-          "size": 1742882,
-          "sha512": "2214ac6df49634ec222a3563eb91161f0ba5977ea600f354473f9dd5d166dd79b5230c634d59c15fe027d77f9010fd3d984718d4c392adf444acf687e40e076e",
-          "sha256": "05e8833b0c8b22442fa1d70cd203ec9f986fd4e9d8541393c843779bca1bed6a",
-          "sha1": "63505c031167b651fcd2b3ed1cddbcb5a014bfa8",
-          "md5": "ea2684e30595f6e153476b3bd38b40f7"
+          "name": "expo.modules.ui-56.0.9.aar",
+          "url": "expo.modules.ui-56.0.9.aar",
+          "size": 1805504,
+          "sha512": "ba0dfa2c02b2ad1f248bfe43a5a922a95dbb83c493eb23cd8d3b98f3e790d9be19133002ac2ab408f3a9268af3c5718072f0646c2e13b0ce2d01b8198ae8ccc6",
+          "sha256": "7f2175675f65b6caaf5ce6580cdd24a10f208ae6d80b894e4460796fe2f0dc05",
+          "sha1": "4631f8e63a9536ef63c03c7666fbaa0e5a4f60a1",
+          "md5": "1375a9ac8dc803a405dd2fa39159a0bc"
         }
       ]
     },
@@ -161,13 +161,13 @@
       },
       "files": [
         {
-          "name": "expo.modules.ui-56.0.7-sources.jar",
-          "url": "expo.modules.ui-56.0.7-sources.jar",
-          "size": 82267,
-          "sha512": "26e067865e2bbdd9f770d670f8212c2a309bee05009f722931b339ca9f76c235bbed2286a876d9c7a7b0ddb0e4b152617031f487c047ae78d0672ecc2649c6be",
-          "sha256": "213a1693673392a710d27fef37d99ef030c8a8783b4ccaa971ea914588dc5241",
-          "sha1": "a534f795e8ea46629011b2f8939608619b954ff1",
-          "md5": "f6beb7095321eea7da6845fa478235b0"
+          "name": "expo.modules.ui-56.0.9-sources.jar",
+          "url": "expo.modules.ui-56.0.9-sources.jar",
+          "size": 86330,
+          "sha512": "408e70adeb3b30e509e418a2a6edbd5afb888a27f8fcd5c04032a1089ef32c4483e542854cd1621a74aa2763094cd2e6ba98b30e99e213dd06734167e6d4083c",
+          "sha256": "e068f417d7a302f7d37e1d8648b7f61d2da46d215aede6ad991e35f780e794ea",
+          "sha1": "b68d51962848180ac90fcb20a9766fabd72327ad",
+          "md5": "792086c87c80e11e11b3e96d4b0a27d5"
         }
       ]
     }

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

@@ -0,0 +1 @@
+485b997d6738de54d6dc1a04d29b4c9a

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

@@ -0,0 +1 @@
+9fc748a23b388982628ba7ea8fb7beb7ce8673b9

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

@@ -0,0 +1 @@
+824aeb287c84a0ae7a903bbcd2ed28e02606bb63ff7b752f67f12469461f5b75

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

@@ -0,0 +1 @@
+7a87a1877c5555ab2b67f662d16481ef097240be1ac1ffaf3866ce167bf086cd272977ed945aafaf0143ee82c0fba1af5a5edc9fd6dd3715976708eea8beb901

package/local-maven-repo/expo/modules/ui/expo.modules.ui/{56.0.7/expo.modules.ui-56.0.7.pom → 56.0.9/expo.modules.ui-56.0.9.pom}

@@ -9,7 +9,7 @@
   <modelVersion>4.0.0</modelVersion>
   <groupId>expo.modules.ui</groupId>
   <artifactId>expo.modules.ui</artifactId>
-  <version>56.0.7</version>
+  <version>56.0.9</version>
   <packaging>aar</packaging>
   <name>expo.modules.ui</name>
   <url>https://github.com/expo/expo</url>

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

@@ -0,0 +1 @@
+f2d9d3bd7c4ea14a224a23d28ed45f95

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

@@ -0,0 +1 @@
+5f7de9f68a75a8180e441e1d8f88d38db511ea4d

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

@@ -0,0 +1 @@
+d8cabffaed7874f9cdaa99bdb3148847466647b3d8e38175a0d6129f42fc54ea

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

@@ -0,0 +1 @@
+d1b858cfe33845e3584fe8fe75da774a06c2d6ddef4c44e59671a832d9c5df04dad92780c7aa6f1a0183e337e4998d89598f6c08e91fda083ae0cd5c4a7cfb37

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>56.0.7</latest>
-    <release>56.0.7</release>
+    <latest>56.0.9</latest>
+    <release>56.0.9</release>
     <versions>
-      <version>56.0.7</version>
+      <version>56.0.9</version>
     </versions>
-    <lastUpdated>20260513235023</lastUpdated>
+    <lastUpdated>20260519105316</lastUpdated>
   </versioning>
 </metadata>

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

@@ -1 +1 @@
-64a2879e004360e655bef65bb9d431bd
+8beb24b746da04389648d65442b3fb27

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

@@ -1 +1 @@
-fd140bdfc96ce3c091dc1ef092f168c76a3cb9a0
+8f014cd5ad5596a8660865918f34d57e96318181

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

@@ -1 +1 @@
-d0e48014168bdeb917b14bc8af57d4f31668e40765bbf6e211a285109a1881f9
+00837d4c8ed40055be180e9910d9ed846227ab6602aef92f5f397e03348985db

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

@@ -1 +1 @@
-4b66f59083f73dd1eb00a28589bfd4f6d0f124918bbd8687af190b54c8264f1ea9399b767be30fc04e99dc584d676ef455ebbf455d97033a0beb408c0cc106e5
+400a09733b7b0b618213ee16be214463bc22a236e1073bd075d8e75a3ca278987524685812324ef7b2b52a0ec4be6a0ccd056dfc9e1f059080ba8c4594aa811f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expo/ui",
-  "version": "56.0.7",
+  "version": "56.0.9",
   "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.13",
     "expo-module-scripts": "56.0.2"
   },
   "jest": {
@@ -116,7 +120,7 @@
       "optional": true
     }
   },
-  "gitHead": "51c27fce31a5b3a877a4b05d832dabf4a99db5e1",
+  "gitHead": "290368bc41026449a05a4ebf991b85c3a2fb0e3a",
   "scripts": {
     "build": "expo-module build",
     "clean": "expo-module clean",

package/src/State/useNativeState.ts

@@ -12,11 +12,39 @@ const ExpoUI = requireNativeModule('ExpoUI');
  */
 export type ObservableState<T> = SharedObject & {
   /**
-   * The current value. Reads are safe from any thread; prefer writing from a worklet
-   * so the update runs on the native UI thread. Updating state from the JS thread
-   * might show a development warning.
+   * The current value.
+   *
+   * Writes from a UI worklet are synchronous and immediately readable. Writes
+   * from the JS thread are scheduled to the UI thread asynchronously, the new value is not readable until the update has been
+   * applied. Prefer writing from a worklet when you need synchronous updates
    */
   value: T;
+
+  /**
+   * A single listener invoked on the native UI runtime whenever the value changes
+   * (after iOS `didSet` and Android's setter). Assigning replaces the previous
+   * listener; assign `null` to clear. The initial value does not fire `onChange`.
+   *
+   * The callback must be a worklet so it can run synchronously on the UI thread.
+   * Attach it inside `useEffect` and clear it in the cleanup so the listener
+   * lifecycle matches the component lifecycle.
+   *
+   * @example
+   * ```tsx
+   * const state = useNativeState(0);
+   *
+   * useEffect(() => {
+   *   state.onChange = (value) => {
+   *     'worklet';
+   *     console.log('changed to', value);
+   *   };
+   *   return () => {
+   *     state.onChange = null;
+   *   };
+   * }, []);
+   * ```
+   */
+  onChange: { listener(value: T): void }['listener'] | null;
 };
 
 /**
@@ -28,6 +56,7 @@ export function useNativeState<T>(initialValue: T): ObservableState<T> {
   return useReleasingSharedObject(() => {
     const state = new ExpoUI.ObservableState({ value: initialValueRef.current });
     defineValueProperty(state);
+    defineOnChangeProperty(state);
     return state;
   }, []) as ObservableState<T>;
 }
@@ -35,26 +64,57 @@ export function useNativeState<T>(initialValue: T): ObservableState<T> {
 type NativeObservableState = {
   getValue(): unknown;
   setValue(v: { value: unknown }): void;
+  setOnChange(callback: object | null): void;
 };
 
 /**
  * Adds a `value` property that delegates to the native `getValue`/`setValue` functions.
  */
 function defineValueProperty(state: NativeObservableState): void {
-  let warnedOnJSWrite = false;
   Object.defineProperty(state, 'value', {
     get() {
       return state.getValue();
     },
     set(v: unknown) {
-      if (__DEV__ && !warnedOnJSWrite && worklets && !worklets.isUIRuntime()) {
-        warnedOnJSWrite = true;
-        console.warn(
-          'ObservableState.value was set from the JS thread, the result may be unexpected. ' +
-            'Use a worklet to update the state.'
+      state.setValue({ value: v });
+    },
+  });
+}
+
+/**
+ * Adds an `onChange` property that wraps the user's worklet function as a
+ * `WorkletCallback` SharedObject before handing it to native. The cached
+ * function (not the SharedObject) is what the getter returns, so reading
+ * `state.onChange` gives back what the user assigned.
+ */
+function defineOnChangeProperty(state: NativeObservableState): void {
+  let currentFn: ((value: unknown) => void) | null = null;
+  Object.defineProperty(state, 'onChange', {
+    get() {
+      return currentFn;
+    },
+    set(fn: ((value: unknown) => void) | null | undefined) {
+      if (!fn) {
+        currentFn = null;
+        state.setOnChange(null);
+        return;
+      }
+      if (!worklets) {
+        throw new Error(
+          "ObservableState.onChange requires the 'react-native-worklets' package, which couldn't be loaded. " +
+            'Install react-native-worklets and rebuild the native app, then assign onChange again.'
         );
       }
-      state.setValue({ value: v });
+      if (!worklets.isWorkletFunction(fn)) {
+        throw new Error(
+          'ObservableState.onChange must be a worklet so it can run on the UI runtime when the native value changes. ' +
+            "Add the 'worklet' directive as the first statement in your callback: " +
+            "state.onChange = (value) => { 'worklet'; ... };"
+        );
+      }
+      currentFn = fn;
+      const callback = new ExpoUI.WorkletCallback(worklets.createSerializable(fn));
+      state.setOnChange(callback);
     },
   });
 }

package/src/community/bottom-sheet/BottomSheet.ios.tsx

@@ -84,12 +84,6 @@ export function BottomSheet(props: BottomSheetProps) {
   } = props;
   const { width } = useWindowDimensions();
 
-  // Two-state pattern for animated close:
-  // - isMounted: whether the native sheet tree exists in the React tree
-  // - isPresented: passed to native isPresented prop (controls SwiftUI animation)
-  // On close: isPresented→false (native animates out) → onIsPresentedChange fires → isMounted→false (unmount)
-  // On open: isMounted→true + isPresented→true (mount + native animates in)
-  const [isMounted, setIsMounted] = useState(indexProp >= 0);
   const [isPresented, setIsPresented] = useState(indexProp >= 0);
   const [currentIndex, setCurrentIndex] = useState(Math.max(indexProp, 0));
   // Ref mirrors currentIndex for use in handleDetentChange without adding it as a useCallback dep
@@ -129,7 +123,6 @@ export function BottomSheet(props: BottomSheetProps) {
       fireCloseCallbacks();
     } else if (indexProp >= 0) {
       closedRef.current = false;
-      setIsMounted(true);
       setIsPresented(true);
       const clampedIndex = Math.min(indexProp, detents.length - 1);
       setCurrentIndex(clampedIndex);
@@ -141,7 +134,6 @@ export function BottomSheet(props: BottomSheetProps) {
     (presented: boolean) => {
       if (!presented) {
         setIsPresented(false);
-        setIsMounted(false);
         fireCloseCallbacks();
       }
     },
@@ -169,7 +161,6 @@ export function BottomSheet(props: BottomSheetProps) {
       }
       const clampedIndex = Math.min(Math.max(index, 0), detents.length - 1);
       closedRef.current = false;
-      setIsMounted(true);
       setIsPresented(true);
       currentIndexRef.current = clampedIndex;
       setCurrentIndex(clampedIndex);
@@ -224,14 +215,6 @@ export function BottomSheet(props: BottomSheetProps) {
     ]
   );
 
-  if (!isMounted) {
-    return (
-      <BottomSheetInternalContext.Provider value={internalContextValue}>
-        <BottomSheetContext.Provider value={methods}>{null}</BottomSheetContext.Provider>
-      </BottomSheetInternalContext.Provider>
-    );
-  }
-
   return (
     <BottomSheetInternalContext.Provider value={internalContextValue}>
       <BottomSheetContext.Provider value={methods}>

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>
+  );
+}