83 lines
1.8 KiB
TypeScript
83 lines
1.8 KiB
TypeScript
import React from "react";
|
|
import { View, StyleSheet, ViewStyle, StyleProp } from "react-native";
|
|
import { useTheme } from "../contexts/ThemeContext";
|
|
|
|
interface ProgressBarProps {
|
|
progress: number; // 0-1 (e.g., 0.75 for 75%)
|
|
color?: string;
|
|
backgroundColor?: string;
|
|
height?: number;
|
|
borderRadius?: number;
|
|
style?: StyleProp<ViewStyle>;
|
|
}
|
|
|
|
/**
|
|
* ProgressBar - Simple linear progress indicator
|
|
*
|
|
* Usage:
|
|
* - Goal progress tracking
|
|
* - Loading states
|
|
* - Completion indicators
|
|
*
|
|
* Props:
|
|
* - progress: Value between 0 and 1 (e.g., 0.75 for 75%)
|
|
* - color: Custom fill color (defaults to theme primary)
|
|
* - backgroundColor: Custom track color (defaults to theme border)
|
|
* - height: Bar height in pixels (defaults to 8)
|
|
* - borderRadius: Corner radius (defaults to 999 for full pill shape)
|
|
*/
|
|
export function ProgressBar({
|
|
progress,
|
|
color,
|
|
backgroundColor,
|
|
height = 8,
|
|
borderRadius = 999,
|
|
style,
|
|
}: ProgressBarProps) {
|
|
const { colors } = useTheme();
|
|
|
|
// Clamp progress between 0 and 1
|
|
const clampedProgress = Math.min(Math.max(progress, 0), 1);
|
|
|
|
const trackColor = backgroundColor || colors.border;
|
|
const fillColor = color || colors.primary;
|
|
|
|
return (
|
|
<View
|
|
style={[
|
|
styles.track,
|
|
{
|
|
height,
|
|
borderRadius,
|
|
backgroundColor: trackColor,
|
|
},
|
|
style,
|
|
]}
|
|
>
|
|
<View
|
|
style={[
|
|
styles.fill,
|
|
{
|
|
width: `${clampedProgress * 100}%`,
|
|
height,
|
|
borderRadius,
|
|
backgroundColor: fillColor,
|
|
},
|
|
]}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
track: {
|
|
width: "100%",
|
|
overflow: "hidden",
|
|
},
|
|
fill: {
|
|
position: "absolute",
|
|
left: 0,
|
|
top: 0,
|
|
},
|
|
});
|