'How to wait to animate a path Line after another path Line's animation?

I am using react native with reanimated 2 lib. I'd like to implement a simple checkmark

but I want it to animate as if it was being built.

I have a link here https://streamable.com/7i6arj showing the animation.

the way I implemented it using reanimated was like this:

import React, {useEffect} from 'react';
import {Dimensions, StyleSheet, View} from 'react-native';
import Animated, {
  Easing,
  useAnimatedProps,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';
import Svg, {Path} from 'react-native-svg';

const {width} = Dimensions.get('screen');

const MIDDLE_OF_SCREEN_X = width / 2 - 60 / 2;

const App = () => {
  const number = useSharedValue(20);
  const LX = useSharedValue(0);
  const LY = useSharedValue(0);

  const APath = Animated.createAnimatedComponent(Path);

  const path = useAnimatedProps(() => ({
    d: `M 0 80 L ${20 - number.value} ${100 - number.value} L ${ 20 - number.value + LX.value} ${(100 - number.value) - LY.value}`,
  }));

  useEffect(() => {
    LX.value = 0;
    LY.value = 0;
    number.value = 20;

    number.value = withTiming(0, {
      duration: 300,
      easing: Easing.in(Easing.ease),
    });

    setTimeout(() => {
      LX.value = withTiming(40);
      LY.value = withTiming(40);
    }, 300);

  }, [LX, LY, number]);

  return (
    <View
      style={styles.container}>
      <Svg height={200} width={width}>
        <APath
          strokeLinejoin="round"
          strokeLinecap="round"
          animatedProps={path}
          x={MIDDLE_OF_SCREEN_X}
          y={0}
          stroke="hotpink"
          strokeWidth={10}
        />
      </Svg>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'black',
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

my big problem is that I don't think this is the ideal way of doing so. I mean, using setTimeout for wait a animation end to start the other seems bad idea.

Ive dug through the docs but haven't found anything that could help me.

Is there anything that could help such a scheduled animations or is my animation mindset that's wrong?

thanks in advance. (°◡°♡)

checkmark



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source