Application crash when using transformOrigin in useAnimatedStyle

[gvsboy]

Description

When using transformOrigin in useAnimatedStyle, the application crashes with the following error: ReanimatedError: Exception in HostFunction: <unknown>, js engine: reanimated

I see one related issue (#5726) but it is closed so I decided to open a new issue with more details.

Steps to reproduce

I've provided a Snack link so you can reproduce:

1. Open the Snack link
2. Click on iOS
3. The application loads
4. Hold down option and drag on the ball to simulate a pinch. The app should crash immediately.

Snack or a link to a repository

https://snack.expo.dev/@gvsboy/reanimated-crash-demo

Reanimated version

3.8.1

React Native version

0.73.6

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Paper (Old Architecture)

Build type

Debug app & dev bundle

Device

iOS simulator

Device model

iPhone 12

Acknowledgements

Yes

[gmartpad]

Any update?

[szydlovsky]

@gmartpad working on it 🫡

[a-eid]

We're having the same issue, not sure if it was working in previous versions of reanimated.

[alexdukeb]

Hello everyone,

I recently encountered the same app crash issue (using version ^3.11.0) and was attempting to set a string value for the transformOrigin property, similar to your approach.

Here's the code that resolved the issue for me:

const animatedStyle = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }], transformOrigin: [originX.value, originY.value, 0], }));

As you can see, the transformOrigin is set as an array containing the x and y values, along with a 0 for the depth (optional). You can also use strings for percentage values within the array.

Hope this helps!

[szydlovsky]

@alexdukeb this is great news, thank you for the workaround idea! Nevertheless, all the possible values of transformOrigin should be usable so it's not the end of the issue 😄