Formalize Text in JS as overflow: hidden by default (fixes overflow: visible text with props 2.0) (facebook#55553)

Summary:
Pull Request resolved: facebook#55553

RN components on the native side currently act like a mix of both overflow: hidden and overflow: visible, veering closer to the former in the ways that matter most.

PreparedLayoutTextView lets us implement this more correctly, and either clip text to padding box, or not clip the text at all.

For compat, PreparedLayoutTextView/PreparedLayoutTextViewManager defaulted to `overflow: hidden`. Props 2.0, broke this, since we need to see overflow state change in Fabric props, which defaults to Yoga blank style defaults (always `overflow: visible`).

The sanest solution I could find was to change Android native view to keep same defaults as Fabric style layer, then explicitly set `overflow: hidden` at the style layer, as the default behavior.

This does slightly change behavior, so that components which previously clipped at the bounding rect of their border box, now clip at their padding box. I.e. text will not be drawn over borders, or rounded corners, by default after this change.

Changelog:
[General][Changed] - Text is no longer drawn on top of borders by default
[General][Changed] - Text outside the bounds of a borderRadius is now hidden by default

Reviewed By: mdvacca

Differential Revision: D93324626

fbshipit-source-id: 955975f01ca0333dd135e236f26f5dab828a7491

Author: NickGerleman

packages/react-native/Libraries/Text/Text.js

@@ -14,10 +14,12 @@ import type {GestureResponderEvent} from '../Types/CoreEventTypes';
 import type {NativeTextProps} from './TextNativeComponent';
 import type {PressRetentionOffset, TextProps} from './TextProps';
 
+import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import * as PressabilityDebug from '../Pressability/PressabilityDebug';
 import usePressability from '../Pressability/usePressability';
 import flattenStyle from '../StyleSheet/flattenStyle';
 import processColor from '../StyleSheet/processColor';
+import StyleSheet from '../StyleSheet/StyleSheet';
 import Platform from '../Utilities/Platform';
 import TextAncestorContext from './TextAncestorContext';
 import {NativeText, NativeVirtualText} from './TextNativeComponent';
@@ -209,6 +211,10 @@ const TextImpl: component(
     }
   }
 
