Skia+Reanimated.tsx

export const Breathe = () => {
  const progress = useLoop(
    {
      duration: 3000,
      easing: Easing.inOut(Easing.ease),
    },
    { yoyo: true }
  );
  return (
    <Canvas style={styles.container} debug>
      <Paint blendMode="screen">
        <BlurMask style="solid" sigma={40} />
      </Paint>
      <Fill color="rgb(36,43,56)" />
      <Group
        origin={center}
        transform={() => [{ rotate: mix(progress.value, -Math.PI, 0) }]}
      >
        {new Array(6).fill(0).map((_, index) => {
          return <Ring key={index} index={index} progress={progress} />;
        })}
      </Group>
    </Canvas>
  );
};