react-native-reanimated
react-native-reanimated copied to clipboard
useAnimatedKeyboard does not work for Android when the focused TextInput is inside a Modal
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 https://github.com/kirillzyusko/react-native-keyboard-controller/issues/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
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.
Hi, I prepared PR (#5916) that allows to keep track keyboard height on modals too. Please, let me know if that helps.
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)