⭐️ Impl. dismissMenu

Author: dominicstop

ios/src_library/React Native/RCTContextMenuButton/RCTContextMenuButton.swift

@@ -108,13 +108,16 @@ class RCTContextMenuButton: UIButton {
   override func reactSetFrame(_ frame: CGRect) {
     super.reactSetFrame(frame);
   };
+};
 
 // ---------------------------------------------------------
 // MARK: RCTContextMenuButton - Public Functions for Manager
 // ---------------------------------------------------------
-  
-  func dismissMenu(){
-    // TODO: wip
+
+@available(iOS 14, *)
+extension RCTContextMenuButton {
+  @objc func dissmissMenu(){
+    self.contextMenuInteraction?.dismissMenu();
   };
 };
 

ios/src_library/React Native/RCTContextMenuButton/RCTContextMenuButtonManager.m

@@ -36,4 +36,10 @@ @interface RCT_EXTERN_MODULE(RCTContextMenuButtonManager, RCTViewManager)
 RCT_EXPORT_VIEW_PROPERTY(enableContextMenu  , BOOL);
 RCT_EXPORT_VIEW_PROPERTY(isMenuPrimaryAction, BOOL);
 
+// ---------------------------
+// MARK: View Manager Commands
+// ---------------------------
+
+RCT_EXTERN_METHOD(dismissMenu:(nonnull NSNumber *)node);
+
 @end

ios/src_library/React Native/RCTContextMenuButton/RCTContextMenuButtonManager.swift

@@ -27,4 +27,22 @@ class RCTContextMenuButtonManager: RCTViewManager {
       return RCTView();
     };
   };
+  
+  @objc func dismissMenu(_ node: NSNumber) {
+    DispatchQueue.main.async {
+      guard let view =  self.bridge.uiManager.view(forReactTag: node)
+      else { return };
+      
+      if #available(iOS 14, *),
+         let contextMenuButton = view as? RCTContextMenuButton {
+
+        contextMenuButton.dissmissMenu();
+        
+      } else if #available(iOS 13, *),
+                let contextMenuView = view as? RCTContextMenuView {
+        
+        contextMenuView.dissmissMenu();
+      };
+    };
+  };
 };

ios/src_library/React Native/RCTContextMenuView/RCTContextMenuView.swift

@@ -138,14 +138,25 @@ class RCTContextMenuView: UIView {
   };
 };
 
+// ------------------------------------------------
+// MARK: RCTContextMenuView - ViewManager Functions
+// ------------------------------------------------
+
+@available(iOS 13, *)
+extension RCTContextMenuView {
+  @objc func dissmissMenu(){
+    self.contextMenuInteraction?.dismissMenu();
+  };
+};
+
 // --------------------------------------------
 // MARK: RCTContextMenuView - Private Functions
 // --------------------------------------------
 
 @available(iOS 13, *)
-extension RCTContextMenuView {
+fileprivate extension RCTContextMenuView {
 
-  private func notifyForBoundsChange(_ newBounds: CGRect){
+  func notifyForBoundsChange(_ newBounds: CGRect){
     guard
       let bridge    = self.bridge,
       let reactView = self.reactPreviewView else { return };
@@ -154,7 +165,7 @@ extension RCTContextMenuView {
   };
 
   /// create `UIMenu` based on `menuConfig` prop
-  private func createMenu(_ suggestedAction: [UIMenuElement]) -> UIMenu? {
+  func createMenu(_ suggestedAction: [UIMenuElement]) -> UIMenu? {
     guard  let menuConfig = self._menuConfig else {
       #if DEBUG
       print("RCTContextMenuView, createMenu"
@@ -170,8 +181,8 @@ extension RCTContextMenuView {
     };
   };
 
-  
-  private func createMenuPreview() -> UIViewController? {
+  /// create custom menu preview based on `previewConfig` and `reactPreviewView`
+  func createMenuPreview() -> UIViewController? {
     // alias to variable
     let previewConfig = self._previewConfig;
 
@@ -190,7 +201,8 @@ extension RCTContextMenuView {
     return vc;
   };
 
-  private func makeTargetedPreview() -> UITargetedPreview {
+  /// confgiure target preview based on `previewConfig`
+  func makeTargetedPreview() -> UITargetedPreview {
     // alias to variable
     let previewConfig = self._previewConfig;
 

ios/src_library/React Native/RCTContextMenuView/RCTContextMenuViewManager.m

@@ -35,4 +35,10 @@ @interface RCT_EXTERN_MODULE(RCTContextMenuViewManager, RCTViewManager)
 RCT_EXPORT_VIEW_PROPERTY(menuConfig   , NSDictionary);
 RCT_EXPORT_VIEW_PROPERTY(previewConfig, NSDictionary);
 
+// ---------------------------
+// MARK: View Manager Commands
+// ---------------------------
+
+RCT_EXTERN_METHOD(dismissMenu:(nonnull NSNumber *)node);
+
 @end

ios/src_library/React Native/RCTContextMenuView/RCTContextMenuViewManager.swift

@@ -15,11 +15,22 @@ class RCTContextMenuViewManager: RCTViewManager {
   };
 
   override func view() -> UIView! {
-    if #available(iOS 13, *) {
+    if #available(iOS 13.0, *) {
       return RCTContextMenuView(bridge: self.bridge);
 
     } else {
       return RCTView();
     };
   };
+  
+  @objc func dismissMenu(_ node: NSNumber) {
+    DispatchQueue.main.async {
+      guard #available(iOS 13.0, *),
+            let view = self.bridge.uiManager.view(forReactTag: node),
+            let contextMenuView = view as? RCTContextMenuView
+      else { return };
+      
+      contextMenuView.dissmissMenu();
+    };
+  };
 };

src/ContextMenuView.ios.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, Platform, requireNativeComponent, UIManager, View, TouchableOpacity, processColor } from 'react-native';
+import { StyleSheet, Platform, requireNativeComponent, UIManager, View, TouchableOpacity, processColor, findNodeHandle } from 'react-native';
 import Proptypes from 'prop-types';
 
 import { PreviewType } from './Enums';
@@ -34,6 +34,10 @@ const NATIVE_PROP_KEYS = {
   onPressMenuPreview: 'onPressMenuPreview',
 };
 
+const NATIVE_COMMAND_KEYS = {
+  'dismissMenu': 'dismissMenu',
+};
+
 
 export class ContextMenuView extends React.PureComponent {
   static proptypes = {
@@ -99,6 +103,14 @@ export class ContextMenuView extends React.PureComponent {
     return { nativeProps, ...otherProps };
   };
 
+  dismissMenu = () => {
+    UIManager.dispatchViewManagerCommand(
+      findNodeHandle(this.nativeRef),
+      NativeCommands?.[NATIVE_COMMAND_KEYS.dismissMenu],
+      null
+    );
+  };
+
   //#region - Event Handlers
   _handleOnLongPress = async () => {
     const { menuConfig, ...props } = this.props;
@@ -187,6 +199,7 @@ export class ContextMenuView extends React.PureComponent {
     return(
       <NativeComponent
         style={[styles.menuView, style]}
+        ref={r => this.nativeRef = r}
         {...nativeCompProps}
       >
         <View style={styles.previewContainer}>