Open History to see the last commit
1import { ProgressView } from "@expo/ui/swift-ui";
2import { progressViewStyle, tint } from "@expo/ui/swift-ui/modifiers";
3import { View } from "react-native";
4import { useReducedMotion } from "react-native-reanimated";
5import { NativeThemeHost } from "./NativeThemeHost";
6import { useControlTheme } from "./useControlTheme";
7import { clampProgress, type ProgressProps } from "./Progress.types";
8
9export function Progress(props: ProgressProps) {
10 const value = clampProgress(props.value);
11 const reducedMotion = useReducedMotion();
12 const { colors } = useControlTheme();
13 return (
14 <View
15 className={props.className}
16 accessible
17 accessibilityRole="progressbar"
18 accessibilityLabel={props.label}
19 accessibilityValue={
20 value === undefined ? undefined : { min: 0, max: 100, now: Math.round(value * 100) }
21 }
22 accessibilityState={{ busy: value === undefined }}
23 >
24 {reducedMotion && value === undefined ? (
25 <View className="h-1 rounded-full bg-primary/30" />
26 ) : (
27 <NativeThemeHost matchContents={{ vertical: true }} style={{ width: "100%" }}>
28 <ProgressView
29 value={value}
30 modifiers={[progressViewStyle("linear"), tint(colors["--color-primary"])]}
31 />
32 </NativeThemeHost>
33 )}
34 </View>
35 );
36}
37
38export type { ProgressProps } from "./Progress.types";