Sync clipChildren with overflow: hidden (#55368)

Summary:
Pull Request resolved: #55368

Changelog: [Internal]

We found an issue (T253147322) in the LivingRoom top bar where a full-screen OCPanel within a parent with `overflow: hidden` occludes content outside the parent (see [code](https://www.internalfb.com/code/fbsource/[753feac76cb1]/arvr/js/apps/LivingRoom/src/ReactNative/App/HTV/Shared/Toolbar/LivingRoomToolbar.react.js?lines=85-96)).

This change adds a feature flag `enableClipChildrenForOverflowHidden` that, when enabled, sets `clipChildren = true` whenever `overflow: hidden` is set. This makes `TouchTargetHelper` also reject touches on children outside the parent's bounds (see [code](https://www.internalfb.com/code/fbsource/[753feac76cb1]/xplat/js/react-native-github/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/TouchTargetHelper.kt?lines=211-213)), aligning hit testing behavior with visual rendering.

The fix is gated behind a feature flag to allow gradual rollout and prevent potential regressions in apps that may rely on the current behavior.

Reviewed By: Abbondanzo

Differential Revision: D91775635

fbshipit-source-id: a1bf9bbd7ea9ff71ac4e7cf407b6d5328272bf00

Author: fabriziocucci

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlags.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<1d13409e4db7a5a48e5d2caf59a5fbcf>>
+ * @generated SignedSource<<f04d7cddd72c435fcce120b71366c81c>>
  */
 
 /**
@@ -120,6 +120,12 @@ public object ReactNativeFeatureFlags {
   @JvmStatic
   public fun enableBridgelessArchitecture(): Boolean = accessor.enableBridgelessArchitecture()
 
+  /**
+   * When overflow: hidden is set, also set clipChildren to true so that clipped content does not occlude content outside the parent
+   */
+  @JvmStatic
+  public fun enableClipChildrenForOverflowHidden(): Boolean = accessor.enableClipChildrenForOverflowHidden()
+
   /**
    * Enable prop iterator setter-style construction of Props in C++ (this flag is not used in Java).
    */

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsCxxAccessor.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<58a693fe003a9a19311fc0134d071154>>
+ * @generated SignedSource<<9158cc3ba1ea8ea65140b582a02a5112>>
  */
 
 /**
@@ -35,6 +35,7 @@ internal class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAcces
   private var enableAndroidLinearTextCache: Boolean? = null
   private var enableAndroidTextMeasurementOptimizationsCache: Boolean? = null
   private var enableBridgelessArchitectureCache: Boolean? = null
+  private var enableClipChildrenForOverflowHiddenCache: Boolean? = null
   private var enableCppPropsIteratorSetterCache: Boolean? = null
   private var enableCustomFocusSearchOnClippedElementsAndroidCache: Boolean? = null
   private var enableDestroyShadowTreeRevisionAsyncCache: Boolean? = null
@@ -234,6 +235,15 @@ internal class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAcces
     return cached
   }
 
+  override fun enableClipChildrenForOverflowHidden(): Boolean {
+    var cached = enableClipChildrenForOverflowHiddenCache
+    if (cached == null) {
+      cached = ReactNativeFeatureFlagsCxxInterop.enableClipChildrenForOverflowHidden()
+      enableClipChildrenForOverflowHiddenCache = cached
+    }
+    return cached
+  }
+
   override fun enableCppPropsIteratorSetter(): Boolean {
     var cached = enableCppPropsIteratorSetterCache
     if (cached == null) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsCxxInterop.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<698641fe5c1a9f4933321d5b155467d1>>
+ * @generated SignedSource<<8f93f5e6ce460e2337bbdc51bde69558>>
  */
 
 /**
@@ -58,6 +58,8 @@ public object ReactNativeFeatureFlagsCxxInterop {
 
   @DoNotStrip @JvmStatic public external fun enableBridgelessArchitecture(): Boolean
 
+  @DoNotStrip @JvmStatic public external fun enableClipChildrenForOverflowHidden(): Boolean
+
   @DoNotStrip @JvmStatic public external fun enableCppPropsIteratorSetter(): Boolean
 
   @DoNotStrip @JvmStatic public external fun enableCustomFocusSearchOnClippedElementsAndroid(): Boolean

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsDefaults.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<6ab1616102fb0807ad936f4333cb44c8>>
+ * @generated SignedSource<<afd4040a9d72ea4af7a20084723506aa>>
  */
 
 /**
@@ -53,6 +53,8 @@ public open class ReactNativeFeatureFlagsDefaults : ReactNativeFeatureFlagsProvi
 
   override fun enableBridgelessArchitecture(): Boolean = false
 
+  override fun enableClipChildrenForOverflowHidden(): Boolean = false
+
   override fun enableCppPropsIteratorSetter(): Boolean = false
 
   override fun enableCustomFocusSearchOnClippedElementsAndroid(): Boolean = true

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsLocalAccessor.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<f83c3d5107d900273c09061d6822f83d>>
+ * @generated SignedSource<<377c50a9a022344cba12a1ad6c23b68d>>
  */
 
 /**
@@ -39,6 +39,7 @@ internal class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcc
   private var enableAndroidLinearTextCache: Boolean? = null
   private var enableAndroidTextMeasurementOptimizationsCache: Boolean? = null
   private var enableBridgelessArchitectureCache: Boolean? = null
+  private var enableClipChildrenForOverflowHiddenCache: Boolean? = null
   private var enableCppPropsIteratorSetterCache: Boolean? = null
   private var enableCustomFocusSearchOnClippedElementsAndroidCache: Boolean? = null
   private var enableDestroyShadowTreeRevisionAsyncCache: Boolean? = null
@@ -253,6 +254,16 @@ internal class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcc
     return cached
   }
 
+  override fun enableClipChildrenForOverflowHidden(): Boolean {
+    var cached = enableClipChildrenForOverflowHiddenCache
+    if (cached == null) {
+      cached = currentProvider.enableClipChildrenForOverflowHidden()
+      accessedFeatureFlags.add("enableClipChildrenForOverflowHidden")
+      enableClipChildrenForOverflowHiddenCache = cached
+    }
+    return cached
+  }
+
   override fun enableCppPropsIteratorSetter(): Boolean {
     var cached = enableCppPropsIteratorSetterCache
     if (cached == null) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsProvider.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<c2e44ee4f139a99b8179f750b416ed2f>>
+ * @generated SignedSource<<c14e7e11bfb4404e2e8f94e551e1bb4d>>
  */
 
 /**
@@ -53,6 +53,8 @@ public interface ReactNativeFeatureFlagsProvider {
 
   @DoNotStrip public fun enableBridgelessArchitecture(): Boolean
 
+  @DoNotStrip public fun enableClipChildrenForOverflowHidden(): Boolean
+
   @DoNotStrip public fun enableCppPropsIteratorSetter(): Boolean
 
   @DoNotStrip public fun enableCustomFocusSearchOnClippedElementsAndroid(): Boolean

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.kt

@@ -819,6 +819,9 @@ public open class ReactViewGroup public constructor(context: Context?) :
           } else {
             Overflow.fromString(overflow)
           }
+      if (ReactNativeFeatureFlags.enableClipChildrenForOverflowHidden()) {
+        clipChildren = (_overflow == Overflow.HIDDEN)
+      }
       invalidate()
     }
 

packages/react-native/ReactAndroid/src/main/jni/react/featureflags/JReactNativeFeatureFlagsCxxInterop.cpp

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<e3d7f77795a066ffa164a02d74d7f4d1>>
+ * @generated SignedSource<<3c268f88d2df4ad8500e29b91f1fecc0>>
  */
 
 /**
@@ -129,6 +129,12 @@ class ReactNativeFeatureFlagsJavaProvider
     return method(javaProvider_);
   }
 
+  bool enableClipChildrenForOverflowHidden() override {
+    static const auto method =
+        getReactNativeFeatureFlagsProviderJavaClass()->getMethod<jboolean()>("enableClipChildrenForOverflowHidden");
+    return method(javaProvider_);
+  }
+
   bool enableCppPropsIteratorSetter() override {
     static const auto method =
         getReactNativeFeatureFlagsProviderJavaClass()->getMethod<jboolean()>("enableCppPropsIteratorSetter");
@@ -586,6 +592,11 @@ bool JReactNativeFeatureFlagsCxxInterop::enableBridgelessArchitecture(
   return ReactNativeFeatureFlags::enableBridgelessArchitecture();
 }
 
+bool JReactNativeFeatureFlagsCxxInterop::enableClipChildrenForOverflowHidden(
+    facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop> /*unused*/) {
+  return ReactNativeFeatureFlags::enableClipChildrenForOverflowHidden();
+}
+
 bool JReactNativeFeatureFlagsCxxInterop::enableCppPropsIteratorSetter(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop> /*unused*/) {
   return ReactNativeFeatureFlags::enableCppPropsIteratorSetter();
@@ -977,6 +988,9 @@ void JReactNativeFeatureFlagsCxxInterop::registerNatives() {
       makeNativeMethod(
         "enableBridgelessArchitecture",
         JReactNativeFeatureFlagsCxxInterop::enableBridgelessArchitecture),
+      makeNativeMethod(
+        "enableClipChildrenForOverflowHidden",
+        JReactNativeFeatureFlagsCxxInterop::enableClipChildrenForOverflowHidden),
       makeNativeMethod(
         "enableCppPropsIteratorSetter",
         JReactNativeFeatureFlagsCxxInterop::enableCppPropsIteratorSetter),

packages/react-native/ReactAndroid/src/main/jni/react/featureflags/JReactNativeFeatureFlagsCxxInterop.h

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<08d4a471097f96e6aecffe0d9fbd1e81>>
+ * @generated SignedSource<<cd6ac6eb0dff3dc55780c809041b76e4>>
  */
 
 /**
@@ -75,6 +75,9 @@ class JReactNativeFeatureFlagsCxxInterop
   static bool enableBridgelessArchitecture(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
 
+  static bool enableClipChildrenForOverflowHidden(
+    facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
+
   static bool enableCppPropsIteratorSetter(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
 

packages/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlags.cpp

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<ad0bd4c431f4f4d5658cb383bc5c16fa>>
+ * @generated SignedSource<<fbd62713d66b440e7c18498ccd2a7c0b>>
  */
 
 /**
@@ -86,6 +86,10 @@ bool ReactNativeFeatureFlags::enableBridgelessArchitecture() {
   return getAccessor().enableBridgelessArchitecture();
 }
 
+bool ReactNativeFeatureFlags::enableClipChildrenForOverflowHidden() {
+  return getAccessor().enableClipChildrenForOverflowHidden();
+}
+
 bool ReactNativeFeatureFlags::enableCppPropsIteratorSetter() {
   return getAccessor().enableCppPropsIteratorSetter();
 }