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 ProgressPrimitive from '@rn-primitives/progress';import * as React from 'react';import { Platform, View } from 'react-native';import Animated, { Extrapolation, interpolate, useAnimatedStyle, useDerivedValue, withSpring,} from 'react-native-reanimated';import { cn } from '~/lib/utils';
const Progress = React.forwardRef< ProgressPrimitive.RootRef, ProgressPrimitive.RootProps & { indicatorClassName?: string; }>(({ className, value, indicatorClassName, ...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} className={indicatorClassName} /> </ProgressPrimitive.Root> );});Progress.displayName = ProgressPrimitive.Root.displayName;
export { Progress };
function Indicator({ value, className }: { value: number | undefined | null; className?: string }) { 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 ( <View className={cn('h-full w-full flex-1 bg-primary web:transition-all', className)} style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }} > <ProgressPrimitive.Indicator className={cn('h-full w-full', className)} /> </View> ); }
return ( <ProgressPrimitive.Indicator asChild> <Animated.View style={indicator} className={cn('h-full bg-foreground', className)} /> </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) |