Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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;