How can I animate dynamic number of elements?

[matallui]

Not sure if the title was descriptive enough, but I've just started using Reanimated and one of the things I'm struggling with is when I need to keep a dynamic size array of shared values (or animated props in this case).

I have this RouteLine component which, based on x1, y1, x2 & y2, draws a line into an SVG element and, based on the length of the line, it creates a dynamic number or animated dots which follow the line to indicate data flow.

Initially I had this so each dot's animation was driven by its own shared value, but I found some issues on web where after a while the dots get out of sync. So, I've come up with a way of having a single shared value drive all the dots animations.

However, if I resize my window, the lines will resize and I'll run into errors because my useAnimatedProps() hooks are being called in a different way.

Any ideas on how to implement this? And just in general how to tackle similar scenarios?

Example:

import React, { useEffect } from 'react';
import { Platform } from 'react-native';
import Animated, {
  Easing,
  useAnimatedProps,
  useSharedValue,
  withRepeat,
  withTiming,
} from 'react-native-reanimated';
import { Circle, Line } from 'react-native-svg';

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

interface Props {
  x1: number;
  y1: number;
  x2: number;
  y2: number;
  color: string;
  width: number;
  onPress?: () => void;
}

const RouteLine: React.FC<Props> = ({ x1, y1, x2, y2, color, width, onPress }) => {
  const distance = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
  const ndots = Math.floor(distance / 150) || 1;
  const animation = useSharedValue(0);
  const props = [];

  for (let i = 0; i < ndots; i++) {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const p = useAnimatedProps(() => {
      return {
        cx:
          x1 === x2
            ? x1
            : x1 + ((animation.value * (x2 - x1) + ((x2 - x1) / ndots) * i) % (x2 - x1)),
        cy:
          y1 === y2
            ? y1
            : y1 + ((animation.value * (y2 - y1) + ((y2 - y1) / ndots) * i) % (y2 - y1)),
      };
    });
    props.push(p);
  }

  useEffect(() => {
    animation.value = withRepeat(
      withTiming(1, { duration: 1000 * ndots, easing: Easing.linear }),
      -1,
      false
    );
  }, [animation, ndots]);

  return (
    <>
      <Line id='line' x1={x1} y1={y1} x2={x2} y2={y2} stroke={color} strokeWidth={width} />
      {/* onPress doesn't work on web: https://github.com/react-native-svg/react-native-svg/issues/1483 */}
      {Platform.OS === 'web' ? (
        <Line
          id='pressable-line'
          x1={x1}
          y1={y1}
          x2={x2}
          y2={y2}
          stroke='transparent'
          strokeWidth={width * 5}
          // @ts-ignore
          onClick={onPress}
        />
      ) : (
        <Line
          id='pressable-line'
          x1={x1}
          y1={y1}
          x2={x2}
          y2={y2}
          stroke='transparent'
          strokeWidth={width * 5}
          onPress={onPress}
        />
      )}
      {props.map((p, i) => (
        // TODO: onPress can be removed once the following change is released:
        // https://github.com/software-mansion/react-native-svg/pull/1886
        <AnimatedCircle key={i} animatedProps={p} r={width + 2} fill={color} onPress={() => {}} />
      ))}
    </>
  );
};

export default RouteLine;