fix(Android): onContentSizeChanged is called multiple times If TextInput is in the Modal on Fabric

[coado]

Summary:

Fixes #47186

The modal size is updated asynchronously, so the Yoga doesn't know about its size on the initial render. The effect is that children of the modal are sized differently before and after the state is updated. Whenever the size of the TextInput changes it invokes onContentSizeChangedcallback in onLayout and we want it to happen only once.

The fix introduces setting display frame sizes before the initial render in ModalHostViewState similarly to how it is done on iOS. I am not sure if the new getDisplaySizes function should be added to FabricUIManager so I would love to get some guidance here. Also I found that there is getModalHostSize function that is not used anywhere. I've tried to use it but it returns incorrect values after rotating the phone.

The same issue happens on the old architecture, but I will try to make a separate PR with the fix.

Changelog:

[ANDROID] [FIXED] - onContentSizeChanged callback is invoked only once on TextInput located inside the Modal during the mounting on Fabric.

Test Plan:

I've tested with enabled/disabled statusBarTranslucent, with rotating the phone, and on split screen

code

import {Button, Modal, SafeAreaView, StyleSheet, TextInput} from 'react-native';
import React, {useState} from 'react';

export default function App() {
  const [modal, setModal] = useState(false);

  return (
    <SafeAreaView style={styles.container}>
      <Button onPress={() => setModal(true)} title="Show modal" />
      <Modal
        // statusBarTranslucent={true}
        visible={modal}
      >
        <TextInput
          multiline
          onContentSizeChange={e =>
            console.log("inside: ", e.nativeEvent.contentSize.height)
          }
          style={[styles.textInput, styles.textInputModal]}
        />
        <Button onPress={() => setModal(false)} title="Hide modal" />
      </Modal>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#d1f0f1',
    flex: 1,
    justifyContent: 'center',
    padding: 8,
  },
  textInput: {
    backgroundColor: 'gray',
  },
  textInputModal: {
    marginTop: 100,
  },
});