App crashes when playing KeyframeAnimation with a View that is not added to the view yet

[VladimirAmiorkov]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 6.1.2
• Cross-platform modules: 6.1.2
• Android Runtime:
• iOS Runtime: 6.1.0
• Plugin(s):

Describe the bug
If you create an View in the code and you wan to animate it using KeyframeAnimation before you have added it to the UI tree the app will crash with the below error.

To Reproduce
Run the attached project and press the "Tap" button.

Expected behavior
App to not crash.

Sample project
animate-test.zip

Additional context

***** Fatal JavaScript exception - application has been terminated. *****
Native stack trace:
1 0x1012c924e NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
2 0x101305878 NativeScript::FFICallbackNativeScript::ObjCMethodCallback::ffiClosureCallback(ffi_cif*, void*, void**, void*)
3 0x101cac3d6 ffi_closure_unix64_inner
4 0x101cacdfa ffi_closure_unix64
5 0x103a0b994 CFRUNLOOP_IS_CALLING_OUT_TO_A_TIMER_CALLBACK_FUNCTION
6 0x103a0b682 __CFRunLoopDoTimer
7 0x103a0acda __CFRunLoopDoTimers
8 0x103a05a4e __CFRunLoopRun
9 0x103a04e66 CFRunLoopRunSpecific
10 0x10bd82bb0 GSEventRunModal
11 0x105be6dd0 UIApplicationMain
12 0x101cacc3d ffi_call_unix64
13 0x120cda720
JavaScript stack trace:
_getNativeAnimationArguments(file:///node_modules/tns-core-modules/ui/animation/animation.js:229:0)
at file:///node_modules/tns-core-modules/ui/animation/animation.js:204:0
at play(file:///node_modules/tns-core-modules/ui/animation/animation.js:173:0)
at animate(file:///node_modules/tns-core-modules/ui/animation/keyframe-animation.js:208:0)
at file:///node_modules/tns-core-modules/ui/animation/keyframe-animation.js:180:36
at invoke(file:///node_modules/tns-core-modules/timer/timer.js:54:30)
at tick(file:///node_modules/tns-core-modules/timer/timer.js:18:0)
at UIApplicationMain([native code])
at _start(file:///node_modules/tns-core-modules/application/application.js:295:0)
at run(file:///node_modules/tns-core-modules/application/application.js:323:0)
at file:///app/bundle.js:157:65
at ./app.ts(file:///app/bundle.js:173:34)
at webpack_require(file:///app/webpack/bootstrap:750:0)
at checkDeferredModules(file:///app/webpack/bootstrap:43:0)
at webpackJsonpCallback(file:///app/webpack/bootstrap:30:0)
at anonymous(file:///app/bundle.js:2:61)
at evaluate([native code])
at moduleEvaluation([native code])
at promiseReactionJob([native code])
JavaScript error:
file:///node_modules/tns-core-modules/ui/animation/animation.js:229:0: JS ERROR TypeError: undefined is not an object (evaluating 'nativeView.layer')
NativeScript caught signal 11.
Native Stack:
1 0x101313ba1 sig_handler(int)
2 0x1044bab5d _sigtramp
3 0x10122e0a8
4 0x1043e9b85 libunwind::UnwindCursor<libunwind::LocalAddressSpace, libunwind::Registers_x86_64>::step()
5 0x1043ede58 _Unwind_RaiseException
6 0x103f298bd __cxa_throw
7 0x103499c44 _objc_exception_destructor(void*)
8 0x1012c96cf NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
9 0x101305878 NativeScript::FFICallbackNativeScript::ObjCMethodCallback::ffiClosureCallback(ffi_cif*, void*, void**, void*)
10 0x101cac3d6 ffi_closure_unix64_inner
11 0x101cacdfa ffi_closure_unix64
12 0x103a0b994 CFRUNLOOP_IS_CALLING_OUT_TO_A_TIMER_CALLBACK_FUNCTION
13 0x103a0b682 __CFRunLoopDoTimer
14 0x103a0acda __CFRunLoopDoTimers
15 0x103a05a4e __CFRunLoopRun
16 0x103a04e66 CFRunLoopRunSpecific
17 0x10bd82bb0 GSEventRunModal
18 0x105be6dd0 UIApplicationMain
19 0x101cacc3d ffi_call_unix64
20 0x120cda720
JS Stack:
UIApplicationMain([native code])
at _start(file:///node_modules/tns-core-modules/application/application.js:295:0)
at run(file:///node_modules/tns-core-modules/application/application.js:323:0)
at file:///app/bundle.js:157:65
at ./app.ts(file:///app/bundle.js:173:34)
at webpack_require(file:///app/webpack/bootstrap:750:0)
at checkDeferredModules(file:///app/webpack/bootstrap:43:0)
at webpackJsonpCallback(file:///app/webpack/bootstrap:30:0)
at anonymous(file:///app/bundle.js:2:61)
at evaluate([native code])
at moduleEvaluation
at promiseReactionJob

[lambourn]

we see the same error "in the wild" on the App Store on some iPhones (X and XR). This does not always happen for us, though.

[VladimirAmiorkov]

@lambourn Are you by any chance using Angular ?

[lambourn]

@VladimirAmiorkov yes, we do.

To give more context: I'm analyzing some crash logs on Crashlytics with the same stack trace error message - as the code is minified I do not see the exact root cause in front of me but it's coming from the play() method

undefined is not an object (evaluating 's.layer') _getNativeAnimationArguments@file:///app/vendor.js:1:1571073 file:///app/vendor.js:1:1570276 play@file:///app/vendor.js:1:1569503 animate@file:///app/vendor.js:1:1608116

[VladimirAmiorkov]

@lambourn What kind of animations do you have in your NativeScript Angular app, do you use the Animations that are attached to an Angular Component or you do manual animations by calling the .animate() API of a View?

[lambourn]

both. But in the specific case where it crashes I think it's due to the fact that at runtime we change the CSS class of a UI element (StackLayout in that case) which in turn calls animate(), e.g. in the component TS file:

someLayout.className = "animationUp"

and the corresponding CSS Class:

.animationUp {
    animation: animateUp 750ms;
}

@keyframes animateUp {
    from {
        transform: translate(0, 1000);
    }
    to {
        transform: translate(0, 0);
    }
}

In the end somewhat similar to your sample code gets executed.

EDIT: btw, the reason why it crashes on some iOS device I do not know yet. Potentially the underlying view is not ready when the CSS class gets changed.

[lambourn]

@VladimirAmiorkov is this issue related to NativeScript/nativescript-angular#2002? At least the error is the same.

[VladimirAmiorkov]

Yes this issue was caused by a similar approach with the animations that nativescript-anuglar triggers during an ngFor creation of a list and it was related to iOS 13.