Callback on withTiming runs before animation completes

[FrancoTanzarella]

As the title says. I am trying to run two animations one after the other using the callback on withTiming but on load it skips to the last animation and I get double logs for each "isFinished"

  export const SplashScreen = ({ children }: { children: React.ReactNode }) => {
  const [showSplash, setShowSplash] = useState(true);
  const progress = useSharedValue(0);
  const screenProgress = useSharedValue(false);
  const { top } = useSafeAreaInsets();

  const screenAnimationComplete = (value: boolean) => {
    setShowSplash(!value);
  };

  const logoAnimationComplete = (value: boolean) => {
    screenProgress.value = value;
  };

  const animateSplash = useAnimatedStyle(() => {
    const translateX = withTiming(
      progress.value === 1 ? width / 2 - (LOGO_SIZE / 2 + 40) : progress.value
    );

    const translateY = withTiming(
      progress.value === 1 ? -(height - top) / 2 + LOGO_SIZE : progress.value
    );

    const w = withTiming(progress.value === 1 ? 85 : 100);

    const h = withTiming(
      progress.value === 1 ? 85 : 100,
      undefined,
      (isFinished) => {
        if (isFinished) {
          console.log({ logo_animation_complete: isFinished });
          runOnJS(logoAnimationComplete)(true);
        }
      }
    );
    return {
      transform: [{ translateX }, { translateY }],
      width: w,
      height: h,
    };
  });

  const animateScreen = useAnimatedStyle(() => {
    const opacity = withTiming(
      screenProgress.value ? 0 : 1,
      undefined,
      (isFinished) => {
        if (isFinished) {
          console.log({ screen_animation_complete: isFinished });
          runOnJS(screenAnimationComplete)(true);
        }
      }
    );
    return {
      opacity,
    };
  });

  return (
    <>
      {children}
      {showSplash && (
        <Screen style={[animateScreen]}>
          <Animated.View style={animateSplash}>
            <LottieView
              source={require('../assets/splash_logo_2.json')}
              autoPlay
              loop={false}
              onAnimationFinish={() => {
                progress.value = 1;
              }}
            />
          </Animated.View>
        </Screen>
      )}
    </>
  );
};

[FrancoTanzarella]

Had a rest and looked at the coded again. Updated as follows and now is working as expected :)

const animateSplash = useAnimatedStyle(() => {
    const translateX =
      progress.value === 1
        ? withTiming(width / 2 - (LOGO_SIZE / 2 + 40))
        : progress.value;

    const translateY =
      progress.value === 1
        ? withTiming(-(height - top) / 2 + LOGO_SIZE)
        : progress.value;

    const w = progress.value === 1 ? withTiming(85) : 100;

    const h =
      progress.value === 1
        ? withTiming(85, undefined, (isFinished) => {
            if (isFinished) {
              console.log({ logo_animation_complete: isFinished });
              runOnJS(logoAnimationComplete)(true);
            }
          })
        : 100;

    return {
      transform: [{ translateX }, { translateY }],
      width: w,
      height: h,
    };
  }, [progress]);

  const animateScreen = useAnimatedStyle(() => {
    const opacity = !screenProgress.value
      ? 1
      : withDelay(
          1000,
          withTiming(0, undefined, (isFinished) => {
            if (isFinished) {
              console.log({ screen_animation_complete: isFinished });
              runOnJS(screenAnimationComplete)(true);
            }
          })
        );
    return {
      opacity,
    };
  }, [screenProgress]);