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

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 Quy Vo
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,109 @@
+# @quyvt.dev/react-native-native-menu
+
+Fabric-only native system menus for React Native. iOS uses UIKit `UIMenu`; Android intentionally leaves fallback UI to the consuming app.
+
+## Requirements
+
+- React Native with the New Architecture enabled
+- iOS with CocoaPods
+- iOS 15.1 or newer when using the current React Native scaffold defaults
+
+## Installation
+
+```sh
+npm install @quyvt.dev/react-native-native-menu
+cd ios && pod install
+```
+
+Rebuild the native application after installation.
+
+## Usage
+
+Render your visual trigger, then place `NativeMenuButton` over it on iOS. Android receives a no-op component, so the app owns its fallback interaction.
+
+```tsx
+import { Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import {
+  NativeMenuButton,
+  type NativeMenuItem,
+} from '@quyvt.dev/react-native-native-menu';
+
+const items: NativeMenuItem[] = [
+  { id: 'preview', label: 'Preview' },
+  { id: 'disabled', label: 'Unavailable', disabled: true },
+  { id: 'delete', label: 'Delete', destructive: true },
+];
+
+function MenuTrigger() {
+  const handleSelect = (id: string) => {
+    console.log(id);
+  };
+
+  return (
+    <View style={styles.trigger}>
+      <Text>•••</Text>
+      {Platform.OS === 'ios' ? (
+        <NativeMenuButton
+          accessibilityLabel="More options"
+          items={items}
+          style={StyleSheet.absoluteFill}
+          onSelect={handleSelect}
+        />
+      ) : (
+        <Pressable
+          accessibilityLabel="More options"
+          style={StyleSheet.absoluteFill}
+          onPress={() => openAndroidMenu(items, handleSelect)}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  trigger: { width: 48, height: 48 },
+});
+```
+
+## API
+
+### `NativeMenuButton`
+
+A transparent native touch surface. Give it non-zero dimensions and position it over your app-owned visual trigger.
+
+### `NativeMenuButtonProps`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `accessibilityLabel` | `string?` | Accessibility label applied to the native iOS button. |
+| `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. |
+
+### `NativeMenuItem`
+
+| Field | Type | Description |
+| --- | --- | --- |
+| `id` | `string` | Stable value delivered to `onSelect`. |
+| `label` | `string` | Native action title. |
+| `destructive` | `boolean?` | Applies UIKit destructive styling. |
+| `disabled` | `boolean?` | Prevents selection. |
+
+## Platform behavior
+
+- **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.
+- **Android:** The exported component renders `null`. The consuming app must render its own trigger and fallback menu.
+
+## Troubleshooting
+
+- Ensure the React Native New Architecture is enabled; legacy architecture view managers are not included.
+- Run `pod install` in the app's `ios` directory after adding or upgrading the package.
+- Rebuild the native app instead of relying on JavaScript reloads after installation.
+- Give `NativeMenuButton` non-zero width and height, usually with `StyleSheet.absoluteFill` over a sized trigger.
+- If the view is not registered, clean the iOS build and reinstall pods so Codegen can regenerate the Fabric component provider.
+
+## License
+
+MIT

package/ios/NativeMenuButtonComponentView.mm

@@ -0,0 +1,78 @@
+#import <React/RCTViewComponentView.h>
+#import <react/renderer/components/VTNativeMenuButtonSpec/ComponentDescriptors.h>
+#import <react/renderer/components/VTNativeMenuButtonSpec/EventEmitters.h>
+#import <react/renderer/components/VTNativeMenuButtonSpec/Props.h>
+#import <react/renderer/components/VTNativeMenuButtonSpec/RCTComponentViewHelpers.h>
+
+using namespace facebook::react;
+
+@interface VTNativeMenuButtonView : UIView
+@property (nonatomic, copy) NSArray *items;
+@property (nonatomic, copy, nullable) NSString *menuAccessibilityLabel;
+@property (nonatomic, copy, nullable) void (^onSelect)(NSString *itemId);
+@end
+
+@interface VTNativeMenuButton : RCTViewComponentView <RCTVTNativeMenuButtonViewProtocol>
+@end
+
+@implementation VTNativeMenuButton {
+  VTNativeMenuButtonView *_menuButtonView;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<VTNativeMenuButtonComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const VTNativeMenuButtonProps>();
+    _props = defaultProps;
+
+    _menuButtonView = [[VTNativeMenuButtonView alloc] initWithFrame:frame];
+
+    __weak VTNativeMenuButton *weakSelf = self;
+    _menuButtonView.onSelect = ^(NSString *itemId) {
+      VTNativeMenuButton *strongSelf = weakSelf;
+      if (!strongSelf || !strongSelf->_eventEmitter) {
+        return;
+      }
+
+      auto eventEmitter = std::static_pointer_cast<const VTNativeMenuButtonEventEmitter>(
+          strongSelf->_eventEmitter);
+      eventEmitter->onSelect(VTNativeMenuButtonEventEmitter::OnSelect{
+          .id = std::string(itemId.UTF8String),
+      });
+    };
+
+    self.contentView = _menuButtonView;
+  }
+
+  return self;
+}
+
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
+{
+  const auto &newMenuProps = *std::static_pointer_cast<const VTNativeMenuButtonProps>(props);
+  NSMutableArray<NSDictionary *> *items =
+      [NSMutableArray arrayWithCapacity:newMenuProps.items.size()];
+
+  for (const auto &item : newMenuProps.items) {
+    [items addObject:@{
+      @"destructive" : @(item.destructive),
+      @"disabled" : @(item.disabled),
+      @"id" : [NSString stringWithUTF8String:item.id.c_str()],
+      @"label" : [NSString stringWithUTF8String:item.label.c_str()],
+    }];
+  }
+
+  _menuButtonView.items = items;
+  _menuButtonView.menuAccessibilityLabel = newMenuProps.menuAccessibilityLabel.empty()
+      ? nil
+      : [NSString stringWithUTF8String:newMenuProps.menuAccessibilityLabel.c_str()];
+
+  [super updateProps:props oldProps:oldProps];
+}
+
+@end

package/ios/NativeMenuButtonView.swift

@@ -0,0 +1,64 @@
+import UIKit
+
+@objc(VTNativeMenuButtonView)
+final class VTNativeMenuButtonView: UIView {
+  private let button = UIButton(type: .system)
+
+  @objc var items: NSArray = [] {
+    didSet { updateMenu() }
+  }
+
+  @objc var menuAccessibilityLabel: NSString? {
+    didSet { button.accessibilityLabel = menuAccessibilityLabel as String? }
+  }
+
+  @objc var onSelect: ((NSString) -> Void)?
+
+  override init(frame: CGRect) {
+    super.init(frame: frame)
+
+    overrideUserInterfaceStyle = .dark
+    button.backgroundColor = .clear
+    button.overrideUserInterfaceStyle = .dark
+    button.showsMenuAsPrimaryAction = true
+    addSubview(button)
+    updateMenu()
+  }
+
+  required init?(coder: NSCoder) {
+    fatalError("init(coder:) has not been implemented")
+  }
+
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    button.frame = bounds
+  }
+
+  private func updateMenu() {
+    let actions = items.compactMap { value -> UIAction? in
+      guard
+        let item = value as? NSDictionary,
+        let id = item["id"] as? String,
+        let label = item["label"] as? String
+      else {
+        return nil
+      }
+
+      var attributes: UIMenuElement.Attributes = []
+
+      if item["destructive"] as? Bool == true {
+        attributes.insert(.destructive)
+      }
+
+      if item["disabled"] as? Bool == true {
+        attributes.insert(.disabled)
+      }
+
+      return UIAction(title: label, attributes: attributes) { [weak self] _ in
+        self?.onSelect?(id as NSString)
+      }
+    }
+
+    button.menu = UIMenu(children: actions)
+  }
+}

package/lib/module/NativeMenuButton.ios.js

@@ -0,0 +1,18 @@
+"use strict";
+
+import NativeMenuButtonComponent from './NativeMenuButtonNativeComponent';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const getNativeMenuItemId = event => event.nativeEvent.id;
+const NativeMenuButton = ({
+  accessibilityLabel,
+  items,
+  onSelect,
+  style
+}) => /*#__PURE__*/_jsx(NativeMenuButtonComponent, {
+  items: items,
+  menuAccessibilityLabel: accessibilityLabel,
+  style: style,
+  onSelect: event => onSelect(getNativeMenuItemId(event))
+});
+export default NativeMenuButton;
+//# sourceMappingURL=NativeMenuButton.ios.js.map

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

@@ -0,0 +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":[]}

package/lib/module/NativeMenuButton.js

@@ -0,0 +1,5 @@
+"use strict";
+
+const NativeMenuButton = _props => null;
+export default NativeMenuButton;
+//# sourceMappingURL=NativeMenuButton.js.map

package/lib/module/NativeMenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["NativeMenuButton","_props"],"sourceRoot":"../../src","sources":["NativeMenuButton.tsx"],"mappings":";;AAEA,MAAMA,gBAAgB,GAAIC,MAA6B,IAAK,IAAI;AAEhE,eAAeD,gBAAgB","ignoreList":[]}

package/lib/module/NativeMenuButtonNativeComponent.ts

@@ -0,0 +1,19 @@
+import { codegenNativeComponent } from 'react-native';
+import type { CodegenTypes, HostComponent, ViewProps } from 'react-native';
+
+export type NativeMenuItem = Readonly<{
+  destructive?: boolean;
+  disabled?: boolean;
+  id: string;
+  label: string;
+}>;
+
+export interface NativeProps extends ViewProps {
+  items: ReadonlyArray<NativeMenuItem>;
+  menuAccessibilityLabel?: string;
+  onSelect?: CodegenTypes.BubblingEventHandler<Readonly<{ id: string }>>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'VTNativeMenuButton'
+) as HostComponent<NativeProps>;

package/lib/module/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default as NativeMenuButton } from './NativeMenuButton';
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","NativeMenuButton"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,gBAAgB,QAAQ,oBAAoB","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

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

@@ -0,0 +1,5 @@
+import type { NativeMenuButtonProps } from './NativeMenuButton.ios.js';
+declare const NativeMenuButton: (_props: NativeMenuButtonProps) => null;
+export default NativeMenuButton;
+export type { NativeMenuButtonProps };
+//# sourceMappingURL=NativeMenuButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NativeMenuButton.d.ts","sourceRoot":"","sources":["../../../src/NativeMenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2BAAwB,CAAC;AAEpE,QAAA,MAAM,gBAAgB,GAAI,QAAQ,qBAAqB,SAAS,CAAC;AAEjE,eAAe,gBAAgB,CAAC;AAChC,YAAY,EAAE,qBAAqB,EAAE,CAAC"}

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,17 @@
+import type { CodegenTypes, HostComponent, ViewProps } from 'react-native';
+export type NativeMenuItem = Readonly<{
+    destructive?: boolean;
+    disabled?: boolean;
+    id: string;
+    label: string;
+}>;
+export interface NativeProps extends ViewProps {
+    items: ReadonlyArray<NativeMenuItem>;
+    menuAccessibilityLabel?: string;
+    onSelect?: CodegenTypes.BubblingEventHandler<Readonly<{
+        id: string;
+    }>>;
+}
+declare const _default: HostComponent<NativeProps>;
+export default _default;
+//# sourceMappingURL=NativeMenuButtonNativeComponent.d.ts.map

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

@@ -0,0 +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"}

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

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

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

@@ -0,0 +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"}

package/package.json

@@ -0,0 +1,125 @@
+{
+  "name": "@quyvt.dev/react-native-native-menu",
+  "version": "0.1.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",
+  "exports": {
+    ".": {
+      "react-native-native-menu-source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "!src/__tests__",
+    "lib",
+    "ios",
+    "react-native-native-menu.podspec",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "example": "npm --workspace @quyvt.dev/react-native-native-menu-example run",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "test": "jest",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\""
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vtquy98/react-native-native-menu.git"
+  },
+  "author": "Quy Vo <vtquy98@gmail.com> (https://github.com/vtquy98)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/vtquy98/react-native-native-menu/issues"
+  },
+  "homepage": "https://github.com/vtquy98/react-native-native-menu#readme",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^2.1.0",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^9.39.5",
+    "@react-native/babel-preset": "0.85.3",
+    "@react-native/eslint-config": "0.85.0",
+    "@types/react": "^19.2.0",
+    "@types/jest": "^29.5.14",
+    "@types/react-test-renderer": "^19.1.0",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.5.6",
+    "jest": "^29.7.0",
+    "prettier": "^3.8.3",
+    "react": "19.2.3",
+    "react-native": "0.85.3",
+    "react-native-builder-bob": "^0.43.0",
+    "react-test-renderer": "19.2.3",
+    "turbo": "^2.9.16",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "npm@11.4.2",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "VTNativeMenuButtonSpec",
+    "type": "components",
+    "jsSrcsDir": "src",
+    "ios": {
+      "componentProvider": {
+        "VTNativeMenuButton": "VTNativeMenuButton"
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "create-react-native-library": {
+    "type": "fabric-view",
+    "languages": "kotlin-objc",
+    "tools": [
+      "eslint"
+    ],
+    "version": "0.63.0"
+  }
+}

package/react-native-native-menu.podspec

@@ -0,0 +1,19 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name = "react-native-native-menu"
+  s.version = package["version"]
+  s.summary = package["description"]
+  s.homepage = package["homepage"]
+  s.license = package["license"]
+  s.authors = package["author"]
+
+  s.platforms = { :ios => min_ios_version_supported }
+  s.source = { :git => "https://github.com/vtquy98/react-native-native-menu.git", :tag => s.version.to_s }
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+  s.swift_version = "5.0"
+
+  install_modules_dependencies(s)
+end

package/src/NativeMenuButton.ios.tsx

@@ -0,0 +1,34 @@
+import type { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
+
+import NativeMenuButtonComponent from './NativeMenuButtonNativeComponent';
+import type { NativeMenuItem } from './NativeMenuButtonNativeComponent';
+
+type NativeMenuSelectEvent = NativeSyntheticEvent<{ id: string }>;
+
+export type NativeMenuButtonProps = {
+  accessibilityLabel?: string;
+  items: ReadonlyArray<NativeMenuItem>;
+  onSelect: (id: string) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+export const getNativeMenuItemId = (event: NativeMenuSelectEvent) =>
+  event.nativeEvent.id;
+
+const NativeMenuButton = ({
+  accessibilityLabel,
+  items,
+  onSelect,
+  style,
+}: NativeMenuButtonProps) => (
+  <NativeMenuButtonComponent
+    items={items}
+    menuAccessibilityLabel={accessibilityLabel}
+    style={style}
+    onSelect={(event: NativeMenuSelectEvent) =>
+      onSelect(getNativeMenuItemId(event))
+    }
+  />
+);
+
+export default NativeMenuButton;

package/src/NativeMenuButton.tsx

@@ -0,0 +1,6 @@
+import type { NativeMenuButtonProps } from './NativeMenuButton.ios';
+
+const NativeMenuButton = (_props: NativeMenuButtonProps) => null;
+
+export default NativeMenuButton;
+export type { NativeMenuButtonProps };

package/src/NativeMenuButtonNativeComponent.ts

@@ -0,0 +1,19 @@
+import { codegenNativeComponent } from 'react-native';
+import type { CodegenTypes, HostComponent, ViewProps } from 'react-native';
+
+export type NativeMenuItem = Readonly<{
+  destructive?: boolean;
+  disabled?: boolean;
+  id: string;
+  label: string;
+}>;
+
+export interface NativeProps extends ViewProps {
+  items: ReadonlyArray<NativeMenuItem>;
+  menuAccessibilityLabel?: string;
+  onSelect?: CodegenTypes.BubblingEventHandler<Readonly<{ id: string }>>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'VTNativeMenuButton'
+) as HostComponent<NativeProps>;

package/src/index.tsx

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