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.

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

Unable to mount KeyboardProvider without animations freezing #842

Open
smhutch opened this issue Feb 28, 2025 · 4 comments
Open

Unable to mount KeyboardProvider without animations freezing #842

smhutch opened this issue Feb 28, 2025 · 4 comments
Assignees
Labels
🐛 bug Something isn't working 🏭 fabric Changes specific to new (fabric/jsi) architecture 🍎 iOS iOS specific

Comments

@smhutch
Copy link

smhutch commented Feb 28, 2025

Describe the bug
I assume this is an integration issue with some of my other dependencies, but I'm a bit lost on what' I'm doing wrong. In short, I am mounting a KeyboardProvider (following this guide), and this causes my entire app to freeze. All reanimated-driven animations fail to run.

This issue happens even if I mount the KeyboardProvider with enabled:false.

I have recorded a Loom with a demo of the issue I'm facing.

Code snippet
I am simply mounting a KeyboardProvider at the root of my application. I have tried mounting it at the very top, and also inside some other third-party providers. The same issue appears to occur regardless of where I mount it.

Repo for reproducing
No minimal repro available yet. I can prepare one soon unless I learn of a quick fix for this.

To Reproduce
Mount KeyboardProvider anywhere in app tree.

Expected behavior
App continues to render as normal.

Screenshots
Loom with a demo.

Smartphone (please complete the following information):

  • Desktop OS: macOS 15.3 (24D60)
  • Device: iOS simulator
  • RN version: 0.76.6
  • RN architecture: new
  • JS engine: unsure
  • Library version: 1.16.6

Additional context
I assume I'm missing something obvious here. Mostly seeking advice on this one.

@smhutch
Copy link
Author

smhutch commented Feb 28, 2025

Possibly relevant dependencies I'm using

"@gorhom/bottom-sheet": "^5.0.6",
"expo": "~52.0.24",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-native": "0.76.6",
"react-native-reanimated": "~3.16.6",
"react-native-keyboard-controller": "^1.16.6",
"moti": "^0.29.0",

@smhutch
Copy link
Author

smhutch commented Feb 28, 2025

I discovered that what's happening is that:

  1. When I tap on a button that opens a bottom sheet, the sheet appears with a transparent view that covers the entire viewport.
  2. This creates the illusion of the app being unresponsive
  3. The sheet itself fails to animate in (all animations are frozen)

@kirillzyusko
Copy link
Owner

Sounds very similar to #750

@denysoleksiienko is that something that you experienced as well? I. e. that KeyboardProvider blocks all reanimated animations?

This is actually very strange, because what KeyboardProvider literally do is storing shared values in context and updating them 🤷‍♂

However I may assume, that KeyboardProvider itself can also cause some issue (for example I used Platform.OS in worklet and reanimated plugin was trying to capture entire RN package in worklet 🙈).

@smhutch one advice I can give to you is to try to remove/simplify KeyboardProvider to see when it starts to work. I believe you can not share a reproduction example? I'd love to help here, but without repro I can not do this 😔

In example app I also use bottom-sheet component, but it works well in example app 🤷‍♂ So my current advice is to try to remove line-by-line of the code in KeyboardProvider and see when it starts to work - thus we will be able to identify blocker and can think how we can fix it 👀

@kirillzyusko kirillzyusko added 🐛 bug Something isn't working 🍎 iOS iOS specific 🏭 fabric Changes specific to new (fabric/jsi) architecture labels Feb 28, 2025
@denysoleksiienko
Copy link

In my case, all animations freeze when I use react-native 0.76+ (NEW ARCH) and reanimated 3.15+.
But if I switch to OLD ARCH, it works fine.
When I tried FabricExample on Android, I also noticed that the animations were not smooth
It looks like a global problem react-native 0.76+ in Fabric
You can read the entire discussion here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Something isn't working 🏭 fabric Changes specific to new (fabric/jsi) architecture 🍎 iOS iOS specific
Projects
None yet
Development

No branches or pull requests

3 participants