Progress indicators let people know that your app isn't stalled while it loads content or performs lengthy operations.
import { Icon } from '@roninoss/icons';
import { Stack } from 'expo-router';
import * as React from 'react';
import { View, Text, ScrollView, Pressable } from 'react-native';
import { ProgressIndicator } from '~/components/nativewindui/ProgressIndicator';
import { useColorScheme } from '~/lib/useColorScheme';
export default function ProgressIndicatorScreen() {
const [progress, setProgress] = React.useState(13);
let id: ReturnType<typeof setInterval> | null = null;
React.useEffect(() => {
if (!id) {
id = setInterval(() => {
setProgress((prev) => (prev >= 99 ? 0 : prev + 5));
}, 1000);
}
return () => {
if (id) clearInterval(id);
};
}, []);
const { colors } = useColorScheme();
return (
<>
<Stack.Screen
options={{
title: 'NativeWindUI',
headerSearchBarOptions: {
hideWhenScrolling: false,
},
headerLargeTitle: true,
headerRight() {
return (
<Pressable className="opacity-80 active:opacity-40">
<View className="opacity-90">
<Icon name="cog-outline" color={colors.foreground} />
</View>
</Pressable>
);
},
}}
/>
<ScrollView contentInsetAdjustmentBehavior="automatic" className="p-4">
<View className="border-border bg-card gap-4 rounded-xl border p-4 pb-6 shadow-sm shadow-black/10 dark:shadow-none">
<Text className="text-foreground text-center text-sm font-medium tracking-wider opacity-60">
Progress Indicator
</Text>
<View className="p-4">
<ProgressIndicator value={progress} />
</View>
</View>
</ScrollView>
</>
);
}
npx nwui-cli@latest add progress-indicator
import { ProgressIndicator } from '~/components/nativewindui/ProgressIndicator';
<ProgressIndicator value={50} />
ProgressIndicator
Inherits all the props from React Native's View component.
Prop | Type | Description |
---|---|---|
value | number | The current value to be represented. |
max | number | The maximum value for the range. |
getValueLabel | (value: number, max: number) => string | A function to format the value label based on the current value and maximum. |