Components
ProgressIndicator
This example is composed with Storybook args. Open the interactive workbench to change its props and inspect the generated API controls.
Import
import { ProgressIndicator } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
value | — | — | Current progress, in the same units as max. Animates between values rather than jumping. |
max | — | — | Value that counts as full. Defaults to 100, so an unconfigured indicator reads as a percentage. |
className | — | "w-80" | Width lives here — the bar has no intrinsic width and collapses without one. |
Examples
Animated
The bar is driven by a reanimated spring, so a static screenshot understates it — press the button to watch it settle.
{
function Stepper() {
const [value, setValue] = React.useState(15);
return (
<View className="items-start gap-4">
<ProgressIndicator {...args} value={value} />
<Text variant="footnote" color="tertiary">
{value}
% complete
</Text>
<Button size="sm" onPress={() => setValue(v => (v >= 100 ? 0 : v + 25))}>
<Text>Advance</Text>
</Button>
</View>
);
}
return <Stepper />;
}Steps
<View className="gap-6">
{[0, 25, 50, 75, 100].map(value => (
<View key={value} className="gap-2">
<Text variant="caption2" color="tertiary" className="font-mono">
{value}
%
</Text>
<ProgressIndicator {...args} value={value} />
</View>
))}
</View>