Fix changing font scale breaking text

[j-piasecki]

Summary:

Fixes #45857

General idea behind this PR is the same for both platforms: listen for the system font scale change and update the state of components displaying text (Text and TextInput) in a way that will dirty their layout. This will cause Yoga to measure them again using the new font scale and update layout if necessary. I'm not convinced about using native state to accomplish this, but I don't see any other simple way to cause a shadow tree commit from the host view.

On iOS this is achieved using traitCollectionDidChange listener, which then updates the native state. Since the fontScaleMultiplier is already updated on iOS this is enough to fix the problem there.

On Android the problem is more complicated: fontScaleMultiplier is not set/used at all, instead text measurement is done entirely on the host side using DisplayMetrics. The display metrics weren't updated on the font scale change, which is the first thing this PR is addressing by adding checkForFontScaleChanges to ReactRootView.
The second thing is analogous to iOS - it uses a broadcast receiver to listen for ACTION_CONFIGURATION_CHANGED, which in turn triggers the native state update dirtying the shadow nodes displaying text. On Android, it's also necessary to clean the text measurement caches. Since fontScaleMultiplier doesn't change, the cache keys are constant between changes to the system font scale, which causes wrong measurements being reused.

The Android part needs some polishing - the broadcast receiver shouldn't be necessary at all, since the update could be triggered inside the checkForFontScaleChanges method, but that may be tricky to figure out due to timings of when the views are mounted/unmounted. Before digging more into this I wanted to make sure this approach is acceptable.

Changelog:

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

Test Plan:

So far tested on the following code:

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

[facebook-github-bot]

@coado has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.