SIGN IN SIGN UP
facebook / react-native UNCLAIMED

A framework for building native applications using React

0 0 0 C++

Fix `<KeyboardAvoidingView>` with floating keyboard on iPad (#44859)

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
R
Renaud Chaput committed
3c54e1ee4522b26698bb3f99262a2a621b26fb64
Parent: a6fcad7
Committed by Facebook GitHub Bot <[email protected]> on 9/23/2024, 2:59:33 PM