SIGN IN SIGN UP
facebook / react-native UNCLAIMED

A framework for building native applications using React

0 0 0 C++

Fix KeyboardAvoidingView not aware of the keyboard closing after it is unmounted (#46952)

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 https://github.com/facebook/react-native/issues/46942

## Changelog:

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

Pull Request resolved: https://github.com/facebook/react-native/pull/46952

Test Plan:
Code to reproduce in RNTester:

```JSX
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
-- | --
<video src="https://github.com/user-attachments/assets/0c8d840e-14a6-47ad-a163-d34ac9cfbf40" /> | <video src="https://github.com/user-attachments/assets/1d88a70c-e029-433d-920d-da7582edb3f2" />

#### Android

Before | After
-- | --
<video src="https://github.com/user-attachments/assets/f29f6526-c5a4-4b6a-b3aa-7c4c7ff3ed30" /> | <video src="https://github.com/user-attachments/assets/c4e92356-694b-4fca-8897-7dfca8495db0" />

Reviewed By: andrewdacenko

Differential Revision: D64178982

Pulled By: cipolleschi

fbshipit-source-id: 8d71654aac599cec4e1928b14d87cff34f28174a
Q
Qichen Zhu committed
08bd8ac47da60121225e7b281bbf566e2c5a291e
Parent: 2c9176a
Committed by Facebook GitHub Bot <[email protected]> on 10/15/2024, 3:03:13 PM