Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for hitslop #627

Closed
thomasttvo opened this issue Nov 7, 2023 · 5 comments
Closed

Support for hitslop #627

thomasttvo opened this issue Nov 7, 2023 · 5 comments

Comments

@thomasttvo
Copy link

thomasttvo commented Nov 7, 2023

Would be great if we could add hitSlop support. Small MenuView buttons are hard to pressed and larger ones may not look good.
I just added it locally. It was pretty straight forward. This is my diff

diff --git a/node_modules/@react-native-menu/menu/ios/MenuView.swift b/node_modules/@react-native-menu/menu/ios/MenuView.swift
index 4333aca..2313b78 100644
--- a/node_modules/@react-native-menu/menu/ios/MenuView.swift
+++ b/node_modules/@react-native-menu/menu/ios/MenuView.swift
@@ -50,6 +50,9 @@ class MenuView: UIButton {
         }
     }
     
+    
+    @objc var hitSlop: UIEdgeInsets = .zero
+
     override init(frame: CGRect) {
       super.init(frame: frame)
       self.setup()
@@ -77,6 +80,23 @@ class MenuView: UIButton {
       super.reactSetFrame(frame);
     };
     
+    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")
diff --git a/node_modules/@react-native-menu/menu/ios/RCTUIMenuManager.m b/node_modules/@react-native-menu/menu/ios/RCTUIMenuManager.m
index 42b08ee..9cf9f06 100644
--- a/node_modules/@react-native-menu/menu/ios/RCTUIMenuManager.m
+++ b/node_modules/@react-native-menu/menu/ios/RCTUIMenuManager.m
@@ -24,4 +24,6 @@ @interface RCT_EXTERN_MODULE(RCTUIMenu, RCTViewManager)
  */
 RCT_EXPORT_VIEW_PROPERTY(themeVariant, NSString)
 
+RCT_EXPORT_VIEW_PROPERTY(hitSlop, UIEdgeInsets)
+
 @end
@YaoHuiJi
Copy link

That's what I was going to say,little buttons are too hard to click, why not make a pull request?

@michaelbrant
Copy link

@thomasttvo can you make a PR for this?

@frozencap
Copy link

yes please

@liquidvisual
Copy link

Is hitSlop only supported in iOS? Works fine there but doesn't do anything in Android.

@Naturalclar
Copy link
Member

fixed in #888

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants