useAnimatedKeyboard does not work for Android when the focused TextInput is inside a Modal

[Braden1996]

Description

useAnimatedKeyboard generally works well, but unfortunately doesn't update on Android when the focused TextInput is inside a Modal. This issue has been around for quite a few major releases and I can confirm it is also present in the latest release.

Interesting, this issue is also present in react-native-keyboard-controller despite them using a different approach to calculating keyboard height (see kirillzyusko/react-native-keyboard-controller#369).

Here is a video demonstrating the working behaviour on iOS, followed by the broken behaviour on Android:
https://github.com/software-mansion/react-native-reanimated/assets/5165963/ed37fc4d-7bc3-453c-8d32-5de5847bebee

Steps to reproduce

Put a TextInput inside a Modal component. Notice that any uses of useAnimatedKeyboard (both inside the Modal and outside) do not update to reflect the visible keyboard height.

Snack or a link to a repository

https://snack.expo.dev/@braden1996/reanimated-useanimatedkeyboard-modal-bug

Reanimated version

3.6.1

React Native version

0.72.4

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo Dev Client

Architecture

None

Build type

None

Device

Real device

Device model

No response

Acknowledgements

Yes

[tomekzaw]

Thanks @Braden1996 for reporting this issue! Recently we've merged several improvements directly related to useAnimatedKeyboard and this sounds like a reasonable thing to fix as well. I hope @piaskowyk will have some time to investigate this issue.

[maciekstosio]

Hi, I prepared PR (#5916) that allows to keep track keyboard height on modals too. Please, let me know if that helps.

[kirillzyusko]

Hey @maciekstosio

Have you tested Fabric architecture? I've applied your patch and it crashes app immediately when modal appears with:

FATAL EXCEPTION: main

com.facebook.react.uimanager.IllegalViewOperationException: Trying to resolve view with tag 480 which doesn't exist

FATAL EXCEPTION: main
Process: com.keyboardcontrollerfabricexample, PID: 3726
com.facebook.react.uimanager.IllegalViewOperationException: Trying to resolve view with tag 480 which doesn't exist
	at com.facebook.react.uimanager.NativeViewHierarchyManager.resolveView(NativeViewHierarchyManager.java:102)
	at com.facebook.react.uimanager.UIManagerModule.resolveView(UIManagerModule.java:870)
	at com.swmansion.reanimated.NodesManager.handleEvent(NodesManager.java:337)
	at com.swmansion.reanimated.NodesManager.onEventDispatch(NodesManager.java:320)
	at com.facebook.react.uimanager.events.FabricEventDispatcher.dispatchEvent(FabricEventDispatcher.java:43)

[abedolinger]

Hi @maciekstosio I made a patch from your PR and it worked like a charm for me, thank you very much! We're on Expo 49.