react-native-reanimated: Cannot add new property '__reanimatedHostObjectRef'

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.

For me this error happened when I referenced a StyleSheet object in the return object of useAnimatedStyle.

  const SnapAnimation = useAnimatedStyle(() => {
    return {
      ...styles.HeaderStyle, <- Error happened here
      transform: [
        {
          translateY: translateY.value,
        },
      ],
    };
  });

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

Hello, I was having this issue when using a value generated outside of the component in a useAnimatedStyle declaration e.g.:

const data = [{ id: '1', title: 'Test', backgroundColor: 'transparent' }, { id: '2', title: 'Test another', backgroundColor: '#FF6600' }, ....etc. etc.];

const Component = () => {
    const animatedBackgroundColor = useAnimatedStyle(() => {
        const inputValues = data.map((_, index) => index);
        const outputValues = data.map((item) => item.backgroundColor);
    
        const backgroundColor = interpolateColor(
          animatedBackgroundIndex.value,
          inputValues,
          outputValues,
        );
        return {
          backgroundColor,
        };
    }, [animatedBackgroundIndex]);

    return <Animated.View style={animatedBackgroundColor}>...etc...</Animated.View>;
};

Now moving the generation of input and output values to the component everything works correctly!

const data = [{ id: '1', title: 'Test', backgroundColor: 'transparent' }, { id: '2', title: 'Test another', backgroundColor: '#FF6600' }, ....etc. etc.];

const Component = () => {
    const inputValues = data.map((_, index) => index);
    const outputValues = data.map((item) => item.backgroundColor);

    const animatedBackgroundColor = useAnimatedStyle(() => {
        const backgroundColor = interpolateColor(
          animatedBackgroundIndex.value,
          inputValues,
          outputValues,
        );
        return {
          backgroundColor,
        };
    }, [animatedBackgroundIndex]);

    return <Animated.View style={animatedBackgroundColor}>...etc...</Animated.View>;
};

Hopefully this helps someone else googling this error as to what is going on. It might be worth considering a more friendly error message for this issue!