Fix changing font scale breaking text (#45978)

Summary:
Fixes #45857

The general idea behind this PR is the same for both platforms: dirty all nodes with `MeasurableYogaNode` trait when the layout is constrained with a new `fontSizeMultiplier`. There were a few caveats:
- `ParagraphShadowNode` marks its layout as clean in the constructor in most cases. To prevent that from using a stale measurement I'm using the font scale multiplier stored in `content_` property of the node. That value is then compared with the scale used to create the attributed string kept in the node's state. If those differ, the layout is not cleared.
- On Android, font scale wasn't passed down to the `SurfaceHandler`
- On Android, text measurement relies on cached `DisplayMetrics` which were not updated when the system font scale changed.
- `AndroidTextInputShadowNode` wasn't using `fontSizeMultiplier` at all. I needed to add it in all places where an `AttributedString` is constructed.

## Changelog:

[GENERAL] [FIXED] - Fixed text not updating correctly after changing font scale in settings


Test Plan:
So far tested on the following code:

```jsx
function App() {
  const [counter,setCounter] = useState(0);
  const [text,setText] = useState('TextInput');
  const [flag,setFlag] = useState(true);

  return (
    <SafeAreaView
        style={{
          flex: 1,
          backgroundColor: '#fff',
          alignItems: 'center',
          justifyContent: 'center',
        }}
    >
      <Text style={{fontSize: 24}}>RN 24 Label Testing {flag ? 'A' : 'B'}</Text>
      <TextInput value={text} onChangeText={setText} style={{fontSize: 24, borderWidth: 1}} placeholder="Placeholder" />
      <Pressable onPress={() => setCounter(prevState => prevState + 1)} style={{backgroundColor: counter % 2 === 0 ? 'red' : 'blue', width: 200, height: 50}} />
      <Pressable onPress={() => setFlag(!flag)} style={{backgroundColor: 'green', width: 200, height: 50}} />
    </SafeAreaView>
  );
}
```

Reviewed By: NickGerleman

Differential Revision: D71727907

Pulled By: j-piasecki

Author: j-piasecki

packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm

@@ -7,6 +7,7 @@
 
 #import "RCTTextInputComponentView.h"
 
+#import <react/featureflags/ReactNativeFeatureFlags.h>
 #import <react/renderer/components/iostextinput/TextInputComponentDescriptor.h>
 #import <react/renderer/textlayoutmanager/RCTAttributedTextUtils.h>
 #import <react/renderer/textlayoutmanager/TextLayoutManager.h>
@@ -123,6 +124,20 @@ - (void)didMoveToWindow
   [self _restoreTextSelection];
 }
 
