-
Notifications
You must be signed in to change notification settings - Fork 24.5k
New issue
Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? # to your account
Fix <KeyboardAvoidingView>
with floating keyboard on iPad
#44859
Fix <KeyboardAvoidingView>
with floating keyboard on iPad
#44859
Conversation
463070e
to
7f223e5
Compare
@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator. |
7f223e5
to
40745df
Compare
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 3c54e1e. |
This pull request was successfully merged by @renchap in 3c54e1e When will my fix make it into a release? | How to file a pick request? |
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: #29473 (comment) 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 Pull Request resolved: #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: 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: #29473 (comment) 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 [IOS] [FIXED] - Fix `<KeyboardAvoidingView>` with floating keyboard on iPadOS Pull Request resolved: #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:
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 thebehavior
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: #29473 (comment)
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 iPadOSTest Plan:
Tested using RNTester and the "Keyboard Avoiding View with different behaviors" example.
Before:
RPReplay_Final1718035077.mov
After:
RPReplay_Final1718035202.mov