`useAnimatedKeyboard` does not support floating keyboard (iPad)

[renchap]

Description

On iPads, you can switch the keyboard mode and have a floating keyboard, where the keyboard appears on top on the app (no longer docker at the bottom of the screen) and can be dragged around.

When in floating mode, useAnimatedKeyboard incorrectly computes the height, which seems to change depending on the position on the screen.

Please note than on a real device, there are two other Keyboard modes (Undock and split). They do not appear on a Similator iPad pro, I am not sure why, but they probably need to be handled as well.

Steps to reproduce

1. Open and compile the Example app from the repro branch below using an iPad in simulator (or an iPad device) as the target. Note that I configured the Example app to support iPad devices in this fork
2. Open the useAnimatedKeyboard example
3. Tap the text field at the bottom
4. Long-press the Keyboard + bottom arrow icon on the bottom right of the keyboard
5. Choose "floating"
6. Move the keyboard. The text field disappear, and you can see in Metro console that the height is now completely invalid

Snack or a link to a repository

https://github.com/renchap/react-native-reanimated/tree/use-animated-keyboard-floating-bug

Reanimated version

3.6.0

React Native version

0.72.6

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Paper (Old Architecture)

Build type

Debug app & dev bundle

Device

Real device

Device model

Any iPad I tested

Acknowledgements

Yes

[renchap]

I am trying to write a PR for this, but I never wrote ObjectiveC before and I am struggling to find something that works.

From what I have been able to gather:

• UIKeyboardWillShowNotification and UIKeyboardWillHideNotification should not be dispatched when the keyboard is in floating mode, so those events could be used to subscribe to keyboard events only when needed
• Other people are advising to check for the keyboard width, and consider that if the width is the width of the screen, then the keyboard is floating. But I suspect this will cause issues with Split View or other modes (like split keyboard)

[szydlovsky]

Hi @renchap and thanks for submitting the issue! I have recently tried to take it up and was wondering: what is the use-case for knowing floating keyboard's height? In general, knowing normal keyboard's height usually helps us make other views avoid it. However, floating keyboard can be anywhere on the screen and the height value of it won't help much if it can be even on the very top of the screen. We can definitely add some fields whether the keyboard is floating or not, but are unsure if its height has any impact here.

[renchap]

There is no use-case to me, and I can not see any.

The issue is that at the moment, the (possibly wrong?) height is reported when the keyboard is floating, and you have no way to know that the keyboard is floating.

So if you use this measurement to, for example, offset a UI element from the bottom of the screen when the keyboard is open, to ensure it stays visible, then it is completely broken for users with a floating keyboard.

So I would either:

• report the height as 0 when the keyboard is floating, as I cant see any use-case where you would want to know the real height
• return a new variable you can use to know if the keyboard is currently floating, and each app can then check for this and ignore this case when it does not make sense.

I am also unsure on how to handle the undocked mode and the split mode.

[renchap]

This is also an issue when the user is navigating using an Apple Pencil. When they do so, opening the keyboard using the bar at the bottom right of the screen opens the floating keyboard, with no choice to dock it.

[renchap]

<KeyboardAvoidingView> has the same issue, here is a fix for it: https://github.com/facebook/react-native/pull/44859

Maybe we could simply use the same (hackish but working) detection for this in reanimated?