Fix changing font scale breaking text (facebook#45978)

Summary:
Fixes facebook#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've added a `fontSizeMultiplier_` field in the node that keeps track of the font scale it was last laid out with. 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.
- When the `fontSizeMultiplier` is changed, the entire `ShadowTree` is cloned. I'm not sure if there's a reliable way of determining whether the node is mutable or not.
- Changing font scale and navigating back to the app on Android has the potential to cause a `SIGSEGV` but it also happens without changes in this PR.

## Changelog:

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

Pull Request resolved: facebook#45978

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>
  );
}
```

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/src/main/java/com/facebook/react/fabric/SurfaceHandlerBinding.kt

@@ -42,7 +42,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,
@@ -53,7 +54,8 @@ internal open class SurfaceHandlerBinding(moduleName: String) : HybridClassBase(
         offsetY / pixelDensity,
         doLeftAndRightSwapInRTL,
         isRTL,
-        pixelDensity)
+        pixelDensity,
+        fontScale)
   }
 
   private external fun setLayoutConstraintsNative(
@@ -65,7 +67,8 @@ internal open class SurfaceHandlerBinding(moduleName: String) : HybridClassBase(
       offsetY: Float,
       doLeftAndRightSwapInRTL: Boolean,
       isRTL: Boolean,
-      pixelDensity: Float
+      pixelDensity: Float,
+      fontScale: Float
   )
 
   external override fun setProps(props: NativeMap)

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

@@ -33,7 +33,8 @@ public interface SurfaceHandler {
       offsetY: Int,
       doLeftAndRightSwapInRTL: Boolean,
       isRTL: Boolean,
-      pixelDensity: Float
+      pixelDensity: Float,
+      fontScale: Float
   )
 
   public fun setMountable(mountable: Boolean)

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

@@ -69,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;
@@ -828,6 +829,7 @@ public void onNewIntent(Intent intent) {
   public void onConfigurationChanged(Context updatedContext) {
     ReactContext currentReactContext = getCurrentReactContext();
     if (currentReactContext != null) {
+      DisplayMetricsHolder.initDisplayMetrics(currentReactContext);
       AppearanceModule appearanceModule =
           currentReactContext.getNativeModule(AppearanceModule.class);
 

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

@@ -26,6 +26,7 @@
 import com.facebook.react.interfaces.TaskInterface;
 import com.facebook.react.interfaces.fabric.ReactSurface;
 import com.facebook.react.interfaces.fabric.SurfaceHandler;
+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;
@@ -80,7 +81,8 @@ public ReactSurfaceImpl(Context context, String moduleName, @Nullable Bundle ini
         0,
         doRTLSwap(context),
         isRTL(context),
-        getPixelDensity(context));
+        getPixelDensity(context),
+        getFontScale(context));
   }
 
   @VisibleForTesting
@@ -214,7 +216,8 @@ public void clear() {
         offsetY,
         doRTLSwap(mContext),
         isRTL(mContext),
-        getPixelDensity(mContext));
+        getPixelDensity(mContext),
+        getFontScale(mContext));
   }
 
   /* package */ @Nullable
@@ -245,6 +248,14 @@ private static float getPixelDensity(Context context) {
     return context.getResources().getDisplayMetrics().density;
   }
 
+  private static float getFontScale(Context context) {
+    if (ReactNativeFeatureFlags.enableFontScaleChangesUpdatingLayout()) {
+      return context.getResources().getConfiguration().fontScale;
+    }
+
+    return 1f;
+  }
+
   private static boolean isRTL(Context context) {
     return I18nUtil.getInstance().isRTL(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;
@@ -1080,6 +1081,16 @@ public void onStartTemporaryDetach() {
     }
   }
 
+  @Override
+  public void onConfigurationChanged(Configuration newConfig) {
+    super.onConfigurationChanged(newConfig);
+
+    if (ReactNativeFeatureFlags.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

@@ -178,7 +178,8 @@ class ReactSurfaceTest {
         offsetY: Int,
         doLeftAndRightSwapInRTL: Boolean,
         isRTL: Boolean,
-        pixelDensity: Float
+        pixelDensity: Float,
+        fontScale: Float
     ) {
       this.widthMeasureSpec = widthMeasureSpec
       this.heightMeasureSpec = heightMeasureSpec

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,14 @@ ParagraphShadowNode::ParagraphShadowNode(
     : ConcreteViewShadowNode(sourceShadowNode, fragment) {
   auto& sourceParagraphShadowNode =
       static_cast<const ParagraphShadowNode&>(sourceShadowNode);
+  auto& state = getStateData();
+  fontSizeMultiplier_ = sourceParagraphShadowNode.fontSizeMultiplier_;
+
   if (!fragment.children && !fragment.props &&
-      sourceParagraphShadowNode.getIsLayoutClean()) {
+      sourceParagraphShadowNode.getIsLayoutClean() &&
+      (!ReactNativeFeatureFlags::enableFontScaleChangesUpdatingLayout() ||
+       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.
@@ -202,6 +209,7 @@ void ParagraphShadowNode::layout(LayoutContext layoutContext) {
       getContentWithMeasuredAttachments(layoutContext, layoutConstraints);
 
   updateStateIfNeeded(content);
+  fontSizeMultiplier_ = layoutContext.fontSizeMultiplier;
 
   TextLayoutContext textLayoutContext{};
   textLayoutContext.pointScaleFactor = layoutContext.pointScaleFactor;

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

@@ -108,6 +108,11 @@ class ParagraphShadowNode final : public ConcreteViewShadowNode<
    * Cached content of the subtree started from the node.
    */
   mutable std::optional<Content> content_{};
+
+  /*
+   * FontSizeMultiplier that was used to layout this node.
+   */
+  mutable float fontSizeMultiplier_{};
 };
 
 } // namespace facebook::react

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),

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

@@ -70,19 +70,22 @@ class AndroidTextInputShadowNode final
    * Creates a `State` object (with `AttributedText` and
    * `TextLayoutManager`) if needed.
    */
-  void updateStateIfNeeded();
+  void updateStateIfNeeded(const LayoutContext& layoutContext);
 
   /*
    * Returns a `AttributedString` which represents text content of the node.
    */
-  AttributedString getAttributedString() const;
+  AttributedString getAttributedString(
+      const LayoutContext& layoutContext) const;
 
   /**
    * Get the most up-to-date attributed string for measurement and State.
    */
-  AttributedString getMostRecentAttributedString() const;
+  AttributedString getMostRecentAttributedString(
+      const LayoutContext& layoutContext) const;
 
-  AttributedString getPlaceholderAttributedString() const;
+  AttributedString getPlaceholderAttributedString(
+      const LayoutContext& layoutContext) const;
 };
 
 } // namespace facebook::react