-
Notifications
You must be signed in to change notification settings - Fork 24.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in 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