+  if (ReactNativeFeatureFlags.defaultTextToOverflowHidden()) {
+    _style = [styles.default, _style];
+  }
+
   const _nativeID = id ?? nativeID;
 
   if (_accessibilityLabel !== undefined) {
@@ -541,4 +547,13 @@ const verticalAlignToTextAlignVerticalMap = {
   middle: 'center',
 } as const;
 
+const styles = StyleSheet.create({
+  // Native components have historically acted like overflow: 'hidden'. We set
+  // this, as part of the default style, to let client differentiate with
+  // overflow: 'visible'.
+  default: {
+    overflow: 'hidden',
+  },
+});
+
 export default TextImpl;

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<<9a521f1f6989bb2735ae87d0a0c2f5fe>>
+ * @generated SignedSource<<e3509361f95f3681f0bb583da5540d31>>
  */
 
 /**
@@ -48,6 +48,12 @@ public object ReactNativeFeatureFlags {
   @JvmStatic
   public fun cxxNativeAnimatedEnabled(): Boolean = accessor.cxxNativeAnimatedEnabled()
 
+  /**
+   * When enabled, sets the default overflow style for Text components to hidden instead of visible.
+   */
+  @JvmStatic
+  public fun defaultTextToOverflowHidden(): Boolean = accessor.defaultTextToOverflowHidden()
+
   /**
    * Dispatch view commands in mount item order.
    */

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<<5a92af0a54f8aae7ba6f36a952c64df4>>
+ * @generated SignedSource<<ae86a1485b81df483dad1108b39fae31>>
  */
 
 /**
@@ -23,6 +23,7 @@ internal class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAcces
   private var commonTestFlagCache: Boolean? = null
   private var cdpInteractionMetricsEnabledCache: Boolean? = null
   private var cxxNativeAnimatedEnabledCache: Boolean? = null
+  private var defaultTextToOverflowHiddenCache: Boolean? = null
   private var disableEarlyViewCommandExecutionCache: Boolean? = null
   private var disableImageViewPreallocationAndroidCache: Boolean? = null
   private var disableMountItemReorderingAndroidCache: Boolean? = null
@@ -130,6 +131,15 @@ internal class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAcces
     return cached
   }
 
+  override fun defaultTextToOverflowHidden(): Boolean {
+    var cached = defaultTextToOverflowHiddenCache
+    if (cached == null) {
+      cached = ReactNativeFeatureFlagsCxxInterop.defaultTextToOverflowHidden()
+      defaultTextToOverflowHiddenCache = cached
+    }
+    return cached
+  }
+
   override fun disableEarlyViewCommandExecution(): Boolean {
     var cached = disableEarlyViewCommandExecutionCache
     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<<cabb5ba7c0486e777be721f6ff880d05>>
+ * @generated SignedSource<<b57dc37b228c3d622be039686ea11471>>
  */
 
 /**
@@ -34,6 +34,8 @@ public object ReactNativeFeatureFlagsCxxInterop {
 
   @DoNotStrip @JvmStatic public external fun cxxNativeAnimatedEnabled(): Boolean
 
+  @DoNotStrip @JvmStatic public external fun defaultTextToOverflowHidden(): Boolean
+
   @DoNotStrip @JvmStatic public external fun disableEarlyViewCommandExecution(): Boolean
 
   @DoNotStrip @JvmStatic public external fun disableImageViewPreallocationAndroid(): 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<<c302baa5e3dcdf6655da02cd9850e653>>
+ * @generated SignedSource<<9ae90142061f1ea0766058d9cf6f3dc6>>
  */
 
 /**
@@ -29,6 +29,8 @@ public open class ReactNativeFeatureFlagsDefaults : ReactNativeFeatureFlagsProvi
 
   override fun cxxNativeAnimatedEnabled(): Boolean = false
 
+  override fun defaultTextToOverflowHidden(): Boolean = false
+
   override fun disableEarlyViewCommandExecution(): Boolean = false
 
   override fun disableImageViewPreallocationAndroid(): Boolean = false

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<<07501a0c5936c8fe26a432d57c541d7e>>
+ * @generated SignedSource<<7d8e2872030e38ccb038d9d7aab214a2>>
  */
 
 /**
@@ -27,6 +27,7 @@ internal class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcc
   private var commonTestFlagCache: Boolean? = null
   private var cdpInteractionMetricsEnabledCache: Boolean? = null
   private var cxxNativeAnimatedEnabledCache: Boolean? = null
+  private var defaultTextToOverflowHiddenCache: Boolean? = null
   private var disableEarlyViewCommandExecutionCache: Boolean? = null
   private var disableImageViewPreallocationAndroidCache: Boolean? = null
   private var disableMountItemReorderingAndroidCache: Boolean? = null
@@ -137,6 +138,16 @@ internal class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcc
     return cached
   }
 
+  override fun defaultTextToOverflowHidden(): Boolean {
+    var cached = defaultTextToOverflowHiddenCache
+    if (cached == null) {
+      cached = currentProvider.defaultTextToOverflowHidden()
+      accessedFeatureFlags.add("defaultTextToOverflowHidden")
+      defaultTextToOverflowHiddenCache = cached
+    }
+    return cached
+  }
+
   override fun disableEarlyViewCommandExecution(): Boolean {
     var cached = disableEarlyViewCommandExecutionCache
     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<<34a625414f22a7c36ff9db90e76b1254>>
+ * @generated SignedSource<<460d442da5dc25a441b671e7b30e7e56>>
  */
 
 /**
@@ -29,6 +29,8 @@ public interface ReactNativeFeatureFlagsProvider {
 
   @DoNotStrip public fun cxxNativeAnimatedEnabled(): Boolean
 
+  @DoNotStrip public fun defaultTextToOverflowHidden(): Boolean
+
   @DoNotStrip public fun disableEarlyViewCommandExecution(): Boolean
 
   @DoNotStrip public fun disableImageViewPreallocationAndroid(): Boolean

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/PreparedLayoutTextView.kt

@@ -68,9 +68,7 @@ internal class PreparedLayoutTextView(context: Context) : ViewGroup(context), Re
       }
     }
 
-  // T221698007: This is closest to existing behavior, but does not align with web. We may want to
-  // change in the future if not too breaking.
-  var overflow: Overflow = Overflow.HIDDEN
+  var overflow: Overflow = Overflow.VISIBLE
     set(value) {
       if (field != value) {
         field = value
@@ -92,7 +90,7 @@ internal class PreparedLayoutTextView(context: Context) : ViewGroup(context), Re
 
   fun recycleView(): Unit {
     BackgroundStyleApplicator.reset(this)
-    overflow = Overflow.HIDDEN
+    overflow = Overflow.VISIBLE
     clickableSpans = emptyList()
     selection = null
     selectionColor = null

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/PreparedLayoutTextViewManager.kt

@@ -108,7 +108,7 @@ internal class PreparedLayoutTextViewManager :
 
   @ReactProp(name = "overflow")
   fun setOverflow(view: PreparedLayoutTextView, overflow: String?): Unit {
-    view.overflow = overflow?.let { Overflow.fromString(it) } ?: Overflow.HIDDEN
+    view.overflow = overflow?.let { Overflow.fromString(it) } ?: Overflow.VISIBLE
   }
 
   @ReactProp(name = "accessible")

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<<4471e7ab5f05b6b15c4e54e54d7c0fda>>
+ * @generated SignedSource<<8d00a6310e0fae475007f11fa56a5a6f>>
  */
 
 /**
@@ -57,6 +57,12 @@ class ReactNativeFeatureFlagsJavaProvider
     return method(javaProvider_);
   }
 
+  bool defaultTextToOverflowHidden() override {
+    static const auto method =
+        getReactNativeFeatureFlagsProviderJavaClass()->getMethod<jboolean()>("defaultTextToOverflowHidden");
+    return method(javaProvider_);
+  }
+
   bool disableEarlyViewCommandExecution() override {
     static const auto method =
         getReactNativeFeatureFlagsProviderJavaClass()->getMethod<jboolean()>("disableEarlyViewCommandExecution");
@@ -550,6 +556,11 @@ bool JReactNativeFeatureFlagsCxxInterop::cxxNativeAnimatedEnabled(
   return ReactNativeFeatureFlags::cxxNativeAnimatedEnabled();
 }
 
+bool JReactNativeFeatureFlagsCxxInterop::defaultTextToOverflowHidden(
+    facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop> /*unused*/) {
+  return ReactNativeFeatureFlags::defaultTextToOverflowHidden();
+}
+
 bool JReactNativeFeatureFlagsCxxInterop::disableEarlyViewCommandExecution(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop> /*unused*/) {
   return ReactNativeFeatureFlags::disableEarlyViewCommandExecution();
@@ -985,6 +996,9 @@ void JReactNativeFeatureFlagsCxxInterop::registerNatives() {
       makeNativeMethod(
         "cxxNativeAnimatedEnabled",
         JReactNativeFeatureFlagsCxxInterop::cxxNativeAnimatedEnabled),
+      makeNativeMethod(
+        "defaultTextToOverflowHidden",
+        JReactNativeFeatureFlagsCxxInterop::defaultTextToOverflowHidden),
       makeNativeMethod(
         "disableEarlyViewCommandExecution",
         JReactNativeFeatureFlagsCxxInterop::disableEarlyViewCommandExecution),