+// TODO: replace with registerForTraitChanges once iOS 17.0 is the lowest supported version
+- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection
+{
+  [super traitCollectionDidChange:previousTraitCollection];
+
+  if (facebook::react::ReactNativeFeatureFlags::enableFontScaleChangesUpdatingLayout() &&
+      UITraitCollection.currentTraitCollection.preferredContentSizeCategory !=
+          previousTraitCollection.preferredContentSizeCategory) {
+    const auto &newTextInputProps = static_cast<const TextInputProps &>(*_props);
+    _backedTextInputView.defaultTextAttributes =
+        RCTNSTextAttributesFromTextAttributes(newTextInputProps.getEffectiveTextAttributes(RCTFontSizeMultiplier()));
+  }
+}
+
 - (void)reactUpdateResponderOffsetForScrollView:(RCTScrollViewComponentView *)scrollView
 {
   if (![self isDescendantOfView:scrollView.scrollView] || !_backedTextInputView.isFirstResponder) {

packages/react-native/ReactAndroid/api/ReactAndroid.api

@@ -6752,6 +6752,7 @@ public class com/facebook/react/views/textinput/ReactEditText : androidx/appcomp
 	public fun maybeSetTextFromState (Lcom/facebook/react/views/text/ReactTextUpdate;)V
 	public fun maybeUpdateTypeface ()V
 	public fun onAttachedToWindow ()V
+	public fun onConfigurationChanged (Landroid/content/res/Configuration;)V
 	public fun onCreateInputConnection (Landroid/view/inputmethod/EditorInfo;)Landroid/view/inputmethod/InputConnection;
 	public fun onDetachedFromWindow ()V
 	public fun onDraw (Landroid/graphics/Canvas;)V

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/fabric/SurfaceHandlerBinding.kt

@@ -41,7 +41,8 @@ internal open class SurfaceHandlerBinding(moduleName: String) : HybridClassBase(
       offsetY: Int,
       doLeftAndRightSwapInRTL: Boolean,
       isRTL: Boolean,
-      pixelDensity: Float
+      pixelDensity: Float,
+      fontScale: Float
   ) {
     setLayoutConstraintsNative(
         LayoutMetricsConversions.getMinSize(widthMeasureSpec) / pixelDensity,
@@ -52,7 +53,8 @@ internal open class SurfaceHandlerBinding(moduleName: String) : HybridClassBase(
         offsetY / pixelDensity,
         doLeftAndRightSwapInRTL,
         isRTL,
-        pixelDensity)
+        pixelDensity,
+        fontScale)
   }
 
   private external fun setLayoutConstraintsNative(
@@ -64,7 +66,8 @@ internal open class SurfaceHandlerBinding(moduleName: String) : HybridClassBase(
       offsetY: Float,
       doLeftAndRightSwapInRTL: Boolean,
       isRTL: Boolean,
-      pixelDensity: Float
+      pixelDensity: Float,
+      fontScale: Float
   )
 
   external fun setProps(props: NativeMap?)

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/runtime/ReactHostImpl.java

@@ -59,6 +59,7 @@
 import com.facebook.react.fabric.FabricUIManager;
 import com.facebook.react.interfaces.TaskInterface;
 import com.facebook.react.interfaces.fabric.ReactSurface;
+import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags;
 import com.facebook.react.internal.featureflags.ReactNativeNewArchitectureFeatureFlags;
 import com.facebook.react.modules.appearance.AppearanceModule;
 import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
@@ -68,6 +69,7 @@
 import com.facebook.react.runtime.internal.bolts.Task;
 import com.facebook.react.runtime.internal.bolts.TaskCompletionSource;
 import com.facebook.react.turbomodule.core.interfaces.CallInvokerHolder;
+import com.facebook.react.uimanager.DisplayMetricsHolder;
 import com.facebook.react.uimanager.UIManagerModule;
 import com.facebook.react.uimanager.events.BlackHoleEventDispatcher;
 import com.facebook.react.uimanager.events.EventDispatcher;
@@ -823,6 +825,10 @@ public void onNewIntent(Intent intent) {
   public void onConfigurationChanged(Context updatedContext) {
     ReactContext currentReactContext = getCurrentReactContext();
     if (currentReactContext != null) {
+      if (ReactNativeFeatureFlags.enableFontScaleChangesUpdatingLayout()) {
+        DisplayMetricsHolder.initDisplayMetrics(currentReactContext);
+      }
+
       AppearanceModule appearanceModule =
           currentReactContext.getNativeModule(AppearanceModule.class);
 

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/runtime/ReactSurfaceImpl.kt

@@ -22,6 +22,7 @@ import com.facebook.react.common.annotations.VisibleForTesting
 import com.facebook.react.fabric.SurfaceHandlerBinding
 import com.facebook.react.interfaces.TaskInterface
 import com.facebook.react.interfaces.fabric.ReactSurface
+import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags
 import com.facebook.react.modules.i18nmanager.I18nUtil
 import com.facebook.react.runtime.internal.bolts.Task
 import com.facebook.react.uimanager.events.EventDispatcher
@@ -75,7 +76,8 @@ internal constructor(
         0,
         doRTLSwap(context),
         isRTL(context),
-        displayMetrics.density)
+        displayMetrics.density,
+        getFontScale(context))
   }
 
   /**
@@ -176,7 +178,8 @@ internal constructor(
         offsetY,
         doRTLSwap(context),
         isRTL(context),
-        context.resources.displayMetrics.density)
+        context.resources.displayMetrics.density,
+        getFontScale(context))
   }
 
   internal val eventDispatcher: EventDispatcher?
@@ -203,6 +206,11 @@ internal constructor(
 
     private fun isRTL(context: Context): Boolean = I18nUtil.instance.isRTL(context)
 
+    private fun getFontScale(context: Context): Float =
+        if (ReactNativeFeatureFlags.enableFontScaleChangesUpdatingLayout())
+            context.getResources().getConfiguration().fontScale
+        else 1f
+
     private fun doRTLSwap(context: Context): Boolean =
         I18nUtil.instance.doLeftAndRightSwapInRTL(context)
   }

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java

@@ -10,6 +10,7 @@
 import static com.facebook.react.uimanager.UIManagerHelper.getReactContext;
 
 import android.content.Context;
+import android.content.res.Configuration;
 import android.graphics.Canvas;
 import android.graphics.Color;
 import android.graphics.Paint;
@@ -51,6 +52,7 @@
 import com.facebook.react.common.ReactConstants;
 import com.facebook.react.common.build.ReactBuildConfig;
 import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags;
+import com.facebook.react.internal.featureflags.ReactNativeNewArchitectureFeatureFlags;
 import com.facebook.react.uimanager.BackgroundStyleApplicator;
 import com.facebook.react.uimanager.LengthPercentage;
 import com.facebook.react.uimanager.LengthPercentageType;
@@ -1080,6 +1082,16 @@ public void onStartTemporaryDetach() {
     }
   }
 
+  @Override
+  public void onConfigurationChanged(Configuration newConfig) {
+    super.onConfigurationChanged(newConfig);
+
+    if (ReactNativeNewArchitectureFeatureFlags.enableBridgelessArchitecture()
+        && ReactNativeFeatureFlags.enableFontScaleChangesUpdatingLayout()) {
+      applyTextAttributes();
+    }
+  }
+
   @Override
   public void onAttachedToWindow() {
     super.onAttachedToWindow();

packages/react-native/ReactAndroid/src/main/jni/react/fabric/SurfaceHandlerBinding.cpp

@@ -47,7 +47,8 @@ void SurfaceHandlerBinding::setLayoutConstraints(
     jfloat offsetY,
     jboolean doLeftAndRightSwapInRTL,
     jboolean isRTL,
-    jfloat pixelDensity) {
+    jfloat pixelDensity,
+    jfloat fontScale) {
   LayoutConstraints constraints = {};
   constraints.minimumSize = {minWidth, minHeight};
   constraints.maximumSize = {maxWidth, maxHeight};
@@ -58,6 +59,7 @@ void SurfaceHandlerBinding::setLayoutConstraints(
   context.swapLeftAndRightInRTL = doLeftAndRightSwapInRTL;
   context.pointScaleFactor = pixelDensity;
   context.viewportOffset = {offsetX, offsetY};
+  context.fontSizeMultiplier = fontScale;
 
   surfaceHandler_.constraintLayout(constraints, context);
 }

packages/react-native/ReactAndroid/src/main/jni/react/fabric/SurfaceHandlerBinding.h

@@ -40,7 +40,8 @@ class SurfaceHandlerBinding : public jni::HybridClass<SurfaceHandlerBinding> {
       jfloat offsetY,
       jboolean doLeftAndRightSwapInRTL,
       jboolean isRTL,
-      jfloat pixelDensity);
+      jfloat pixelDensity,
+      jfloat fontScale);
 
   void setProps(NativeMap* props);
 

packages/react-native/ReactAndroid/src/test/java/com/facebook/react/runtime/ReactSurfaceTest.kt

@@ -12,6 +12,9 @@ import android.content.Context
 import android.view.View
 import com.facebook.react.common.annotations.UnstableReactNativeAPI
 import com.facebook.react.fabric.SurfaceHandlerBinding
+import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags
+import com.facebook.react.internal.featureflags.ReactNativeFeatureFlagsForTests
+import com.facebook.react.internal.featureflags.ReactNativeNewArchitectureFeatureFlagsDefaults
 import com.facebook.react.runtime.internal.bolts.Task
 import com.facebook.react.uimanager.events.EventDispatcher
 import com.facebook.testutils.shadows.ShadowNativeLoader
@@ -44,6 +47,9 @@ class ReactSurfaceTest {
 
   @Before
   fun setUp() {
+    ReactNativeFeatureFlagsForTests.setUp()
+    ReactNativeFeatureFlags.override(ReactNativeNewArchitectureFeatureFlagsDefaults())
+
     eventDispatcher = mock()
     context = Robolectric.buildActivity(Activity::class.java).create().get()
 
@@ -122,7 +128,7 @@ class ReactSurfaceTest {
     reactSurface.attach(reactHost)
     reactSurface.updateLayoutSpecs(measureSpecWidth, measureSpecHeight, 2, 3)
     verify(surfaceHandler)
-        .setLayoutConstraints(measureSpecWidth, measureSpecHeight, 2, 3, true, false, 1.0f)
+        .setLayoutConstraints(measureSpecWidth, measureSpecHeight, 2, 3, true, false, 1.0f, 1.0f)
   }
 
   @Test

packages/react-native/ReactCommon/react/renderer/components/text/ParagraphShadowNode.cpp

@@ -10,6 +10,7 @@
 #include <cmath>
 
 #include <react/debug/react_native_assert.h>
+#include <react/featureflags/ReactNativeFeatureFlags.h>
 #include <react/renderer/attributedstring/AttributedStringBox.h>
 #include <react/renderer/components/view/ViewShadowNode.h>
 #include <react/renderer/components/view/conversions.h>
@@ -31,8 +32,18 @@ ParagraphShadowNode::ParagraphShadowNode(
     : ConcreteViewShadowNode(sourceShadowNode, fragment) {
   auto& sourceParagraphShadowNode =
       static_cast<const ParagraphShadowNode&>(sourceShadowNode);
+  auto& state = getStateData();
+  const auto& sourceContent = sourceParagraphShadowNode.content_;
+
   if (!fragment.children && !fragment.props &&
-      sourceParagraphShadowNode.getIsLayoutClean()) {
+      sourceParagraphShadowNode.getIsLayoutClean() &&
+      (!ReactNativeFeatureFlags::enableFontScaleChangesUpdatingLayout() ||
+       (sourceContent.has_value() &&
+        sourceContent.value()
+                .attributedString.getBaseTextAttributes()
+                .fontSizeMultiplier ==
+            state.attributedString.getBaseTextAttributes()
+                .fontSizeMultiplier))) {
     // This ParagraphShadowNode was cloned but did not change
     // in a way that affects its layout. Let's mark it clean
     // to stop Yoga from traversing it.

packages/react-native/ReactCommon/react/renderer/components/textinput/BaseTextInputShadowNode.h

@@ -193,7 +193,10 @@ class BaseTextInputShadowNode : public ConcreteViewShadowNode<
       const LayoutContext& layoutContext) const {
     bool meaningfulState = BaseShadowNode::getState() &&
         BaseShadowNode::getState()->getRevision() !=
-            State::initialRevisionValue;
+            State::initialRevisionValue &&
+        BaseShadowNode::getStateData()
+                .reactTreeAttributedString.getBaseTextAttributes()
+                .fontSizeMultiplier == layoutContext.fontSizeMultiplier;
     if (meaningfulState) {
       const auto& stateData = BaseShadowNode::getStateData();
       auto attributedStringBox = stateData.attributedStringBox;

packages/react-native/ReactCommon/react/renderer/components/textinput/platform/android/react/renderer/components/androidtextinput/AndroidTextInputShadowNode.cpp

@@ -47,10 +47,11 @@ Size AndroidTextInputShadowNode::measureContent(
   // in layout, it's too late: measure will have already operated on old
   // State. Thus, we use the same value here that we *will* use in layout to
   // update the state.
-  AttributedString attributedString = getMostRecentAttributedString();
+  AttributedString attributedString =
+      getMostRecentAttributedString(layoutContext);
 
   if (attributedString.isEmpty()) {
-    attributedString = getPlaceholderAttributedString();
+    attributedString = getPlaceholderAttributedString(layoutContext);
   }
 
   if (attributedString.isEmpty() && getStateData().mostRecentEventCount != 0) {
@@ -70,17 +71,18 @@ Size AndroidTextInputShadowNode::measureContent(
 }
 
 void AndroidTextInputShadowNode::layout(LayoutContext layoutContext) {
-  updateStateIfNeeded();
+  updateStateIfNeeded(layoutContext);
   ConcreteViewShadowNode::layout(layoutContext);
 }
 
 Float AndroidTextInputShadowNode::baseline(
-    const LayoutContext& /*layoutContext*/,
+    const LayoutContext& layoutContext,
     Size size) const {
-  AttributedString attributedString = getMostRecentAttributedString();
+  AttributedString attributedString =
+      getMostRecentAttributedString(layoutContext);
 
   if (attributedString.isEmpty()) {
-    attributedString = getPlaceholderAttributedString();
+    attributedString = getPlaceholderAttributedString(layoutContext);
   }
 
   // Yoga expects a baseline relative to the Node's border-box edge instead of
@@ -118,10 +120,11 @@ LayoutConstraints AndroidTextInputShadowNode::getTextConstraints(
   }
 }
 
-void AndroidTextInputShadowNode::updateStateIfNeeded() {
+void AndroidTextInputShadowNode::updateStateIfNeeded(
+    const LayoutContext& layoutContext) {
   ensureUnsealed();
   const auto& stateData = getStateData();
-  auto reactTreeAttributedString = getAttributedString();
+  auto reactTreeAttributedString = getAttributedString(layoutContext);
 
   // Tree is often out of sync with the value of the TextInput.
   // This is by design - don't change the value of the TextInput in the State,
@@ -145,7 +148,7 @@ void AndroidTextInputShadowNode::updateStateIfNeeded() {
                            reactTreeAttributedString)
       ? 0
       : props.mostRecentEventCount;
-  auto newAttributedString = getMostRecentAttributedString();
+  auto newAttributedString = getMostRecentAttributedString(layoutContext);
 
   setStateData(TextInputState{
       AttributedStringBox(newAttributedString),
@@ -154,9 +157,11 @@ void AndroidTextInputShadowNode::updateStateIfNeeded() {
       newEventCount});
 }
 
-AttributedString AndroidTextInputShadowNode::getAttributedString() const {
+AttributedString AndroidTextInputShadowNode::getAttributedString(
+    const LayoutContext& layoutContext) const {
   // Use BaseTextShadowNode to get attributed string from children
   auto childTextAttributes = TextAttributes::defaultTextAttributes();
+  childTextAttributes.fontSizeMultiplier = layoutContext.fontSizeMultiplier;
   childTextAttributes.apply(getConcreteProps().textAttributes);
   // Don't propagate the background color of the TextInput onto the attributed
   // string. Android tries to render shadow of the background alongside the
@@ -174,6 +179,7 @@ AttributedString AndroidTextInputShadowNode::getAttributedString() const {
   if (!getConcreteProps().text.empty()) {
     auto textAttributes = TextAttributes::defaultTextAttributes();
     textAttributes.apply(getConcreteProps().textAttributes);
+    textAttributes.fontSizeMultiplier = layoutContext.fontSizeMultiplier;
     auto fragment = AttributedString::Fragment{};
     fragment.string = getConcreteProps().text;
     fragment.textAttributes = textAttributes;
@@ -188,11 +194,11 @@ AttributedString AndroidTextInputShadowNode::getAttributedString() const {
   return attributedString;
 }
 
-AttributedString AndroidTextInputShadowNode::getMostRecentAttributedString()
-    const {
+AttributedString AndroidTextInputShadowNode::getMostRecentAttributedString(
+    const LayoutContext& layoutContext) const {
   const auto& state = getStateData();
 
-  auto reactTreeAttributedString = getAttributedString();
+  auto reactTreeAttributedString = getAttributedString(layoutContext);
 
   // Sometimes the treeAttributedString will only differ from the state
   // not by inherent properties (string or prop attributes), but by the frame of
@@ -213,15 +219,16 @@ AttributedString AndroidTextInputShadowNode::getMostRecentAttributedString()
 // display at all.
 // TODO T67606511: We will redefine the measurement of empty strings as part
 // of T67606511
-AttributedString AndroidTextInputShadowNode::getPlaceholderAttributedString()
-    const {
+AttributedString AndroidTextInputShadowNode::getPlaceholderAttributedString(
+    const LayoutContext& layoutContext) const {
   const auto& props = BaseShadowNode::getConcreteProps();
 
   AttributedString attributedString;
   auto placeholderString = !props.placeholder.empty()
       ? props.placeholder
       : BaseTextShadowNode::getEmptyPlaceholder();
   auto textAttributes = TextAttributes::defaultTextAttributes();
+  textAttributes.fontSizeMultiplier = layoutContext.fontSizeMultiplier;
   textAttributes.apply(props.textAttributes);
   attributedString.appendFragment(
       {.string = std::move(placeholderString),