Inconsistent freezing on iOS

[lucasjohnston]

Description

Apologies in advance for vagueness, pretty hard to debug this one.

For the past few weeks I've been experiencing random freezing of our app, where the app seemingly stops in its tracks with no crashing/stacktrace/error. Initially I thought this was due to excessive re-rendering or a memory leak, but after reworking our logic to background actions the random freezes continue. Could well still be an error on our side, but struggling to see where/how.

I've tried to debug this myself with little joy (can't remotely debug with reanimated) - the only nuggets of information I've managed to link are EXC_BAD_ACCESS exceptions which all seem to come from reanimated.

For reference, we're using both react-native's Animated and reanimated (in different parts of the app), and also frequently use Modalize which itself uses reanimated.

I found a previous issue that looks pretty similar to this but was fixed last year: https://github.com/software-mansion/react-native-reanimated/issues/1284

Expected behavior

No freezes

Actual behavior & steps to reproduce

Unknown

Snack or minimal code example

Can't provide a replication unfortunately, but can provide some Sentry error traces from these exceptions.

EXC_BAD_ACCESS
XTUM > Stack overflow in _ZNKSt3__116__hash_node_baseIPNS_11__hash_nodeINS_17__hash_value_typeIiNS_6vectorINS_10shared_ptrIN8facebook3jsi5ValueEEENS_9allocatorIS8_EEEEEEPvEEE6__hashEv
Called from reanimated::StoreUser::~StoreUser::lambda::operator()

EXC_BAD_ACCESS
targetTimestamp > Attempted to dereference garbage pointer 0xce990e2ba698.
Called from reanimated::createReanimatedModule::lambda::operator()

EXC_BAD_ACCESS
Exception 1, Code 2752, Subcode 8 > Attempted to dereference garbage pointer 0xac0.
Called from reanimated::createReanimatedModule::lambda::operator()

Package versions

• React Native: 0.64.1
• React Native Reanimated: ^2.2.0
• NodeJS: v14.15.5
• Xcode: 12.5.1 (12E507)
• Java & Gradle: Not relevant, we're iOS only

For reference

• react-native-modalize: ^2.0.8
• react-native-portalize: ^1.0.7
• react-native-screens: 2.17.1
• @react-navigation/native: ^5.9.2
• @react-navigation/stack: ^5.14.2

Affected platforms

• [ ] Android
• [x] iOS
• [ ] Web

[github-actions[bot]]

Issue validator

The issue is valid!

[tankers746]

Getting a similar problem

[happyfloat]

Maybe my problem is related, but it only started happening with alpha3 not alpha2: https://github.com/software-mansion/react-native-reanimated/issues/2366

[wanderlust252]

i've crash cause of useAnimatedReaction. EXC_BAD_ACCESS

[Sanglepp]

This happens to me with 2.3.0-beta.2. Common pattern to reach the issue is when I open a modal and close it. After that the UI is all freezed up. Issue dissapears when downgrading to 2.3.0-alpha.2.

[effektsvk]

@Sanglepp This might be completely separate issue, but I upgraded react-native to 0.66.0 (react-native-reanimated as well) and I started having similar issues with Modal too. It looks like a RN bug, more info here: https://github.com/facebook/react-native/issues/32329. Just wanted to let you know.

[sergio-sanz]

I have the same problem with 2.3.0-alpha.3 and above. I'm using Layout Animations. Could be related with this API?

[dotansimha]

As stated here before by @effektsvk - this seems to be related to https://github.com/facebook/react-native/issues/32329

This causes issues with all libraries that are using Reanimated 2 for animations, starting from RN 0.65.1 (react-native-modal, react-native-screens, react-navigation and a few more).

Seems like it's something with the transition that keeps the native screen in memory, and on top of the main view, leading to an overlay that prevents touch events.

@piaskowyk @Szymon20000 , I saw you were working on RN~66 support in https://github.com/software-mansion/react-native-reanimated/pull/2462 - any idea what could be done to workaround this issue? Any plan for a fix?

