Cannot add new property '__reanimatedHostObjectRef'

Description

I can’t use an array of objects coming in through a prop inside worklets. A prop with a simple value like a number works fine. Also making a deep copy with JSON.parse(JSON.stringify(props.items)) solves the problem.

Looks like Reanimated tries to add a property on an immutable prop object and fails.

Steps to reproduce

type Props = { 
  items: Item[]
}
const MyComponent = ({ items }: Props) => {

  const foo = () => {
    'worklet'
    const item = items[0] // <-- this line causes the error
  }

  return ...
}

Expected behavior

I should be able to use any type of props in worklets

Actual behavior

Cannot add new property '__reanimatedHostObjectRef'

Package versions

• React Native: 0.64.rc-0
• React Native Reanimated: installed from https://github.com/software-mansion/react-native-reanimated/pull/1469

[thisisgit]

I had the same issue when trying to assign an object or array of objects from Redux state to a shared value.

e.g. using Redux Toolkit(RTK):

// useSelector hook from RTK
const arrayOfObjects: Test[] = useSelector(selectorReturningTests);
const assignThemToMe = useSharedValue<Test[]>([]);

// Throws above error
assignThemToMe.value = arrayOfObjects;

I tried using mock data and it worked just fine. It only throws error when trying to assign value returned from RTK’s selector. While trying to figure out where the problem is coming from, I found this:

When an object is assigned to a shared value, that object gets mutated by reanimated and a property called __reanimatedHostObjRef gets added. Same for array of objects, every object in the array gets that property after it is assigned to shared value. And looks like it’s being added by this function: https://github.com/software-mansion/react-native-reanimated/blob/45c57a906b1c3881c37f08b09749a9c68faf7ce1/Common/cpp/SharedItems/ShareableValue.cpp#L21-L34 I’m assuming that it’s throwing the error because it failed to mutate the object, i.e. failed to add __reanimatedHostObjRef property.

But why this issue only occurs when trying to assign data returned from RTK? I think it’s because RTK uses immer internally, which is used to freeze the data. And this is related to https://github.com/software-mansion/react-native-reanimated/issues/1517#issuecomment-1041810730, where it throws the same error when trying to play around with frozen object.

Probably that’s why the solution of deep copying the object/array of objects using JSON.parse(JSON.stringify(items)) works. I think it would be better to show more readable error message if this issue doesn’t get resolved anytime soon.

[dohooo]

I had the same issue when trying to assign an object or array of objects from Redux state to a shared value.

e.g. using Redux Toolkit(RTK):

// useSelector hook from RTK
const arrayOfObjects: Test[] = useSelector(selectorReturningTests);
const assignThemToMe = useSharedValue<Test[]>([]);

// Throws above error
assignThemToMe.value = arrayOfObjects;

I tried using mock data and it worked just fine. It only throws error when trying to assign value returned from RTK’s selector. While trying to figure out where the problem is coming from, I found this:

When an object is assigned to a shared value, that object gets mutated by reanimated and a property called __reanimatedHostObjRef gets added. Same for array of objects, every object in the array gets that property after it is assigned to shared value. And looks like it’s being added by this function:

https://github.com/software-mansion/react-native-reanimated/blob/45c57a906b1c3881c37f08b09749a9c68faf7ce1/Common/cpp/SharedItems/ShareableValue.cpp#L21-L34

I’m assuming that it’s throwing the error because it failed to mutate the object, i.e. failed to add __reanimatedHostObjRef property. But why this issue only occurs when trying to assign data returned from RTK? I think it’s because RTK uses immer internally, which is used to freeze the data. And this is related to #1517 (comment), where it throws the same error when trying to play around with frozen object.

Probably that’s why the solution of deep copying the object/array of objects using JSON.parse(JSON.stringify(items)) works. I think it would be better to show more readable error message if this issue doesn’t get resolved anytime soon.

Dude, you’re so cool