Set up shared values for a collection of elements

[matthiasferch]

I'm using react-native-svg to draw a collection of shapes. I want to animate those shapes in succession with a short delay between them. I know I can set up the animations with a combination of withDelay and withSpring but I'm not sure how to set up the shared values.

The following component draws ten circles but so far, only the last one's radius will be animated, presumably because one set of animated props can only be used by one element. So how would I set up the shared values so I can track one animation per circle and start them independently?

import Animated, {
  useSharedValue,
  useAnimatedProps,
  withSpring,
} from 'react-native-reanimated';
import Svg, { Circle } from 'react-native-svg';

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

export function App() {
  const circles = Array.from(Array(10).keys()).map(index => {
    return { cx: index * 20, cy: 20 };
  });

  const radius = useSharedValue(5);

  const animatedProps = useAnimatedProps(() => {
    return { r: radius.value };
  });

  useEffect(() => { radius.value = withSpring(10) });

  return (
    <Svg>
      {
        circles.map((circle, index) => {
          return <AnimatedCircle key={index} cx={circle.cx + 10} cy={circle.cy} animatedProps={animatedProps} fill={'black'} />
        })
      }
    </Svg>
  );
}

[andreialecu]

One simple way to do this would be to create a separate component out of your circle, and hook into animated props from within it.

Rough example:

function MyCircle(circle) {
  const animatedProps = useAnimatedProps(() => {
    return { r: radius.value };
  });

  return <AnimatedCircle cx={circle.cx + 10} cy={circle.cy} animatedProps={animatedProps} fill={'black'} />
}

// ...
return (
    <Svg>
      {
        circles.map((circle, index) => {
          return <MyCircle key={index} circle={circle} />
        })
      }
    </Svg>
  );