[Dmitry-GH]

I can confirm that I also had this issue with "react-native-reanimated": "^2.3.0-beta.2" and "react-native": "0.66.0". I fixed this by downgrading these two, so my current config alongside other libraries:

"react-native": "0.65.1", "react-native-reanimated": "^2.2.2", "react-native-modal": "^13.0.0", "react-native-screens": "^3.8.0", "react-native-gesture-handler": "~1.10.3", "react-native-tab-view": "^3.1.1", "@react-navigation/bottom-tabs": "^6.0.7", "@react-navigation/elements": "^1.1.2", "@react-navigation/material-top-tabs": "^6.0.4", "@react-navigation/native": "^6.0.4", "@react-navigation/stack": "^6.0.9"

[effektsvk]

Hey, just a small note, there's new 2.2.3 version that should help for now.

[novev9]

I can confirm that updating to [email protected] fixes this issue.

[terrysahaidak]

Anyone reporting this try this patch. You can edit these files directly from xcode in Development Pods directory.

https://github.com/software-mansion/react-native-reanimated/commit/7883fc1f89c8a662b4ce030416231d3de9405b6e

[princefishthrower]

I can also confirm that 2.2.3 does work, while 2.3.0-beta.2 does not- is there a regression here?

[parasharrajat]

Any idea on how we can fix this for 2.3.x?

[hukpo]

@effektsvk Hey, so it works well with RN 0.66 and reanimated 2.2.3?

[effektsvk]

@effektsvk Hey, so it works well with RN 0.66 and reanimated 2.2.3?

