Skip to content
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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

renchap
Copy link
Contributor

@renchap renchap commented Jun 10, 2024

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

Test Plan:

Tested using RNTester and the "Keyboard Avoiding View with different behaviors" example.

Before:

RPReplay_Final1718035077.mov

After:

RPReplay_Final1718035202.mov

@facebook-github-bot facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Jun 10, 2024
@renchap renchap force-pushed the keyboard-avoiding-view-floating-keyboard-fix branch 2 times, most recently from 463070e to 7f223e5 Compare June 10, 2024 16:40
@facebook-github-bot
Copy link
Contributor

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@renchap renchap force-pushed the keyboard-avoiding-view-floating-keyboard-fix branch from 7f223e5 to 40745df Compare September 17, 2024 08:32
@cipolleschi
Copy link
Contributor

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? 🙏

@renchap
Copy link
Contributor Author

renchap commented Sep 20, 2024

Done!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

UI problem with iOS floating keyboard in iPad.
3 participants