Disable view flattening when the view has event handlers on Android

Summary:
The views with touch event props are currently flattened by Fabric core, as we don't take event listeners into account when calculating whether the view should be flattened. This results in a confusing situation when components with touch event listeners (e.g. `<View onTouchStart={() => {}} /> `) or ones using `PanResponder` are either ignored (iOS) or cause a crash (Android).

This change passes touch event props to C++ layer and uses them to calculate whether the view node should be flattened or not. It also refactors events to be kept as a singular bitset with 32 bit (~`uint32_t`).

Changelog: [Changed][General] Avoid flattening nodes with event props

Reviewed By: sammy-SC

Differential Revision: D34005536

fbshipit-source-id: 96255b389a7bfff4aa208a96fd0c173d9edf1512
This commit is contained in:
Andrei Shikov
2022-02-10 06:07:39 -08:00
committed by Facebook GitHub Bot
parent 9ed2df628d
commit 980c52de41
10 changed files with 352 additions and 43 deletions
@@ -486,18 +486,103 @@ public abstract class BaseViewManager<T extends View, C extends LayoutShadowNode
FLog.w(ReactConstants.TAG, "%s doesn't support property '%s'", getName(), propName);
}
@ReactProp(name = "pointerenter")
public void setPointerEnter(@NonNull T view, @Nullable boolean value) {
@ReactProp(name = "onPointerEnter")
public void setPointerEnter(@NonNull T view, boolean value) {
view.setTag(R.id.pointer_enter, value);
}
@ReactProp(name = "pointerleave")
public void setPointerLeave(@NonNull T view, @Nullable boolean value) {
@ReactProp(name = "onPointerLeave")
public void setPointerLeave(@NonNull T view, boolean value) {
view.setTag(R.id.pointer_leave, value);
}
@ReactProp(name = "pointermove")
public void setPointerMove(@NonNull T view, @Nullable boolean value) {
@ReactProp(name = "onPointerMove")
public void setPointerMove(@NonNull T view, boolean value) {
view.setTag(R.id.pointer_move, value);
}
@ReactProp(name = "onMoveShouldSetResponder")
public void setMoveShouldSetResponder(@NonNull T view, boolean value) {
// no-op, handled by JSResponder
}
@ReactProp(name = "onMoveShouldSetResponderCapture")
public void setMoveShouldSetResponderCapture(@NonNull T view, boolean value) {
// no-op, handled by JSResponder
}
@ReactProp(name = "onStartShouldSetResponder")
public void setStartShouldSetResponder(@NonNull T view, boolean value) {
// no-op, handled by JSResponder
}
@ReactProp(name = "onStartShouldSetResponderCapture")
public void setStartShouldSetResponderCapture(@NonNull T view, boolean value) {
// no-op, handled by JSResponder
}
@ReactProp(name = "onResponderGrant")
public void setResponderGrant(@NonNull T view, boolean value) {
// no-op, handled by JSResponder
}
@ReactProp(name = "onResponderReject")
public void setResponderReject(@NonNull T view, boolean value) {
// no-op, handled by JSResponder
}
@ReactProp(name = "onResponderStart")
public void setResponderStart(@NonNull T view, boolean value) {
// no-op, handled by JSResponder
}
@ReactProp(name = "onResponderEnd")
public void setResponderEnd(@NonNull T view, boolean value) {
// no-op, handled by JSResponder
}
@ReactProp(name = "onResponderRelease")
public void setResponderRelease(@NonNull T view, boolean value) {
// no-op, handled by JSResponder
}
@ReactProp(name = "onResponderMove")
public void setResponderMove(@NonNull T view, boolean value) {
// no-op, handled by JSResponder
}
@ReactProp(name = "onResponderTerminate")
public void setResponderTerminate(@NonNull T view, boolean value) {
// no-op, handled by JSResponder
}
@ReactProp(name = "onResponderTerminationRequest")
public void setResponderTerminationRequest(@NonNull T view, boolean value) {
// no-op, handled by JSResponder
}
@ReactProp(name = "onShouldBlockNativeResponder")
public void setShouldBlockNativeResponder(@NonNull T view, boolean value) {
// no-op, handled by JSResponder
}
@ReactProp(name = "onTouchStart")
public void setTouchStart(@NonNull T view, boolean value) {
// no-op, handled by JSResponder
}
@ReactProp(name = "onTouchMove")
public void setTouchMove(@NonNull T view, boolean value) {
// no-op, handled by JSResponder
}
@ReactProp(name = "onTouchEnd")
public void setTouchEnd(@NonNull T view, boolean value) {
// no-op, handled by JSResponder
}
@ReactProp(name = "onTouchCancel")
public void setTouchCancel(@NonNull T view, boolean value) {
// no-op, handled by JSResponder
}
}
@@ -808,19 +808,19 @@ public class LayoutShadowNode extends ReactShadowNodeImpl {
super.setShouldNotifyOnLayout(shouldNotifyOnLayout);
}
@ReactProp(name = "pointerenter")
@ReactProp(name = "onPointerEnter")
public void setShouldNotifyPointerEnter(boolean value) {
// This method exists to inject Native View configs in RN Android VR
// DO NOTHING
}
@ReactProp(name = "pointerleave")
@ReactProp(name = "onPointerLeave")
public void setShouldNotifyPointerLeave(boolean value) {
// This method exists to inject Native View configs in RN Android VR
// DO NOTHING
}
@ReactProp(name = "pointermove")
@ReactProp(name = "onPointerMove")
public void setShouldNotifyPointerMove(boolean value) {
// This method exists to inject Native View configs in RN Android VR
// DO NOTHING
@@ -59,9 +59,9 @@ import java.util.Map;
return MapBuilder.builder()
.put("topContentSizeChange", MapBuilder.of(rn, "onContentSizeChange"))
.put("topLayout", MapBuilder.of(rn, "onLayout"))
.put("topPointerEnter", MapBuilder.of(rn, "pointerenter"))
.put("topPointerLeave", MapBuilder.of(rn, "pointerleave"))
.put("topPointerMove", MapBuilder.of(rn, "pointermove"))
.put("topPointerEnter", MapBuilder.of(rn, "onPointerEnter"))
.put("topPointerLeave", MapBuilder.of(rn, "onPointerLeave"))
.put("topPointerMove", MapBuilder.of(rn, "onPointerMove"))
.put("topLoadingError", MapBuilder.of(rn, "onLoadingError"))
.put("topLoadingFinish", MapBuilder.of(rn, "onLoadingFinish"))
.put("topLoadingStart", MapBuilder.of(rn, "onLoadingStart"))