From 32655199209dd4568d81276c704005d6a4c19388 Mon Sep 17 00:00:00 2001 From: Samuel Susla Date: Wed, 20 May 2020 11:48:46 -0700 Subject: [PATCH] Fix assignment of hitTestEdgeInsets in RCTViewComponentView Summary: Changelog: [Internal] If you look at implementation of hit testing in `RCTViewComponentView` ``` - (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event { if (UIEdgeInsetsEqualToEdgeInsets(self.hitTestEdgeInsets, UIEdgeInsetsZero)) { return [super pointInside:point withEvent:event]; } CGRect hitFrame = UIEdgeInsetsInsetRect(self.bounds, self.hitTestEdgeInsets); return CGRectContainsPoint(hitFrame, point); } ``` you will notice that we use `UIEdgeInsetsInsetRect` to calculate hitFrame. The input for this function is bounds and `hitTestEdgeInsets`. `hitTestEdgeInsets` is our hitSlop. Look at documentation of `UIEdgeInsetsInsetRect`, it says "Adjusts a rectangle by the given edge insets.". So if you give it a positive edge insets, it will make the rect smaller. That's why we need to reverse values of hitSlop to negative before assigning it to `hitTestEdgeInsets`. Paper does the same thing here https://github.com/facebook/react-native/blob/d0871d0a9a373e1d3ac35da46c85c0d0e793116d/React/Views/RCTViewManager.m#L304-L305 Reviewed By: mdvacca Differential Revision: D21661894 fbshipit-source-id: c3dd6c55b68e4fdef8589ca8f0484e2837b4136c --- .../Mounting/ComponentViews/View/RCTViewComponentView.mm | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm b/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm index f252344fe62..09bc95cb33d 100644 --- a/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm +++ b/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm @@ -180,7 +180,10 @@ using namespace facebook::react; // `hitSlop` if (oldViewProps.hitSlop != newViewProps.hitSlop) { - self.hitTestEdgeInsets = RCTUIEdgeInsetsFromEdgeInsets(newViewProps.hitSlop); + self.hitTestEdgeInsets = {-newViewProps.hitSlop.top, + -newViewProps.hitSlop.left, + -newViewProps.hitSlop.bottom, + -newViewProps.hitSlop.right}; } // `overflow`