@hukpavlo Yes, I didn't have any issues with those versions, and lot of others said that it's working fine for them as well in the RN thread (https://github.com/facebook/react-native/issues/32329#issuecomment-943324655)

[numandev1]

I am using [email protected], [email protected] and [email protected] and having the same issue from the sentry log but it is triggering from react-native-screens

EXC_BAD_ACCESS: __reanimatedHostObjectRef >
Attempted to dereference garbage pointer 0x8.
  OnShobbak           0x100ea9264  folly::Try<T>::throwUnlessValue
  OnShobbak           0x100ed3d08  folly::Try<T>::throwUnlessValue
  OnShobbak           0x100ea19f4  folly::Try<T>::throwUnlessValue
  OnShobbak           0x100ed3b64  folly::Try<T>::throwUnlessValue
  OnShobbak           0x100ed23ec  folly::Try<T>::throwUnlessValue
  OnShobbak           0x100ed3d08  folly::Try<T>::throwUnlessValue
  OnShobbak           0x100ea19f4  folly::Try<T>::throwUnlessValue
  OnShobbak           0x100ed3b64  folly::Try<T>::throwUnlessValue
  OnShobbak           0x100ed2ed8  folly::Try<T>::throwUnlessValue
  OnShobbak           0x100ed3d08  folly::Try<T>::throwUnlessValue
  OnShobbak           0x100ea19f4  folly::Try<T>::throwUnlessValue
  OnShobbak           0x100ed3b64  folly::Try<T>::throwUnlessValue
  OnShobbak           0x100ed2ed8  folly::Try<T>::throwUnlessValue
  OnShobbak           0x100ed3d08  folly::Try<T>::throwUnlessValue
  OnShobbak           0x100ea19f4  folly::Try<T>::throwUnlessValue
  OnShobbak           0x100ed3b64  folly::Try<T>::throwUnlessValue
  OnShobbak           0x100ed23ec  folly::Try<T>::throwUnlessValue
  OnShobbak           0x100ed3d08  folly::Try<T>::throwUnlessValue
  OnShobbak           0x100eb16e8  folly::Try<T>::throwUnlessValue
  OnShobbak           0x101018138  _ZN5folly6detail8function9execSmallIZNS_7futures6detail4CoreINS_4UnitEE11setCallbackIZNS4_10FutureBaseIS6_E18thenImplementationIZNRS_6FutureIS6_E3viaENS_8Executor9KeepAliveISE_EEEUlOSG_ONS_3TryIS6_EEE_NS4_25tryExecutorCallableResultIS6_SL_vEEEENSt3__19e...
  hermes              0x1027d90f4  facebook::hermes::debugger::Debugger::jsiValueFromHermesValue
  hermes              0x1027d8aa0  facebook::hermes::debugger::Debugger::jsiValueFromHermesValue
  hermes              0x1027e77b8  facebook::jsi::JSError::~JSError
  hermes              0x1028013dc  facebook::jsi::JSError::~JSError
  hermes              0x102802d50  facebook::jsi::JSError::~JSError
  hermes              0x102802490  facebook::jsi::JSError::~JSError
  hermes              0x1027e79cc  facebook::jsi::JSError::~JSError
  hermes              0x1027e63ec  facebook::jsi::JSError::~JSError
  hermes              0x10285a954  facebook::jsi::JSError::~JSError
  hermes              0x1027e77b8  facebook::jsi::JSError::~JSError
  hermes              0x1028013dc  facebook::jsi::JSError::~JSError
  hermes              0x102802d50  facebook::jsi::JSError::~JSError
  hermes              0x102802490  facebook::jsi::JSError::~JSError
  hermes              0x1027e79cc  facebook::jsi::JSError::~JSError
  hermes              0x1027e7330  facebook::jsi::JSError::~JSError
  hermes              0x1028013ec  facebook::jsi::JSError::~JSError
  hermes              0x102802d50  facebook::jsi::JSError::~JSError
  hermes              0x102802490  facebook::jsi::JSError::~JSError
  hermes              0x1027e79cc  facebook::jsi::JSError::~JSError
  hermes              0x1027e7330  facebook::jsi::JSError::~JSError
  hermes              0x1028013ec  facebook::jsi::JSError::~JSError
  hermes              0x102802d50  facebook::jsi::JSError::~JSError
  hermes              0x102802490  facebook::jsi::JSError::~JSError
  hermes              0x1027e79cc  facebook::jsi::JSError::~JSError
  hermes              0x1027e684c  facebook::jsi::JSError::~JSError
  hermes              0x1028887a0  facebook::jsi::JSError::~JSError
  hermes              0x1027e77b8  facebook::jsi::JSError::~JSError
  hermes              0x1028013dc  facebook::jsi::JSError::~JSError
  hermes              0x102802d50  facebook::jsi::JSError::~JSError
  hermes              0x102802490  facebook::jsi::JSError::~JSError
  hermes              0x1027e79cc  facebook::jsi::JSError::~JSError
  hermes              0x1027e684c  facebook::jsi::JSError::~JSError
  hermes              0x1028887a0  facebook::jsi::JSError::~JSError
  hermes              0x1027e77b8  facebook::jsi::JSError::~JSError
  hermes              0x1028013dc  facebook::jsi::JSError::~JSError
  hermes              0x102802d50  facebook::jsi::JSError::~JSError
  hermes              0x102802490  facebook::jsi::JSError::~JSError
  hermes              0x1027e79cc  facebook::jsi::JSError::~JSError
  hermes              0x1027e7330  facebook::jsi::JSError::~JSError
  hermes              0x1027d1aac  facebook::hermes::HermesRuntime::rootsListLength
  OnShobbak           0x10101706c  _ZN5folly6detail8function9execSmallIZNS_7futures6detail4CoreINS_4UnitEE11setCallbackIZNS4_10FutureBaseIS6_E18thenImplementationIZNRS_6FutureIS6_E3viaENS_8Executor9KeepAliveISE_EEEUlOSG_ONS_3TryIS6_EEE_NS4_25tryExecutorCallableResultIS6_SL_vEEEENSt3__19e...
  OnShobbak           0x1010481f8  folly::exception_wrapper::InPlace<T>::get_exception_ptr_
  OnShobbak           0x10104805c  folly::exception_wrapper::InPlace<T>::get_exception_ptr_
  OnShobbak           0x100ed927c  facebook::react::JSIExecutor::defaultTimeoutInvoker
  OnShobbak           0x1010455f8  folly::exception_wrapper::InPlace<T>::get_exception_ptr_
  OnShobbak           0x100ff0238  facebook::react::JSIExecutor::defaultTimeoutInvoker
  OnShobbak           0x100f3d278  facebook::react::JSIExecutor::defaultTimeoutInvoker
  OnShobbak           0x100f496e0  facebook::react::JSIExecutor::defaultTimeoutInvoker
  OnShobbak           0x100f49494  facebook::react::JSIExecutor::defaultTimeoutInvoker
  CoreFoundation      0x1806be9d0  __CFRUNLOOP_IS_CALLING_OUT_TO_A_BLOCK__
  CoreFoundation      0x1806bf8cc  __CFRunLoopDoBlocks
  CoreFoundation      0x180657c2c  __CFRunLoopRun
  CoreFoundation      0x18066b464  CFRunLoopRunSpecific
  OnShobbak           0x100f324d4  facebook::react::JSIExecutor::defaultTimeoutInvoker
  Foundation          0x181ed7408  __NSThread__start__
  libsystem_pthread   0x1f10bb9a0  _pthread_start

[kmagiera]

Hi all! Thanks for reporting and all your comments. I wanted to point out that "EXC_BAD_ACCESS" is a typical error message related to accessing corrupted/cleaned-up/out-of-scope memory and even thought a lot of errors do have that message in common there are likely unrelated to each other.

We are commited to fixing all bugs that result in EXC_BAD_ACCESS error but we need to collect related causes under one issue and filter out the remaining ones. Since this issue was originally reported by @lucasjohnston and I saw some comments later on that 2.3 has fixes this problem for others wanted to ask if this problem still persist in 2.3 and after?

I also suspect that @tankers746's issue is related as it has a very similar trace (tracing to StoreUser class). As for the remaining commenters I can't tell for sure if your crash is related and therefore ask you to share more details and possibly open a new issue if if you don't see StoreUser on the trace in your case. Specifically the last comment by @nomi9995 is likely an unrelated issue as it happens in a different method and should be reported separately with all the details that would allow us to trace is down.

[lucasjohnston]

Hi @kmagiera - I recently revisited my build and upgraded the package to 2.3 and observe exactly the same behaviour as before. Would be great to see some movement on this as there's been little progress on this issue (beyond other users reporting similar bugs) afaik. Let me know if there's anything I can provide to assist

[pfeiffer]

We're also seeing this issue with [email protected], [email protected] and [email protected]. It's not easily reproducible, but closing a modal will sometimes freeze the UI.

We have observed this both with and without Flipper added to the project (so probably unrelated to https://github.com/facebook/flipper/issues/1399)

[lucasjohnston]

I've trawled through a variety of issues trying to diagnose this (see #1284 #2775 #2327).

Today I found the component causing trouble - an Animated Gradient I'd built a year back and forgotten about. The code is here: https://gist.github.com/lucasjohnston/fa6e9c66092664dcef09c42d5149087d It roughly does the following:

• Create a gradient multiples times bigger than the element (defaults to 6x)
• Uses a custom function called "interpolate" to set an X,Y co-ordinate
• Applies useAnimatedStyle() to the <View /> to transform to those co-ordinates
• Uses the useAnimatedStyle func to trigger a callback on the "interpolate" func on the JS thread, using Shared Values, to trigger an animation to a new set of co-ordinates
• When generating new X,Y co-ordinates, the angles between the last and current set are compared to ensure it doesn't look like the animation is just going back and forth in the same direction. The diff must be >15 or <-15.

When using the component, typically after ~5mins of running or immediately when starting to run, the random XY coordinates generated become very small and it takes >50 attempts to find an angle diff big enough. Normally this loop completes after just 1 or 2 attempts. I think this is down to the way RN / iOS handles randomness.

It seems this is what causes the app to freeze up – I don't get why, though. The component uses runOnJS() so shouldn't be doing anything to stop the UI thread, and it's called as a 'worklet' from useAnimatedStyle() so shouldn't be blocking the main JS thread either? None of the code depends on a transform to be made.

It might loop multiple times, but the console reports shows that my interpolate func does still resolve the loop. The app continues to be frozen though, and Xcode highlights the getProperty() of a SharableValue when paused.

My expectation was that an infinitely loop would freeze, but a resolved loop would ultimately resolve itself even if there's some lag. I'd also expect the app to crash, or RN to report some sort of error. None of this happens.

My guess is this being something to do with the way useAnimatedStyle().callback and runOnJS interact when a function is using Reanimated Shared Values.

Anyway – to avoid this, I've just removed the loop. If the angle isn't big enough, we just add some arbitrary values to the XY coords and hope for the best.

[lucasjohnston]

Xcode 14 beta 4 is reporting a "Hang Risk" from RCTWebSocket, which I've raised separately (https://github.com/facebook/react-native/issues/34400). Probably irrelevant, but given all our app hangs have found their way back to Reanimated, I thought it worth mentioning.

[kostas64]

I dont know what is your code that produces this error, but i was facing the same issue when i was using Gesture Detectors.

"react-native-gesture-handler": "^2.4.0" "react-native-reanimated": "^2.10.0"

What didnt work: Updating react-native-reantimated from 2.10.0 -> 2.13.0 Enabling Hermes Engine.

Code that made my app freeze (iOS, Android)

const pangGesture = Gesture.Pan() .onUpdate(e => { const leafsLength = Math.floor(e.x / 42); runOnJS(onPressHandler)(leafsLength); }) .onEnd(() => runOnJS(getRatedColor)());

By chaining runOnJS(true) to detector solved my issue. const pangGesture = Gesture.Pan() .runOnJS(true) .onUpdate(e => { const leafsLength = Math.floor(e.x / 42); runOnJS(onPressHandler)(leafsLength); }) .onEnd(() => runOnJS(getRatedColor)());

[cherucole]

Code that made my app freeze (iOS, Android)

const pangGesture = Gesture.Pan() .onUpdate(e => { const leafsLength = Math.floor(e.x / 42); runOnJS(onPressHandler)(leafsLength); }) .onEnd(() => runOnJS(getRatedColor)());

By chaining runOnJS(true) to detector solved my issue. const pangGesture = Gesture.Pan() .runOnJS(true) .onUpdate(e => { const leafsLength = Math.floor(e.x / 42); runOnJS(onPressHandler)(leafsLength); }) .onEnd(() => runOnJS(getRatedColor)());

Had the same setup and the suggestion above worked for me. Yet to test other devices but mine is working with no issues. Thank you

[kostas64]

Code that made my app freeze (iOS, Android) const pangGesture = Gesture.Pan() .onUpdate(e => { const leafsLength = Math.floor(e.x / 42); runOnJS(onPressHandler)(leafsLength); }) .onEnd(() => runOnJS(getRatedColor)()); By chaining runOnJS(true) to detector solved my issue. const pangGesture = Gesture.Pan() .runOnJS(true) .onUpdate(e => { const leafsLength = Math.floor(e.x / 42); runOnJS(onPressHandler)(leafsLength); }) .onEnd(() => runOnJS(getRatedColor)());

Had the same setup and the suggestion above worked for me. Yet to test other devices but mine is working with no issues. Thank you

You are welcome :D

[MikhailVasiliev]

@kostas64 , it looks like it works for me as well, thanks

[kostas64]

@MikhailVasiliev happy to hear that!

[piaskowyk]

Problem resolved since version 3.+, so I encourage to upgrade 🎉