fix(Android): avoid race condition related to state on the new arch

[j-piasecki]

Description

Fixes a race condition that is causing the layout of the screen to be wrong when the window size is changed. The flow before this change was:

• window changes size (in this case keyboard is opened)
• layout is done, onLayout gets called in the Screen class
• frame is different than the one in the current state (window height is reduced by the keyboard's height)
• native state is updated asynchronously
• window changes size again (in this case keyboard is closed)
• layout is done, onLayout gets called in the Screen class
• since the native state update hasn't been applied yet at this point, the new frame is the same as the one stored in the native state, native state update is skipped
• native state update is applied (the one with reduced height), shadow node size gets changed

Changes

• Fixed a race condition that resulted in the screen's children having wrong dimensions when the window size was changed

Before

Screen.Recording.2024-01-31.at.16.40.06.mov

After

Screen.Recording.2024-01-31.at.16.40.59.mov

(You may need to look at this one frame-by-frame. In some cases there is one frame where the layout looks like in the before video, but it gets corrected after.

Test code and steps to reproduce

import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import React, {useRef} from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {Button, TextInput, View} from 'react-native';

const Stack = createStackNavigator();

function Thing() {
  const ref = useRef(null);

  return (
    <View style={{flex: 1, backgroundColor: 'wheat'}}>
      <TextInput
        ref={ref}
        style={{backgroundColor: 'white', borderWidth: 1, borderColor: 'black'}}
      />
      <Button
        title="do the thing"
        onPress={() => {
          ref.current?.focus();

          setTimeout(() => {
            ref.current?.blur();
          }, 30);
        }}
      />
    </View>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Thing} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Checklist

• Included code example that can be used to test this change
• Ensured that CI passes