@quyvt.dev/react-native-native-menu 0.1.0 → 0.2.0

package/README.md

@@ -2,6 +2,18 @@
 
 Fabric-only native system menus for React Native. iOS uses UIKit `UIMenu`; Android intentionally leaves fallback UI to the consuming app.
 
+## Demo
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/vtquy98/react-native-native-menu/main/docs/images/native-menu-demo.gif" width="320" alt="Native iOS menu opening and selecting actions" />
+</p>
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/vtquy98/react-native-native-menu/main/docs/images/native-menu-idle.png" width="30%" alt="Custom React Native trigger" />
+  <img src="https://raw.githubusercontent.com/vtquy98/react-native-native-menu/main/docs/images/native-menu-open.png" width="30%" alt="Native iOS UIMenu with destructive and disabled actions" />
+  <img src="https://raw.githubusercontent.com/vtquy98/react-native-native-menu/main/docs/images/native-menu-selected.png" width="30%" alt="Immediate selected item callback" />
+</p>
+
 ## Requirements
 
 - React Native with the New Architecture enabled
@@ -47,6 +59,7 @@ function MenuTrigger() {
           accessibilityLabel="More options"
           items={items}
           style={StyleSheet.absoluteFill}
+          theme="system"
           onSelect={handleSelect}
         />
       ) : (
@@ -79,6 +92,7 @@ A transparent native touch surface. Give it non-zero dimensions and position it
 | `items` | `ReadonlyArray<NativeMenuItem>` | Ordered native menu actions. |
 | `onSelect` | `(id: string) => void` | Called immediately with the selected item ID. |
 | `style` | `StyleProp<ViewStyle>?` | Layout for the transparent touch surface. |
+| `theme` | `'light' \| 'dark' \| 'system'?` | Controls the native menu appearance. Defaults to `'dark'`. |
 
 ### `NativeMenuItem`
 
@@ -93,7 +107,7 @@ A transparent native touch surface. Give it non-zero dimensions and position it
 
 - **iOS:** Uses a Fabric component backed by `UIButton`, `UIAction`, and `UIMenu`. Item order is preserved and prop updates rebuild the native menu.
 - **System appearance:** UIKit supplies the native animation and material. Liquid Glass appears automatically on operating systems and SDKs that provide it; this package does not emulate that effect.
-- **Version 0.1.0 theme:** The native view uses dark interface style by default.
+- **Theme:** Use `light` or `dark` to force an interface style, or `system` to inherit the current system appearance. The default remains `dark` for backward compatibility with version 0.1.0.
 - **Android:** The exported component renders `null`. The consuming app must render its own trigger and fallback menu.
 
 ## Troubleshooting

package/ios/NativeMenuButtonComponentView.mm

@@ -10,6 +10,7 @@ using namespace facebook::react;
 @property (nonatomic, copy) NSArray *items;
 @property (nonatomic, copy, nullable) NSString *menuAccessibilityLabel;
 @property (nonatomic, copy, nullable) void (^onSelect)(NSString *itemId);
+@property (nonatomic, copy) NSString *theme;
 @end
 
 @interface VTNativeMenuButton : RCTViewComponentView <RCTVTNativeMenuButtonViewProtocol>
@@ -71,6 +72,7 @@ using namespace facebook::react;
   _menuButtonView.menuAccessibilityLabel = newMenuProps.menuAccessibilityLabel.empty()
       ? nil
       : [NSString stringWithUTF8String:newMenuProps.menuAccessibilityLabel.c_str()];
+  _menuButtonView.theme = [NSString stringWithUTF8String:newMenuProps.theme.c_str()];
 
   [super updateProps:props oldProps:oldProps];
 }

package/ios/NativeMenuButtonView.swift

