Progress Primitive
Shows an indicator representing the advancement status of a task.
Installation
Install the component via your command line.
npx expo install @rn-primitives/progressInstall @radix-ui/react-progress
npx expo install @radix-ui/react-progressCopy/paste the following code for web to ~/components/primitives/progress/progress.web.tsx
import * as Progress from '@radix-ui/react-progress';import * as Slot from '~/components/primitives/slot';import type { SlottableViewProps, ViewRef } from '~/components/primitives/types';import * as React from 'react';import { View } from 'react-native';import type { ProgressRootProps } from './types';
const ProgressContext = React.createContext<ProgressRootProps | null>(null);
const Root = React.forwardRef<ViewRef, SlottableViewProps & ProgressRootProps>( ({ asChild, value, max, getValueLabel, ...props }, ref) => { const Component = asChild ? Slot.View : View; return ( <ProgressContext.Provider value={{ value, max }}> <Progress.Root value={value} max={max} getValueLabel={getValueLabel} asChild> <Component ref={ref} {...props} /> </Progress.Root> </ProgressContext.Provider> ); });
Root.displayName = 'RootProgress';
const Indicator = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.View : View; return ( <Progress.Indicator asChild> <Component ref={ref} {...props} /> </Progress.Indicator> );});
Indicator.displayName = 'IndicatorProgress';
export { Indicator, Root };Copy/paste the following code for native to ~/components/primitives/progress/progress.tsx
import * as React from 'react';import { View } from 'react-native';import * as Slot from '~/components/primitives/slot';import type { SlottableViewProps, ViewRef } from '~/components/primitives/types';import type { ProgressRootProps } from './types';
// This project uses code from WorkOS/Radix Primitives.// The code is licensed under the MIT License.// https://github.com/radix-ui/primitives/tree/main
const DEFAULT_MAX = 100;
const Root = React.forwardRef<ViewRef, SlottableViewProps & ProgressRootProps>( ( { asChild, value: valueProp, max: maxProp, getValueLabel = defaultGetValueLabel, ...props }, ref ) => { const max = maxProp ?? DEFAULT_MAX; const value = isValidValueNumber(valueProp, max) ? valueProp : 0;
const Component = asChild ? Slot.View : View; return ( <Component role='progressbar' ref={ref} aria-valuemax={max} aria-valuemin={0} aria-valuenow={value} aria-valuetext={getValueLabel(value, max)} accessibilityValue={{ min: 0, max, now: value, text: getValueLabel(value, max), }} {...props} /> ); });
Root.displayName = 'RootProgress';
const Indicator = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.View : View; return <Component ref={ref} role='presentation' {...props} />;});
Indicator.displayName = 'IndicatorProgress';
export { Indicator, Root };
function defaultGetValueLabel(value: number, max: number) { return `${Math.round((value / max) * 100)}%`;}
function isValidValueNumber(value: any, max: number): value is number { return typeof value === 'number' && !isNaN(value) && value <= max && value >= 0;}Copy/paste the following code for types to ~/components/primitives/progress/types.ts
interface ProgressRootProps { value?: number | null | undefined; max?: number; getValueLabel?(value: number, max: number): string;}
export type { ProgressRootProps };Copy/paste the following code for exporting to ~/components/primitives/progress/index.ts
export * from './progress';Copy/paste the following code for native to ~/components/primitives/progress/index.tsx
import * as React from 'react';import { View } from 'react-native';import * as Slot from '~/components/primitives/slot';import type { SlottableViewProps, ViewRef } from '~/components/primitives/types';import type { ProgressRootProps } from './types';
// This project uses code from WorkOS/Radix Primitives.// The code is licensed under the MIT License.// https://github.com/radix-ui/primitives/tree/main
const DEFAULT_MAX = 100;
const Root = React.forwardRef<ViewRef, SlottableViewProps & ProgressRootProps>( ( { asChild, value: valueProp, max: maxProp, getValueLabel = defaultGetValueLabel, ...props }, ref ) => { const max = maxProp ?? DEFAULT_MAX; const value = isValidValueNumber(valueProp, max) ? valueProp : 0;
const Component = asChild ? Slot.View : View; return ( <Component role='progressbar' ref={ref} aria-valuemax={max} aria-valuemin={0} aria-valuenow={value} aria-valuetext={getValueLabel(value, max)} accessibilityValue={{ min: 0, max, now: value, text: getValueLabel(value, max), }} {...props} /> ); });
Root.displayName = 'RootProgress';
const Indicator = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.View : View; return <Component ref={ref} role='presentation' {...props} />;});
Indicator.displayName = 'IndicatorProgress';
export { Indicator, Root };
function defaultGetValueLabel(value: number, max: number) { return `${Math.round((value / max) * 100)}%`;}
function isValidValueNumber(value: any, max: number): value is number { return typeof value === 'number' && !isNaN(value) && value <= max && value >= 0;}Copy/paste the following code for types to ~/components/primitives/progress/types.ts
interface ProgressRootProps { value?: number | null | undefined; max?: number; getValueLabel?(value: number, max: number): string;}
export type { ProgressRootProps };Usage
import * as ProgressPrimitive from '@rn-primitives/progress';
function Example() { return ( <ProgressPrimitive.Root> <ProgressPrimitive.Indicator /> </ProgressPrimitive.Root> );}Props
Root
Extends View props
| Prop | Type | Note |
|---|---|---|
| value | number | null | undefined | |
| asChild | boolean | (optional) |
| max | number | (optional) |
| getValueLabel | (value: number, max: number): string | (optional) |
Indicator
Extends View props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |