react-native icon indicating copy to clipboard operation
react-native copied to clipboard

Fix `<KeyboardAvoidingView>` with floating keyboard on iPad

Open renchap opened this issue 1 year ago • 2 comments

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

renchap avatar Jun 10 '24 16:06 renchap

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

facebook-github-bot avatar Sep 17 '24 08:09 facebook-github-bot

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

cipolleschi avatar Sep 17 '24 09:09 cipolleschi

Done!

renchap avatar Sep 20 '24 16:09 renchap

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

facebook-github-bot avatar Sep 23 '24 12:09 facebook-github-bot

@cipolleschi merged this pull request in facebook/react-native@3c54e1ee4522b26698bb3f99262a2a621b26fb64.

facebook-github-bot avatar Sep 23 '24 15:09 facebook-github-bot

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?

react-native-bot avatar Sep 23 '24 15:09 react-native-bot