[ios] useAnimatedKeyboard causes crash when reloading app #3786
Labels
Needs review
Issue is ready to be reviewed by a maintainer
Platform: iOS
This issue is specific to iOS
Repro provided
A reproduction with a snippet of code, snack or repo is provided
Comments
|
Here's a screenshot of the exception I encounter when attempting to reload my app with
|
|
I think I have a similar issue (declaring
I bet it works when you open it on a real iPhone and it's only the simulator that crashes. Is this correct? |
|
@Norfeldt I think this may be different, and not just an xcode version issue. I'm encountering it in debug mode on xcode 14.0.1, as well as in the Expo Snack I provided for repro. This also occurs in release builds and on real iPhones when reloading the app (e.g. via expo's |
|
Thanks for investigating if it is the same issue. Sorry for the disturbance. |
|
Got similar crash in iOS when tried to reload using expo |
|
#3895 opened with reproduction |
This was referenced Jan 5, 2023
graszka22
added a commit
that referenced
this issue
Feb 10, 2023
<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please follow the template so that the reviewers can easily understand what the code changes affect. --> ## Summary Fixes #3786 ### Why it crashes: On the main thread `CADisplayLink` calls `updateKeyboardFrame` 60 times per second. Calling `updateKeyboardFrame` calls listener on the JS side. When reloading the runtime gets destroyed on the JavaScript thread. So when those two things happen at the same time (which in this case happens often) we get the crash that we're trying to call a js function on destroyed js runtime. ### Why don't you just remove the listeners in `NativeReanimatedModule::~NativeReanimatedModule()`, we're cleaning up everything here: I've tried and it appeared to work at first but I still got crashes when running [the 1000 listeners example](#3911) and probably that's why:   So when `~NativeReanimatedModule` is being called the runtime related stuff is already deleted and there is a short window of time that the runtime is being deleted and we still call js stuff, or at least that's my theory 🤷♀️ So my proposition for now is to listen for `RCTBridgeDidInvalidateModulesNotification` notification. It's called just before deleting happens. Also I'm using `RCTUnsafeExecuteOnMainQueueSync` because I want to wait until the listeners are completely deleted on the main thread and then delete js stuff. ### A nicer solution? If you look a bit above `[[NSNotificationCenter defaultCenter] postNotificationName:RCTBridgeDidInvalidateModulesNotification` line in React code you'll see that React calls `invalidate` on all modules' data before even posting the notification. Maybe we should clean reanimated stuff here. I haven't explored that though yet and I don't know where is reanimated's module data and what is module data at all and where to put that `invalidate` function, I just got this idea while posting this PR. ## Test plan Just run AnimatedKeyboardExample and reload the app. Also the [the 1000 listeners example](#3911) nicely catches other data races. Tested with changes from #3911 and it works Also tested on FabricExample and surprisingly it also works.
fluiddot
pushed a commit
to wordpress-mobile/react-native-reanimated
that referenced
this issue
Jun 5, 2023
<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please follow the template so that the reviewers can easily understand what the code changes affect. --> ## Summary Fixes software-mansion#3786 ### Why it crashes: On the main thread `CADisplayLink` calls `updateKeyboardFrame` 60 times per second. Calling `updateKeyboardFrame` calls listener on the JS side. When reloading the runtime gets destroyed on the JavaScript thread. So when those two things happen at the same time (which in this case happens often) we get the crash that we're trying to call a js function on destroyed js runtime. ### Why don't you just remove the listeners in `NativeReanimatedModule::~NativeReanimatedModule()`, we're cleaning up everything here: I've tried and it appeared to work at first but I still got crashes when running [the 1000 listeners example](software-mansion#3911) and probably that's why:   So when `~NativeReanimatedModule` is being called the runtime related stuff is already deleted and there is a short window of time that the runtime is being deleted and we still call js stuff, or at least that's my theory 🤷♀️ So my proposition for now is to listen for `RCTBridgeDidInvalidateModulesNotification` notification. It's called just before deleting happens. Also I'm using `RCTUnsafeExecuteOnMainQueueSync` because I want to wait until the listeners are completely deleted on the main thread and then delete js stuff. ### A nicer solution? If you look a bit above `[[NSNotificationCenter defaultCenter] postNotificationName:RCTBridgeDidInvalidateModulesNotification` line in React code you'll see that React calls `invalidate` on all modules' data before even posting the notification. Maybe we should clean reanimated stuff here. I haven't explored that though yet and I don't know where is reanimated's module data and what is module data at all and where to put that `invalidate` function, I just got this idea while posting this PR. ## Test plan Just run AnimatedKeyboardExample and reload the app. Also the [the 1000 listeners example](software-mansion#3911) nicely catches other data races. Tested with changes from software-mansion#3911 and it works Also tested on FabricExample and surprisingly it also works.
ishikawa
pushed a commit
to ishikawa/react-native-reanimated
that referenced
this issue
Aug 28, 2023
<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please follow the template so that the reviewers can easily understand what the code changes affect. --> Fixes software-mansion#3786 On the main thread `CADisplayLink` calls `updateKeyboardFrame` 60 times per second. Calling `updateKeyboardFrame` calls listener on the JS side. When reloading the runtime gets destroyed on the JavaScript thread. So when those two things happen at the same time (which in this case happens often) we get the crash that we're trying to call a js function on destroyed js runtime. `NativeReanimatedModule::~NativeReanimatedModule()`, we're cleaning up everything here: I've tried and it appeared to work at first but I still got crashes when running [the 1000 listeners example](software-mansion#3911) and probably that's why:   So when `~NativeReanimatedModule` is being called the runtime related stuff is already deleted and there is a short window of time that the runtime is being deleted and we still call js stuff, or at least that's my theory 🤷♀️ So my proposition for now is to listen for `RCTBridgeDidInvalidateModulesNotification` notification. It's called just before deleting happens. Also I'm using `RCTUnsafeExecuteOnMainQueueSync` because I want to wait until the listeners are completely deleted on the main thread and then delete js stuff. If you look a bit above `[[NSNotificationCenter defaultCenter] postNotificationName:RCTBridgeDidInvalidateModulesNotification` line in React code you'll see that React calls `invalidate` on all modules' data before even posting the notification. Maybe we should clean reanimated stuff here. I haven't explored that though yet and I don't know where is reanimated's module data and what is module data at all and where to put that `invalidate` function, I just got this idea while posting this PR. Just run AnimatedKeyboardExample and reload the app. Also the [the 1000 listeners example](software-mansion#3911) nicely catches other data races. Tested with changes from software-mansion#3911 and it works Also tested on FabricExample and surprisingly it also works.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Description
When using the
useAnimatedKeyboardhook on iOS, attempting to reload the app causes a crash.I've observed this with:
react-native-reanimated
2.10.0,2.11.0and2.12.0expo
46and47react-native
0.69and0.70in both debug and release schemes (on release, via expo's
Updates.reloadAsync())on both the iOS simulator and a real device
Using JSC, the crash happens immediately.
Using hermes, sometimes the crash doesn't happen until you focus a text input (presenting the keyboard) after reloading the app.
I created two snacks to demonstrate the crash:
useAnimatedKeyboard()commented out.Steps to reproduce
useAnimatedKeyboard()to any component that's rendered in your app.Snack or a link to a repository
https://snack.expo.dev/@danscan/fa5482
Reanimated version
2.12.0
React Native version
0.70.5
Platforms
iOS
JavaScript runtime
JSC
Workflow
Expo managed workflow
Architecture
Paper (Old Architecture)
Build type
Debug mode
Device
iOS simulator
Device model
No response
Acknowledgements
Yes
The text was updated successfully, but these errors were encountered: