Fix KeyboardAvoidingView not aware of the keyboard closing after it is unmounted

[QichenZhu]

Summary:

In the new architecture, if you open the soft keyboard, unmount KeyboardAvoidingView, close the keyboard, and then remount KeyboardAvoidingView, it still assumes the keyboard is open and displays the keyboard avoiding area.

We need to check if the keyboard is still open after remounting.

Fixes #46942

Changelog:

[GENERAL] [FIXED] - Fix KeyboardAvoidingView not aware of the keyboard closing it is unmounted

Test Plan:

Code to reproduce in RNTester:

import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
import {Button, KeyboardAvoidingView, Text, TextInput, View} from 'react-native';
import {Fragment, Suspense, useState} from "react";

const infiniteThenable = { then() {} };

function Suspender({ freeze, children }) {
  if (freeze) {
    throw infiniteThenable;
  }
  return <Fragment>{children}</Fragment>;
}

function Freeze({ freeze, children }) {
  return (
    <Suspense>
      <Suspender freeze={freeze}>{children}</Suspender>
    </Suspense>
  );
}

function Playground() {
  const [isFrozen, setIsFrozen] = useState(false);

  return (
    <>
      <TextInput style={{ height: 100 }} />
      <Button title="Freeze" onPress={() => setIsFrozen(true)} />
      <Button title="Unfreeze" onPress={() => setIsFrozen(false)} />

      <Freeze freeze={isFrozen}>
        <KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
          <View style={{ backgroundColor: '#909090', flex: 1, alignItems: 'center', justifyContent: 'flex-end' }}>
            <Text>Test</Text>
            <Text></Text>
          </View>
        </KeyboardAvoidingView>
      </Freeze>
    </>
  );
}

export default ({
  title: 'Playground',
  name: 'playground',
  render: (): React.Node => <Playground />,
}: RNTesterModuleExample);

Steps

1. Tap the text input to show the soft keyboard.
2. Tap Freeze.
3. Tap the Enter or Done button on the soft keyboard to hide it.
4. Tap Unfreeze.
5. Verify that there is no blank area at the bottom of the screen.

Videos

iOS

Before	After
before.mp4	after.mp4

Android

Before	After
before-2024-10-11_01.15.28.mp4	after-2024-10-11_01.13.00.mp4

[cipolleschi]

Thanks @QichenZhu for fixing this issue!

[facebook-github-bot]

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

[facebook-github-bot]

@cipolleschi merged this pull request in 08bd8ac.

[react-native-bot]

This pull request was successfully merged by @QichenZhu in 08bd8ac

^{When will my fix make it into a release? | How to file a pick request?}