[2.3.0-alpha.3 / master] [iOS] `undefined is not an object (evaluating 'jsThis._closure')` — crash when using layout animation

Description

I have an application with a large list of elements (up to several hundreds) which update in real time. After adding layout animation to the elements, the following crash starts occurring occasionally during the initial mount of the list.

undefined is not an object (evaluating 'jsThis._closure')

_f@/Users/admin/<…>/node_modules/react-native-reanimated/src/createAnimatedComponent.js (408:18):1:40

reanimated::REAIOSErrorHandler::raiseSpec()
    REAIOSErrorHandler.mm:17
reanimated::ErrorHandler::raise()::'lambda'()::operator()()
decltype(std::__1::forward<reanimated::ErrorHandler::raise()::'lambda'()&>(fp)()) std::__1::__invoke<reanimated::ErrorHandler::raise()::'lambda'()&>(reanimated::ErrorHandler::raise()::'lambda'()&)
void std::__1::__invoke_void_return_wrapper<void>::__call<reanimated::ErrorHandler::raise()::'lambda'()&>(reanimated::ErrorHandler::raise()::'lambda'()&)
std::__1::__function::__alloc_func<reanimated::ErrorHandler::raise()::'lambda'(), std::__1::allocator<reanimated::ErrorHandler::raise()::'lambda'()>, void ()>::operator()()
std::__1::__function::__func<reanimated::ErrorHandler::raise()::'lambda'(), std::__1::allocator<reanimated::ErrorHandler::raise()::'lambda'()>, void ()>::operator()()
std::__1::__function::__value_func<void ()>::operator()() const
std::__1::function<void ()>::operator()() const
reanimated::REAIOSScheduler::scheduleOnUI(std::__1::function<void ()>)
reanimated::ErrorHandler::raise()
reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_3::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const::'lambda'()::operator()() const
decltype(std::__1::forward<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_3::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const::'lambda'()&>(fp)()) std::__1::__invoke<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_3::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const::'lambda'()&>(reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_3::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const::'lambda'()&)
void std::__1::__invoke_void_return_wrapper<void>::__call<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_3::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const::'lambda'()&>(reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_3::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const::'lambda'()&)
std::__1::__function::__alloc_func<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_3::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const::'lambda'(), std::__1::allocator<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_3::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const::'lambda'()>, void ()>::operator()()
std::__1::__function::__func<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_3::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const::'lambda'(), std::__1::allocator<reanimated::ShareableValue::toJSValue(facebook::jsi::Runtime&)::$_3::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long) const::'lambda'()>, void ()>::operator()()
std::__1::__function::__value_func<void ()>::operator()() const
std::__1::function<void ()>::operator()() const
reanimated::Scheduler::triggerUI()
invocation function for block in reanimated::REAIOSScheduler::scheduleOnUI(std::__1::function<void ()>)
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main
start
0x0

Expected behavior

No crashes.

Actual behavior & steps to reproduce

Crash.

Snack or minimal code example

I believe some sort of race condition is involved, so it’s hard to reproduce artificially. So I don’t have a reproducible sample yet, but please let me know if it’s necessary.

Package versions

• React Native: 0.65.1
• React Native Reanimated: 2.3.0-alpha.3 (commit 772d2b12)
• NodeJS: 16.6.1
• Xcode: 12.5.1
• Java & Gradle: -

Affected platforms

• Android
• iOS
• Web

[SimpleCreations]

@kmagiera hi, I’m not actively working on that project right now and don’t have enough free time right now to test the new version 😬 So I guess if @craigcoles doesn’t experience this issue anymore, it’s worth closing. (I’ve actually completely opted out of using layout animations in my project due to this issue - https://github.com/software-mansion/react-native-reanimated/discussions/2513)

[craigcoles]

Hi @kmagiera, we have updated our version to 2.3.1 and we are no longer seeing this issue anymore