App.tsx

const style2 = useAnimatedStyle(() => {
    const SHORTENED_HEIGHT = VIEW_HEIGHT * 0.3;
    const width = interpolate(
      progress.value,
      [0, 1],
      [VIEW_HEIGHT, SHORTENED_HEIGHT]
    );
    const deg = interpolate(progress.value, [0, 1], [0, 50]);
    const translateY = interpolate(
      progress.value,
      [0, 1],
      [0, VIEW_HEIGHT / 2 - VIEW_WIDTH / 2]
    );
    const translateX = -interpolate(
      progress.value,
      [0, 1],
      [0, SHORTENED_HEIGHT / 2 - VIEW_WIDTH / 2]
    );
    return {
      width: width,
      height: VIEW_WIDTH,
      backgroundColor: "white",
      position: "absolute",
      top: FAB_SIZE / 2 - VIEW_WIDTH / 2,
      left: FAB_SIZE / 2 - width / 2,
      transform: [{ rotate: `${deg}deg` }, { translateY }, { translateX }],
    };
  }, []);