Progress

1import { cva, type VariantProps } from "class-variance-authority";
2import { createContext, useContext, useEffect, useMemo } from "react";
3import { View } from "react-native";
4import Animated, {
5  Easing,
6  useAnimatedStyle,
7  useSharedValue,
8  withTiming,
9} from "react-native-reanimated";
10import { cn } from "@/lib/utils";
11import { Text } from "./text";
12 
13// Constants
14const ANIMATION_DURATION = 320;
15const ANIMATION_EASING = Easing.out(Easing.cubic);
16 
17// Types
18type ProgressContextValue = VariantProps<typeof progressVariants> & {
19  value: number;
20  max: number;
21};
22 
23type ProgressProps = React.ComponentProps<typeof View> &
24  VariantProps<typeof progressVariants> & {
25    value?: number | null;
26    max?: number;
27  };
28 
29// Context
30const ProgressContext = createContext<ProgressContextValue | null>(null);
31 
32const useProgress = () => {
33  const context = useContext(ProgressContext);
34  if (!context) {
35    throw new Error("Progress components must be used within Progress");
36  }
37  return context;
38};
39 
40export function Progress({
41  className,
42  children,
43  value,
44  max = 100,
45  variant = "linear",
46  ...props
47}: ProgressProps) {
48  const normalizedValue = value ?? 0;
49 
50  const ctx = useMemo(
51    () => ({
52      max,
53      value: normalizedValue,
54      variant,
55    }),
56    [max, normalizedValue, variant]
57  );
58 
59  return (
60    <ProgressContext.Provider value={ctx}>
61      <View
62        accessibilityRole="progressbar"
63        accessibilityValue={{
64          max,
65          min: 0,
66          now: normalizedValue,
67        }}
68        className={cn("flex w-full flex-wrap gap-3", className)}
69        data-slot="progress"
70        {...props}
71      >
72        {children}
73        {variant === "steps" ? (
74          <ProgressSteps />
75        ) : (
76          <ProgressTrack>
77            <ProgressIndicator />
78          </ProgressTrack>
79        )}
80      </View>
81    </ProgressContext.Provider>
82  );
83}
84 
85function ProgressTrack({
86  className,
87  ...props
88}: React.ComponentProps<typeof View>) {
89  return (
90    <View
91      className={cn(
92        progressVariants({ variant: "linear" }),
93        "relative w-full overflow-hidden rounded-full bg-muted",
94        className
95      )}
96      data-slot="progress-track"
97      style={{ borderCurve: "continuous" }}
98      {...props}
99    />
100  );
101}
102 
103function ProgressIndicator({
104  className,
105  ...props
106}: React.ComponentProps<typeof Animated.View>) {
107  const { max, value } = useProgress();
108  const targetProgress = max > 0 ? value / max : 0;
109// … truncated