useAnimatedProps and useAnimatedStyle crash the application on android if they return an object with a key that is set to an object with multiple keys

Description

We have noticed a bug with useAnimatedStyle and useAnimatedProps only on android.

If you run useAnimatedStyle or useAnimatedProps and return an object with a key that is set to another object with multiple keys, the application crashes. For example:

    const animatedProps = useAnimatedProps(() => ({
        mapPadding: { top: 20, left: 20, bottom: 20, right: 20 },
    }));

^The code above breaks. If you remove left, bottom, and right, and only keep top there, the application does not break. ONLY if you provide multiple keys in to a nested object does it break.

Expected behavior

The expected behavior is that the application does not crash if you return a nested object with multiple keys from a useAnimatedProps and a useAnimatedStyle

Actual behavior & steps to reproduce

If you declare a variable and assign it to a value that uses useAnimatedProps or useAnimatedStyle, and these hooks return an object where a key is assigned to another object with multiple keys, the application breaks.

Interestingly, on small playground applications, if you use these hooks in this way and apply them to a Reanimated View, the application does not crash, but the moment you remove the prop/style from the Reanimated View, it crashes. You will ONLY see this issue in small playground applications if you create variables using useAnimatedProps and useAnimatedStyle and DO NOT apply them to a Reanimated View.

However, if you conditionally render the Reanimated View (in any kind of application) where you apply the animated props/animated style, or if your application is more complex with a complex View hierarchy (like it is with our production app), the application crashes.

My hunch is that the use of useAnimatedProps and useAnimatedStyle on android needs the Reanimated View they are being applied to to exist in the View hierarchy before the hooks have completed executing.

I also wanted to mention again that this works perfectly on iOS.

Snack or minimal code example

https://snack.expo.dev/@hmust92/reanimated-2-example

Stack Trace

We were unable see any logs on the Javascript side, but we were able to find error logs on on the device logs using Flipper.

Device Error Logs

signal 6 (SIGABRT), code -1 (SI_QUEUE), fault addr --------
Abort message: 'JNI DETECTED ERROR IN APPLICATION: JNI GetObjectRefType called with pending exception java.lang.RuntimeException: Javascript worklet error
In file: ......./node_modules/react-native-reanimated/src/reanimated2/UpdateProps.ts (29:27)
  at void com.swmansion.reanimated.AndroidErrorHandler.raise(java.lang.String) (AndroidErrorHandler.java:6)
  at void com.swmansion.reanimated.Scheduler.triggerUI() (Scheduler.java:-2)
  at void com.swmansion.reanimated.Scheduler.access$100(com.swmansion.reanimated.Scheduler) (Scheduler.java:9)
  at void com.swmansion.reanimated.Scheduler$1.run() (Scheduler.java:21)
  at void android.os.Handler.handleCallback(android.os.Message) (Handler.java:883)
  at void android.os.Handler.dispatchMessage(android.os.Message) (Handler.java:100)
  at void com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(android.os.Message) (MessageQueueThreadHandler.java:27)
  at void android.os.Looper.loop() (Looper.java:237)
  at void android.app.ActivityThread.main(java.lang.String[]) (ActivityThread.java:8125)
  at java.lang.Object java.lang.reflect.Method.invoke(java.lang.Object, java.lang.Object[]) (Method.java:-2)
  at void com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run() (RuntimeInit.java:496)
  at void com.android.internal.os.ZygoteInit.main(java.lang.String[]) (ZygoteInit.java:1100)
in call to GetObjectRefType
from void com.swmansion.reanimated.Scheduler.triggerUI()'
x0  0000000000000000  x1  0000000000006677  x2  0000000000000006  x3  0000007fc707e310
x4  fefeff7cff5a8f97  x5  fefeff7cff5a8f97  x6  fefeff7cff5a8f97  x7  7f7f7f7f7f7fffff
x8  00000000000000f0  x9  c96e88ec53f5ed4a  x10 0000000000000001  x11 0000000000000000
x12 fffffff0fffffbdf  x13 ffffffffffffffff  x14 0000000000000000  x15 ffffffffffffffff
x16 0000007e00d888c0  x17 0000007e00d64fe0  x18 0000000000000002  x19 0000000000006677
x20 0000000000006677  x21 00000000ffffffff  x22 0000007d68391000  x23 0000007d7dab4d05
x24 0000007d7dad692c  x25 0000000000000002  x26 0000007e03b3b258  x27 0000007e03ffa1e0
x28 0000007d7dfe0338  x29 0000007fc707e3b0
sp  0000007fc707e2f0  lr  0000007e00d1627c  pc  0000007e00d162a8

Package versions

• React Native
  • We tested on React Native v0.63.0, v0.63.4, and v0.64.2. We also tested this both with Hermes and without Hermes.
• React Native Reanimated: v2.2.0

Affected platforms

• Android
• iOS
• Web

[Noitidart]

I don’t think this is fixed, I had this crash in production, and error-but-no-crash in development. I’m using:

Expo v44.0.0 react-native-reanimated v2.3.1 react-native-gesture-handler v2.1.0 (just in case it helps)

[piaskowyk]

Hey, @hmust92 thanks for your report. This issue looks like a duplicate of https://github.com/software-mansion/react-native-reanimated/issues/2040 so if you don’t mind I close this issue. We will resolve both issues after this week’s release.