Is Animated Not Working with new Arch

[EduardMelu]

Description

For version 1.4.62 with react native > 0.76 (new arch) No animation is working ... here is some code const DEFAULT_BAR_COLOR = accentYellow;
const DEFAULT_EMPTY_BAR_COLOR = white;

export default function HorizontalLines({
  data,
  barHeight = 10,
  containerStyle,
}: HorizontalLinesProps) {
  const stackData: stackDataItem[] = data.map(
    ({label, percentage, barColor}) => ({
      label: String(label),
      labelTextStyle: {
        color: white,
        fontSize: scaleFontSize(12),
        fontWeight: '500',
      },
      disablePress: true,
      stacks: [
        {
          borderBottomLeftRadius: barHeight / 2,
          borderBottomRightRadius: barHeight / 2,
          borderTopLeftRadius: percentage === 100 ? barHeight / 2 : 0,
          borderTopRightRadius: percentage === 100 ? barHeight / 2 : 0,
          value: percentage,
          color: (barColor as ColorValue) ?? DEFAULT_BAR_COLOR,
        },
        {
          value: percentage >= 100 ? 0 : 100 - percentage,
          color: DEFAULT_EMPTY_BAR_COLOR,
          borderTopLeftRadius: barHeight / 2,
          borderTopRightRadius: barHeight / 2,
        },
      ],
    }),
  );
  return (
    <View style={containerStyle}>
      <BarChart
        horizontal
        barWidth={barHeight}
        stackData={stackData}
        isAnimated
        maxValue={100}
        height={barHeight * 3 * data.length}
        initialSpacing={0}
        yAxisOffset={0}
        hideYAxisText
        hideAxesAndRules
        showFractionalValues
        backgroundColor={'transparent'}
      />
    </View>
  );
}

Steps to reproduce

1. Have New Arch on, and RN 0.76
2. Have some data for any type of chart
3. Turn the isAnimate prop on
4. The component flickers and it doesn't start a animation.

Snack or a link to a repository

No response

version of react-native-gifted-charts

1.4.62

React Native version

0.76

Platforms

Android

Workflow

React Native

[EduardMelu]

const DEFAULT_BAR_COLOR = accentYellow;
const DEFAULT_EMPTY_BAR_COLOR = white;

export default function HorizontalLines({
  data,
  barHeight = 10,
  containerStyle,
}: HorizontalLinesProps) {
  const stackData: stackDataItem[] = data.map(
    ({label, percentage, barColor}) => ({
      label: String(label),
      labelTextStyle: {
        color: white,
        fontSize: scaleFontSize(12),
        fontWeight: '500',
      },
      disablePress: true,
      stacks: [
        {
          borderBottomLeftRadius: barHeight / 2,
          borderBottomRightRadius: barHeight / 2,
          borderTopLeftRadius: percentage === 100 ? barHeight / 2 : 0,
          borderTopRightRadius: percentage === 100 ? barHeight / 2 : 0,
          value: percentage,
          color: (barColor as ColorValue) ?? DEFAULT_BAR_COLOR,
        },
        {
          value: percentage >= 100 ? 0 : 100 - percentage,
          color: DEFAULT_EMPTY_BAR_COLOR,
          borderTopLeftRadius: barHeight / 2,
          borderTopRightRadius: barHeight / 2,
        },
      ],
    }),
  );

  const containerRef = useRef<View>(null);
  const [measuredWidth, setMeasuredWidth] = useState(0);

  useEffect(() => {
    requestAnimationFrame(() => {
      containerRef.current?.measure((x, y, width) => {
        if (width && width !== measuredWidth) {
          setMeasuredWidth(width);
        }
      });
    });
  }, [containerRef.current]);

  const widthSV = useSharedValue(0);
  useEffect(() => {
    if (measuredWidth > 0) {
      widthSV.value = withTiming(measuredWidth, {duration: 400});
    }
  }, [measuredWidth]);

  const animatedStyle = useAnimatedStyle(() => ({
    width: widthSV.value,
  }));

  return (
    <View ref={containerRef} style={containerStyle}>
      {measuredWidth > 0 && (
        <AnimatedView style={[{overflow: 'hidden'}, animatedStyle]}>
          <BarChart
            horizontal
            barWidth={barHeight}
            stackData={stackData}
            maxValue={100}
            height={barHeight * 3 * data.length}
            initialSpacing={0}
            yAxisOffset={0}
            hideYAxisText
            hideAxesAndRules
            showFractionalValues
            backgroundColor="transparent"
          />
        </AnimatedView>
      )}
    </View>
  );
}