feat(android): add show method to MenuView component (#954)

* feat(android): add show method to MenuView component

* refactor(types): re-export MenuComponentRef type

* docs: update README with ref usage example

README.md

@@ -40,14 +40,20 @@ npx pod-install
 ## Usage
 
 ```jsx
-import { MenuView } from '@react-native-menu/menu';
+import { MenuView, MenuComponentRef } from '@react-native-menu/menu';
 
 // ...
 
 const App = () => {
+  const menuRef = useRef<MenuComponentRef>(null);
   return (
     <View style={styles.container}>
+      <Button
+        title="Show Menu with ref (Android only)"
+        onPress={() => menuRef.current?.show()}
+      />
       <MenuView
+        ref={menuRef}
         title="Menu Title"
         onPressAction={({ nativeEvent }) => {
           console.warn(JSON.stringify(nativeEvent));
@@ -131,6 +137,14 @@ It's also possible to obtain the `action` is a more React-ish, declarative fashi
 
 ### Props
 
+#### `ref` (Android only)
+
+Ref to the menu component.
+
+| Type | Required |
+|------|----------|
+| ref  | No       |
+
 ### `title` (iOS only)
 
 The title of the menu.

android/src/main/java/com/reactnativemenu/MenuView.kt

@@ -43,6 +43,10 @@ class MenuView(private val mContext: ReactContext) : ReactViewGroup(mContext) {
     })
   }
 
+  fun show(){
+    prepareMenu()
+  }
+
   override fun setHitSlopRect(rect: Rect?) {
     super.setHitSlopRect(rect)
     mHitSlopRect = rect

android/src/main/java/com/reactnativemenu/MenuViewManagerBase.kt

@@ -169,7 +169,18 @@ abstract class MenuViewManagerBase: ReactClippingViewManager<MenuView>() {
     view.setBackfaceVisibilityDependantOpacity()
   }
 
+  override fun getCommandsMap(): MutableMap<String, Int>? {
+    return MapBuilder.of("show", COMMAND_SHOW)
+  }
+
+  override fun receiveCommand(root: MenuView, commandId: Int, args: ReadableArray?) {
+    when (commandId) {
+      COMMAND_SHOW -> root.show()
+    }
+  }
+
   companion object {
+    val COMMAND_SHOW = 1
     val SPACING_TYPES = arrayOf(
       Spacing.ALL,
       Spacing.LEFT,

example/src/App.tsx

@@ -1,13 +1,20 @@
 import * as React from 'react';
-import { Platform, StyleSheet, Text, View } from 'react-native';
-import { MenuView } from '@react-native-menu/menu';
+import { Button, Platform, StyleSheet, Text, View } from 'react-native';
+import { MenuView, MenuComponentRef } from '@react-native-menu/menu';
+import { useRef } from 'react';
 
 export const App = () => {
   const [themeVariant] = React.useState<string | undefined>('light');
+  const menuRef = useRef<MenuComponentRef>(null);
 
   return (
     <View style={styles.container}>
+      <Button
+        title="Show Menu with ref (Android only)"
+        onPress={() => menuRef.current?.show()}
+      />
       <MenuView
+        ref={menuRef}
         title="Menu Title"
         onPressAction={({ nativeEvent }) => {
           console.warn(JSON.stringify(nativeEvent));
@@ -178,6 +185,7 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
+    gap: 10,
   },
   button: {
     height: 100,

src/UIMenuView.android.tsx

@@ -1,8 +1,38 @@
-import { HostComponent, requireNativeComponent } from 'react-native';
-import type { NativeMenuComponentProps } from './types';
+import {
+  findNodeHandle,
+  HostComponent,
+  requireNativeComponent,
+  UIManager,
+} from 'react-native';
+import type { MenuComponentRef, NativeMenuComponentProps } from './types';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 
-const MenuComponent = requireNativeComponent(
+const NativeMenuComponent = requireNativeComponent(
   'MenuView'
 ) as HostComponent<NativeMenuComponentProps>;
 
+const MenuComponent = forwardRef<MenuComponentRef, NativeMenuComponentProps>(
+  (props, ref) => {
+    const nativeRef = useRef(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        show: () => {
+          if (nativeRef.current) {
+            const node = findNodeHandle(nativeRef.current);
+            const command =
+              UIManager.getViewManagerConfig('MenuView').Commands.show;
+
+            UIManager.dispatchViewManagerCommand(node, command, undefined);
+          }
+        },
+      }),
+      [nativeRef]
+    );
+
+    return <NativeMenuComponent {...props} ref={nativeRef} />;
+  }
+);
+
 export default MenuComponent;

src/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { processColor } from 'react-native';
 
 import UIMenuView from './UIMenuView';
@@ -7,6 +7,7 @@ import type {
   MenuAction,
   ProcessedMenuAction,
   NativeActionEvent,
+  MenuComponentRef,
 } from './types';
 import { objectHash } from './utils';
 
@@ -21,26 +22,31 @@ function processAction(action: MenuAction): ProcessedMenuAction {
 
 const defaultHitslop = { top: 0, left: 0, bottom: 0, right: 0 };
 
-const MenuView: React.FC<MenuComponentProps> = ({
-  actions,
-  hitSlop = defaultHitslop,
-  ...props
-}) => {
-  const processedActions = actions.map<ProcessedMenuAction>((action) =>
-    processAction(action)
-  );
-  const hash = useMemo(() => {
-    return objectHash(processedActions);
-  }, [processedActions]);
-  return (
-    <UIMenuView
-      {...props}
-      hitSlop={hitSlop}
-      actions={processedActions}
-      actionsHash={hash}
-    />
-  );
-};
+const MenuView = forwardRef<MenuComponentRef, MenuComponentProps>(
+  ({ actions, hitSlop = defaultHitslop, ...props }, ref) => {
+    const processedActions = actions.map<ProcessedMenuAction>((action) =>
+      processAction(action)
+    );
+    const hash = useMemo(() => {
+      return objectHash(processedActions);
+    }, [processedActions]);
+
+    return (
+      <UIMenuView
+        {...props}
+        hitSlop={hitSlop}
+        actions={processedActions}
+        actionsHash={hash}
+        ref={ref}
+      />
+    );
+  }
+);
 
 export { MenuView };
-export type { MenuComponentProps, MenuAction, NativeActionEvent };
+export type {
+  MenuComponentProps,
+  MenuComponentRef,
+  MenuAction,
+  NativeActionEvent,
+};

src/types.ts

@@ -163,6 +163,10 @@ type MenuComponentPropsBase = {
 export type MenuComponentProps =
   React.PropsWithChildren<MenuComponentPropsBase>;
 
+export type MenuComponentRef = {
+  show: () => void;
+};
+
 export type ProcessedMenuAction = Omit<
   MenuAction,
   'imageColor' | 'titleColor' | 'subactions'
@@ -180,4 +184,5 @@ export type NativeMenuComponentProps = {
   title?: string;
   hitSlop?: MenuComponentProps['hitSlop'];
   testID?: string;
+  ref?: React.ForwardedRef<MenuComponentRef>;
 };