Add hitSlop support (#627) (#888)

ios/MenuViewManager.mm

@@ -66,4 +66,9 @@ - (UIView *)view
  */
 RCT_EXPORT_VIEW_PROPERTY(themeVariant, NSString)
 
+/**
+ * hitSlop: The same as hitSlop in React Native
+*/
+RCT_EXPORT_VIEW_PROPERTY(hitSlop, UIEdgeInsets)
+
 @end

ios/Shared/MenuViewImplementation.swift

@@ -50,6 +50,8 @@ public class MenuViewImplementation: UIButton {
         }
     }
 
+    @objc var hitSlop: UIEdgeInsets = .zero
+
     override init(frame: CGRect) {
       super.init(frame: frame)
       self.setup()
@@ -77,6 +79,23 @@ public class MenuViewImplementation: UIButton {
       super.reactSetFrame(frame);
     };
 
+    public override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
+        if hitSlop == .zero || !self.isEnabled || self.isHidden {
+            return super.point(inside: point, with: event)
+        }
+
+        // Create a larger hit frame that extends beyond the view's bounds
+        let largerFrame = CGRect(
+            x: self.bounds.origin.x - hitSlop.left,
+            y: self.bounds.origin.y - hitSlop.top,
+            width: self.bounds.size.width + hitSlop.left + hitSlop.right,
+            height: self.bounds.size.height + hitSlop.top + hitSlop.bottom
+        )
+
+        // Check if the point is within the larger frame
+        return largerFrame.contains(point)
+    }
+
 
   required init?(coder aDecoder: NSCoder) {
     fatalError("init(coder:) has not been implemented")

src/index.tsx

@@ -19,15 +19,17 @@ function processAction(action: MenuAction): ProcessedMenuAction {
   };
 }
 
-const MenuView: React.FC<MenuComponentProps> = ({ actions, ...props }) => {
+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} actions={processedActions} actionsHash={hash} />
+    <UIMenuView {...props} hitSlop={hitSlop} actions={processedActions} actionsHash={hash} />
   );
 };
 

src/types.ts

@@ -144,6 +144,16 @@ type MenuComponentPropsBase = {
    * @platform iOS
    */
   themeVariant?: string;
+  /**
+   * Custom OpenSpace hitSlop prop. Works like touchable hitslop.
+   * @platform iOS
+   */
+  hitSlop?: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+  };
 };
 
 export type MenuComponentProps =
@@ -164,4 +174,5 @@ export type NativeMenuComponentProps = {
   actions: ProcessedMenuAction[];
   actionsHash: string;
   title?: string;
+  hitSlop?: MenuComponentProps['hitSlop'];
 };