Summary:
The `onLayout` handler of the `KeyboardAvoidingView` view is async due to the `await AccessibilityInfo.prefersCrossFadeTransitions` in `_relativeKeyboardHeight`.
A connected `onLayout` handler will be unable to access the event. Call `persist()` on the event so that it can be accessed asynchronously.
## Changelog:
[GENERAL] [FIXED] - Accessing KeyboardAvoidingEvent event in onLayout handler
Pull Request resolved: https://github.com/facebook/react-native/pull/47798
Test Plan:
The following should not produce an error:
```
import * as React from 'react';
import {
KeyboardAvoidingView,
SafeAreaView,
TextInput
} from 'react-native';
export default function() {
return (
<SafeAreaView>
<KeyboardAvoidingView onLayout={(event) => console.log(event)} behavior="padding">
<TextInput />
</KeyboardAvoidingView>
</SafeAreaView>
);
}
```
Reviewed By: cipolleschi
Differential Revision: D66306085
Pulled By: dmytrorykun
fbshipit-source-id: 9ccf00db79947670ddc7de74a47cc6dc27455fc0
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
Summary:
On iPadOS, users can change the kind of keyboard displayed onscreen, going from normal keyboard, to split keyboard (one half on the left of the screen, one half on the right), or a floating keyboard that you can move around the screen.
When a non-normal kind of keyboard is used, `<KeyboardAvoidingView>` calculations are all wrong and, depending on the `behavior` prop, can make your screen completely hidden.
This PR attempts to detect that the keyboard is not the "normal displayed-at-bottom-of-screen" keyboard, and forces `enable={false}` if this happens.
The approach of comparing the keyboard width with the window width comes from this comment: https://github.com/facebook/react-native/issues/29473#issuecomment-696658937
A better fix might be to detect the kind of keyboard used, but this involves native code changes and I do not know iOS enough to do that. In addition, I have not found an easy way to do it using iOS APIs after a quick search.
I also chose to cache the window width as a class attribute. Maybe this is not needed as `Dimensions.get('window').width` is very fast and can be called on every keyboard event?
This fixes https://github.com/facebook/react-native/issues/44068 and https://github.com/facebook/react-native/issues/29473
## Changelog:
[IOS] [FIXED] - Fix `<KeyboardAvoidingView>` with floating keyboard on iPadOS
Pull Request resolved: https://github.com/facebook/react-native/pull/44859
Test Plan:
Tested using RNTester and the "Keyboard Avoiding View with different behaviors" example.
Before:
https://github.com/facebook/react-native/assets/42070/111598a3-286c-464d-8db8-73afb35cd7f9
After:
https://github.com/facebook/react-native/assets/42070/0b3bc94f-8b67-4f42-8a83-e11555080268
Reviewed By: cortinico
Differential Revision: D62844854
Pulled By: cipolleschi
fbshipit-source-id: 577444be50019572955a013969d78178914b5b8d
Summary:
There are two reasons to apply these changes:
- We don't need to re-render the `KeyboardAvoidingView` if it is disabled. It may be especially useful in combination with [react-navigation](https://reactnavigation.org/) where we could disable `KeyboardAvoidingView` for screens that are not focused
- They fix the problem with the `KeyboardAvoidingView` wrapped inside the [react-freeze](https://github.com/software-mansion/react-freeze) component. Similarly, as above, it is useful when we want to freeze screens that are not visible for the user.
## Changelog:
[GENERAL] [CHANGED] Don't use setState for disabled KeyboardAvoidingView to avoid re-renders
<!-- Help reviewers and the release process by writing your own changelog entry.
Pick one each for the category and type tags:
[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message
For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
Pull Request resolved: https://github.com/facebook/react-native/pull/38074
Test Plan: - Check if the KeyboardAvoidingView works as expected.
Reviewed By: sammy-SC
Differential Revision: D49148391
Pulled By: blakef
fbshipit-source-id: c4b7bde696d2249cbf4ad12c77058183b632464d
Matthew HoranandFacebook GitHub Bot
Qichen ZhuandFacebook GitHub Bot
Renaud ChaputandFacebook GitHub Bot
Adam GrzybowskiandFacebook GitHub Bot
yaqi.liuandFacebook GitHub Bot
Ruslan LesiutinandFacebook GitHub Bot