Error when setting shared value. Message: Cannot add new property '__reanimatedHostObjRef'

[ronickg]

Description

I created a custom stacked bar chart which uses reanimted2 for animations. And therefore I am using shared values to also display the current values from the selected bar when pressed.

Expected behavior

Change tooltip values when pressing on a bar.

Actual behavior & steps to reproduce

The behavior works correctly. But I can't explain why I need to create a new object instead of just passing in the values directly from the list that creates each bar. Error message reads as "Cannot add new property '__reanimatedHostObjRef'

Snack or minimal code example

https://github.com/openchia/mobile/blob/master/src/charts/TestStackedBarChart.js

import React from 'react';
import { PanResponder, View } from 'react-native';
import Animated, { useSharedValue } from 'react-native-reanimated';
import { Path, Svg } from 'react-native-svg';
import useAnimatedPath from './useAnimatedPath';
import { createPaths } from './Utils';

const AnimatedPath = Animated.createAnimatedComponent(Path);

const Bar = ({ color, path, itemKey, pressed, selectedPoints, points, test }) => {
  const { animatedProps } = useAnimatedPath({
    enabled: true,
    itemKey,
    pressed,
    path,
  });

  const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderGrant: () => {
      // Points work
      console.log(points);
      // Test doesn't
      console.log(test);
      // This is the value I set equal to points
      selectedPoints.value = points;

      pressed.value = itemKey;
    },
    onPanResponderRelease: () => {
      selectedPoints.value = null;
      pressed.value = -1;
    },
  });
  return <AnimatedPath animatedProps={animatedProps} fill={color} {...panResponder.panHandlers} />;
};

const TestStackedBarChart = ({ data, height, width, keys, colors, selectedPoints }) => {
  const pressed = useSharedValue(false);
  console.log('called');

  return (
    <View height={height}>
      <Svg width={width} height={height}>
        {createPaths({ data, keys, colors, height, width }).map((bar, index) => {
          const keyIndex = index % data.length;
          const key = `${keyIndex}-${bar.key}`;
          return (
            <Bar
              key={key}
              itemKey={keyIndex}
              color={bar.color}
              // This is how I intially did it but would crash
              test={bar.points}
              // This works but is exactly the same object like the one ontop
              points={{
                failed: bar.points.failed,
                passed: bar.points.passed,
                time: { start: bar.points.time.start, end: bar.points.time.end },
              }}
              selectedPoints={selectedPoints}
              path={bar.path}
              pressed={pressed}
            />
          );
        })}
      </Svg>
    </View>
  );
};
export default TestStackedBarChart;

Package versions

name	version
react-native	0.66.4
react-native-reanimated	2.3.1
NodeJS	v16.13.0
Xcode
Java	1.8.0_311-b11
Gradle
expo

Affected platforms

• Android
• iOS
• Web

[kmagiera]

Thanks for reporting @BubbleTrouble14

Apparently, I'm not sure I understand the description here. What you mean by "I need to create a new object"? Where you create that new object? Is this somewhere in the code you provided? Should I expect to see the error you mentioned when trying to run the provided code?

[braandl]

@kmagiera Sorry to interrupt, but did you look at this issue: #1517 ?
It is a duplicate of this ticket, but the discussion leads way futher.

[ronickg]

@kmagiera Sorry to interrupt, but did you look at this issue: #1517 ? It is a duplicate of this ticket, but the discussion leads way futher.

Maybe simimlar yes. Let me provide both the working code and the crashing one for better clarity.

[dohooo]

@BubbleTrouble14 @kmagiera Is there any new progress?

[dohooo]

Thanks for reporting @BubbleTrouble14

Apparently, I'm not sure I understand the description here. What you mean by "I need to create a new object"? Where you create that new object? Is this somewhere in the code you provided? Should I expect to see the error you mentioned when trying to run the provided code?

dohooo/react-native-reanimated-carousel#66 I wonder if it can help you

[ronickg]

Thanks for reporting @BubbleTrouble14
Apparently, I'm not sure I understand the description here. What you mean by "I need to create a new object"? Where you create that new object? Is this somewhere in the code you provided? Should I expect to see the error you mentioned when trying to run the provided code?

dohooo/react-native-reanimated-carousel#66 I wonder if it can help you

Yes I think they could be related.

[dohooo]

Maybe we can reopen this issue.

[ronickg]

I still need to improve the details on this issue and maybe create a codesandox of it.

[dohooo]

@BubbleTrouble14 Is there any progress?