react-native
react-native copied to clipboard
Fix `<KeyboardAvoidingView>` with floating keyboard on iPad
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 #44068 and #29473
Changelog:
[IOS] [FIXED] - Fix <KeyboardAvoidingView> with floating keyboard on iPadOS
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
@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.
There are a couple of CI jobs that are failing. The reason is that we are adding some entries in the public API space and the checker is failing. Could you have a look at the failure and fix them? 🙏
Done!
@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.
@cipolleschi merged this pull request in facebook/react-native@3c54e1ee4522b26698bb3f99262a2a621b26fb64.
This pull request was successfully merged by @renchap in 3c54e1ee4522b26698bb3f99262a2a621b26fb64
When will my fix make it into a release? | How to file a pick request?