Progress
Progress Primitive
Terminal window
~/components/ui/progress.tsx
Demo
Shows an indicator representing the advancement status of a task.
Installation
npx @react-native-reusables/cli@latest add progressCopy/paste the following code to ~/components/ui/progress.tsx:
import * as React from 'react';import { Platform } from 'react-native';import Animated, { Extrapolation, interpolate, useAnimatedStyle, useDerivedValue, withSpring,} from 'react-native-reanimated';import * as ProgressPrimitive from '~/components/primitives/progress';import { cn } from '~/lib/utils';
const Progress = React.forwardRef< React.ElementRef<typeof ProgressPrimitive.Root>, React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>>(({ className, value, ...props }, ref) => { return ( <ProgressPrimitive.Root ref={ref} className={cn('relative h-4 w-full overflow-hidden rounded-full bg-secondary', className)} {...props} > <Indicator value={value} /> </ProgressPrimitive.Root> );});Progress.displayName = ProgressPrimitive.Root.displayName;
export { Progress };
function Indicator({ value }: { value: number | undefined | null }) { const progress = useDerivedValue(() => value ?? 0);
const indicator = useAnimatedStyle(() => { return { width: withSpring( `${interpolate(progress.value, [0, 100], [1, 100], Extrapolation.CLAMP)}%`, { overshootClamping: true } ), }; });
if (Platform.OS === 'web') { return ( <ProgressPrimitive.Indicator className='h-full w-full flex-1 bg-primary web:transition-all' style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }} /> ); }
return ( <ProgressPrimitive.Indicator asChild> <Animated.View style={indicator} className={cn('h-full bg-foreground')} /> </ProgressPrimitive.Indicator> );}Usage
import { Progress } from '~/components/ui/progress';
function Example() { return <Progress value={87} className='web:w-[60%]' />;}Props
Progress
Extends View props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
| value | number | null | undefined | (optional) |
| max | number | (optional) |
| getValueLabel | (value: number, max: number): string | (optional) |