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.

Sign up for GitHub

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

Jump to bottom

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

Open
Braden1996 opened this issue Mar 2, 2024 · 4 comments · May be fixed by #5916
Open

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

Braden1996 opened this issue Mar 2, 2024 · 4 comments · May be fixed by #5916
Assignees
@piaskowyk
Labels
Platform: Android This issue is specific to Android Repro provided A reproduction with a snippet of code, snack or repo is provided

Comments

@Braden1996
Copy link

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
@github-actions github-actions bot added Platform: Android This issue is specific to Android Repro provided A reproduction with a snippet of code, snack or repo is provided labels Mar 2, 2024
@tomekzaw
Copy link
Member

tomekzaw commented Mar 2, 2024

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.

@piaskowyk piaskowyk self-assigned this Mar 4, 2024
@maciekstosio maciekstosio linked a pull request Apr 19, 2024 that will close this issue
Open
@maciekstosio
Copy link
Contributor

maciekstosio commented Apr 19, 2024 •
edited

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

@kirillzyusko
Copy link
Contributor

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)

@256hz
Copy link

256hz commented May 16, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@piaskowyk piaskowyk

Labels
Platform: Android This issue is specific to Android Repro provided A reproduction with a snippet of code, snack or repo is provided
Projects
None yet
Milestone
No milestone
6 participants
@Braden1996 @maciekstosio @tomekzaw @kirillzyusko @piaskowyk @256hz