@@ -14,14 +14,17 @@ final class VTNativeMenuButtonView: UIView {
 
   @objc var onSelect: ((NSString) -> Void)?
 
+  @objc var theme: NSString = "dark" {
+    didSet { updateInterfaceStyle() }
+  }
+
   override init(frame: CGRect) {
     super.init(frame: frame)
 
-    overrideUserInterfaceStyle = .dark
     button.backgroundColor = .clear
-    button.overrideUserInterfaceStyle = .dark
     button.showsMenuAsPrimaryAction = true
     addSubview(button)
+    updateInterfaceStyle()
     updateMenu()
   }
 
@@ -34,6 +37,22 @@ final class VTNativeMenuButtonView: UIView {
     button.frame = bounds
   }
 
+  private func updateInterfaceStyle() {
+    let interfaceStyle: UIUserInterfaceStyle
+
+    switch theme as String {
+    case "light":
+      interfaceStyle = .light
+    case "system":
+      interfaceStyle = .unspecified
+    default:
+      interfaceStyle = .dark
+    }
+
+    overrideUserInterfaceStyle = interfaceStyle
+    button.overrideUserInterfaceStyle = interfaceStyle
+  }
+
   private func updateMenu() {
     let actions = items.compactMap { value -> UIAction? in
       guard

package/lib/module/NativeMenuButton.ios.js

@@ -7,11 +7,13 @@ const NativeMenuButton = ({
   accessibilityLabel,
   items,
   onSelect,
-  style
+  style,
+  theme = 'dark'
 }) => /*#__PURE__*/_jsx(NativeMenuButtonComponent, {
   items: items,
   menuAccessibilityLabel: accessibilityLabel,
   style: style,
+  theme: theme,
   onSelect: event => onSelect(getNativeMenuItemId(event))
 });
 export default NativeMenuButton;

package/lib/module/NativeMenuButton.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["NativeMenuButtonComponent","jsx","_jsx","getNativeMenuItemId","event","nativeEvent","id","NativeMenuButton","accessibilityLabel","items","onSelect","style","menuAccessibilityLabel"],"sourceRoot":"../../src","sources":["NativeMenuButton.ios.tsx"],"mappings":";;AAEA,OAAOA,yBAAyB,MAAM,mCAAmC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAY1E,OAAO,MAAMC,mBAAmB,GAAIC,KAA4B,IAC9DA,KAAK,CAACC,WAAW,CAACC,EAAE;AAEtB,MAAMC,gBAAgB,GAAGA,CAAC;EACxBC,kBAAkB;EAClBC,KAAK;EACLC,QAAQ;EACRC;AACqB,CAAC,kBACtBT,IAAA,CAACF,yBAAyB;EACxBS,KAAK,EAAEA,KAAM;EACbG,sBAAsB,EAAEJ,kBAAmB;EAC3CG,KAAK,EAAEA,KAAM;EACbD,QAAQ,EAAGN,KAA4B,IACrCM,QAAQ,CAACP,mBAAmB,CAACC,KAAK,CAAC;AACpC,CACF,CACF;AAED,eAAeG,gBAAgB","ignoreList":[]}
+{"version":3,"names":["NativeMenuButtonComponent","jsx","_jsx","getNativeMenuItemId","event","nativeEvent","id","NativeMenuButton","accessibilityLabel","items","onSelect","style","theme","menuAccessibilityLabel"],"sourceRoot":"../../src","sources":["NativeMenuButton.ios.tsx"],"mappings":";;AAEA,OAAOA,yBAAyB,MAAM,mCAAmC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAgB1E,OAAO,MAAMC,mBAAmB,GAAIC,KAA4B,IAC9DA,KAAK,CAACC,WAAW,CAACC,EAAE;AAEtB,MAAMC,gBAAgB,GAAGA,CAAC;EACxBC,kBAAkB;EAClBC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,KAAK,GAAG;AACa,CAAC,kBACtBV,IAAA,CAACF,yBAAyB;EACxBS,KAAK,EAAEA,KAAM;EACbI,sBAAsB,EAAEL,kBAAmB;EAC3CG,KAAK,EAAEA,KAAM;EACbC,KAAK,EAAEA,KAAM;EACbF,QAAQ,EAAGN,KAA4B,IACrCM,QAAQ,CAACP,mBAAmB,CAACC,KAAK,CAAC;AACpC,CACF,CACF;AAED,eAAeG,gBAAgB","ignoreList":[]}

package/lib/module/NativeMenuButtonNativeComponent.ts

@@ -8,10 +8,13 @@ export type NativeMenuItem = Readonly<{
   label: string;
 }>;
 
+export type NativeMenuTheme = 'light' | 'dark' | 'system';
+
 export interface NativeProps extends ViewProps {
   items: ReadonlyArray<NativeMenuItem>;
   menuAccessibilityLabel?: string;
   onSelect?: CodegenTypes.BubblingEventHandler<Readonly<{ id: string }>>;
+  theme: string;
 }
 
 export default codegenNativeComponent<NativeProps>(

package/lib/typescript/src/NativeMenuButton.ios.d.ts

@@ -1,5 +1,5 @@
 import type { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
-import type { NativeMenuItem } from './NativeMenuButtonNativeComponent';
+import type { NativeMenuItem, NativeMenuTheme } from './NativeMenuButtonNativeComponent';
 type NativeMenuSelectEvent = NativeSyntheticEvent<{
     id: string;
 }>;
@@ -8,8 +8,9 @@ export type NativeMenuButtonProps = {
     items: ReadonlyArray<NativeMenuItem>;
     onSelect: (id: string) => void;
     style?: StyleProp<ViewStyle>;
+    theme?: NativeMenuTheme;
 };
 export declare const getNativeMenuItemId: (event: NativeMenuSelectEvent) => string;
-declare const NativeMenuButton: ({ accessibilityLabel, items, onSelect, style, }: NativeMenuButtonProps) => import("react").JSX.Element;
+declare const NativeMenuButton: ({ accessibilityLabel, items, onSelect, style, theme, }: NativeMenuButtonProps) => import("react").JSX.Element;
 export default NativeMenuButton;
 //# sourceMappingURL=NativeMenuButton.ios.d.ts.map

package/lib/typescript/src/NativeMenuButton.ios.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NativeMenuButton.ios.d.ts","sourceRoot":"","sources":["../../../src/NativeMenuButton.ios.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG/E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAExE,KAAK,qBAAqB,GAAG,oBAAoB,CAAC;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAElE,MAAM,MAAM,qBAAqB,GAAG;IAClC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACrC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,OAAO,qBAAqB,WAC1C,CAAC;AAEvB,QAAA,MAAM,gBAAgB,GAAI,iDAKvB,qBAAqB,gCASvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"NativeMenuButton.ios.d.ts","sourceRoot":"","sources":["../../../src/NativeMenuButton.ios.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG/E,OAAO,KAAK,EACV,cAAc,EACd,eAAe,EAChB,MAAM,mCAAmC,CAAC;AAE3C,KAAK,qBAAqB,GAAG,oBAAoB,CAAC;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAElE,MAAM,MAAM,qBAAqB,GAAG;IAClC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACrC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,OAAO,qBAAqB,WAC1C,CAAC;AAEvB,QAAA,MAAM,gBAAgB,GAAI,wDAMvB,qBAAqB,gCAUvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/typescript/src/NativeMenuButtonNativeComponent.d.ts

@@ -5,12 +5,14 @@ export type NativeMenuItem = Readonly<{
     id: string;
     label: string;
 }>;
+export type NativeMenuTheme = 'light' | 'dark' | 'system';
 export interface NativeProps extends ViewProps {
     items: ReadonlyArray<NativeMenuItem>;
     menuAccessibilityLabel?: string;
     onSelect?: CodegenTypes.BubblingEventHandler<Readonly<{
         id: string;
     }>>;
+    theme: string;
 }
 declare const _default: HostComponent<NativeProps>;
 export default _default;

package/lib/typescript/src/NativeMenuButtonNativeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NativeMenuButtonNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/NativeMenuButtonNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACrC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,EAAE,YAAY,CAAC,oBAAoB,CAAC,QAAQ,CAAC;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;CACxE;wBAII,aAAa,CAAC,WAAW,CAAC;AAF/B,wBAEgC"}
+{"version":3,"file":"NativeMenuButtonNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/NativeMenuButtonNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE1D,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACrC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,EAAE,YAAY,CAAC,oBAAoB,CAAC,QAAQ,CAAC;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACvE,KAAK,EAAE,MAAM,CAAC;CACf;wBAII,aAAa,CAAC,WAAW,CAAC;AAF/B,wBAEgC"}

package/lib/typescript/src/index.d.ts

@@ -1,4 +1,4 @@
 export { default as NativeMenuButton } from './NativeMenuButton';
 export type { NativeMenuButtonProps } from './NativeMenuButton';
-export type { NativeMenuItem } from './NativeMenuButtonNativeComponent';
+export type { NativeMenuItem, NativeMenuTheme, } from './NativeMenuButtonNativeComponent';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EACV,cAAc,EACd,eAAe,GAChB,MAAM,mCAAmC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quyvt.dev/react-native-native-menu",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Native system menus for React Native using Fabric and UIKit UIMenu",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/NativeMenuButton.ios.tsx

@@ -1,7 +1,10 @@
 import type { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
 
 import NativeMenuButtonComponent from './NativeMenuButtonNativeComponent';
-import type { NativeMenuItem } from './NativeMenuButtonNativeComponent';
+import type {
+  NativeMenuItem,
+  NativeMenuTheme,
+} from './NativeMenuButtonNativeComponent';
 
 type NativeMenuSelectEvent = NativeSyntheticEvent<{ id: string }>;
 
@@ -10,6 +13,7 @@ export type NativeMenuButtonProps = {
   items: ReadonlyArray<NativeMenuItem>;
   onSelect: (id: string) => void;
   style?: StyleProp<ViewStyle>;
+  theme?: NativeMenuTheme;
 };
 
 export const getNativeMenuItemId = (event: NativeMenuSelectEvent) =>
@@ -20,11 +24,13 @@ const NativeMenuButton = ({
   items,
   onSelect,
   style,
+  theme = 'dark',
 }: NativeMenuButtonProps) => (
   <NativeMenuButtonComponent
     items={items}
     menuAccessibilityLabel={accessibilityLabel}
     style={style}
+    theme={theme}
     onSelect={(event: NativeMenuSelectEvent) =>
       onSelect(getNativeMenuItemId(event))
     }

package/src/NativeMenuButtonNativeComponent.ts

@@ -8,10 +8,13 @@ export type NativeMenuItem = Readonly<{
   label: string;
 }>;
 
+export type NativeMenuTheme = 'light' | 'dark' | 'system';
+
 export interface NativeProps extends ViewProps {
   items: ReadonlyArray<NativeMenuItem>;
   menuAccessibilityLabel?: string;
   onSelect?: CodegenTypes.BubblingEventHandler<Readonly<{ id: string }>>;
+  theme: string;
 }
 
 export default codegenNativeComponent<NativeProps>(

package/src/index.tsx

@@ -1,3 +1,6 @@
 export { default as NativeMenuButton } from './NativeMenuButton';
 export type { NativeMenuButtonProps } from './NativeMenuButton';
-export type { NativeMenuItem } from './NativeMenuButtonNativeComponent';
+export type {
+  NativeMenuItem,
+  NativeMenuTheme,
+} from './NativeMenuButtonNativeComponent';