Mark Text dirty when descendant Text updates occur

[rozele]

Description

Type of Change

Erase all that don't apply.

• Bug fix (non-breaking change which fixes an issue)

Why

Text should be marked dirty when descendant text nodes are added or removed, and Text should also be marked dirty when descendants of descendant virtual text nodes have changes to their text content.

Resolves #11007

What

This change ensures that the Yoga node for Text is appropriately updated when these types of changes occur.

Please note, this is likely to create a slight performance regression for apps that modify nested text content after initial mount, as these changes previously would not trigger text measurement, and now they will. But it's worthwhile to trade correctness for a minor performance benefit.

Testing

Ran a test in simple.tsx:

import React, {useState} from 'react';
import {AppRegistry, Text, View} from 'react-native';

function Test() {
  const [toggled, setToggled] = useState(false);
  return (
    <>
      <Text onPress={() => setToggled(!toggled)}>Click Me</Text>
      <View style={{width: 50}}>
        <Text>{toggled ? <>hello world</> : null}</Text>
      </View>
    </>
  );
}

AppRegistry.registerComponent('Bootstrap', () => Test);

Text is now remeasured when descendant virtual or raw text is updated:

React.Native.Playground.Win32.2022-12-13.12-46-20.mp4

Here is the before:

React.Native.Playground.Win32.2022-12-13.13-24-40.mp4

Microsoft Reviewers: Open in CodeFlow

[chiaramooney]

👍

[rozele]

Please note, this is perhaps a breaking change (even though it fixes a bug), at least according to Hyrum's law 😀. For example, if someone previously depended on the fact that the Text does not remeasure to multiple lines or fewer lines after a commit that changes the text content, then the layout of their application might be different. I don't want to label it as breaking because this is a Windows only bug, so assuming most React Native apps are cross-platform, they would have already set the correct props to limit the numberOfLines for the Text component. But, it's a change in behavior that folks upgrading might want to be aware of.