Progress

1import * as React from "react";
2import { View, Animated, Easing } from "react-native";
3import { cn } from "@/lib/utils";
4 
5interface ProgressProps {
6  value?: number;
7  max?: number;
8  className?: string;
9  indicatorClassName?: string;
10}
11 
12const Progress = React.forwardRef<View, ProgressProps>(
13  ({ value = 0, max = 100, className, indicatorClassName, ...props }, ref) => {
14    const animatedValue = React.useRef(new Animated.Value(0)).current;
15 
16    React.useEffect(() => {
17      Animated.timing(animatedValue, {
18        toValue: value,
19        duration: 500,
20        easing: Easing.bezier(0.4, 0.0, 0.2, 1),
21        useNativeDriver: false,
22      }).start();
23    }, [value, animatedValue]);
24 
25    const width = animatedValue.interpolate({
26      inputRange: [0, max],
27      outputRange: ["0%", "100%"],
28      extrapolate: "clamp",
29    });
30 
31    return (
32      <View
33        ref={ref}
34        className={cn(
35          "relative h-3 w-full overflow-hidden rounded-full bg-primary/20",
36          className
37        )}
38        {...props}
39      >
40        <Animated.View
41          className={cn(
42            "absolute left-0 top-0 h-full bg-primary",
43            indicatorClassName
44          )}
45          style={{ width }}
46        />
47      </View>
48    );
49  }
50);
51 
52Progress.displayName = "Progress";
53 
54export { Progress };