Progress

A Progress component visually indicates the completion status of a task. Built on top of heroui-native Progress.

Demo

React Native components render to native views, so this is the component running in the example app, in the theme you are reading in.

9:41
Progress running in the Nayan UI example app

Usage

Source
Progress.tsx
import { View } from 'react-native';
import { useEffect, useState } from 'react';
import { NProgress, NText } from '@nayan-ui/native';


export default function ProgressScreen() {
  const [value, setValue] = useState(0);


  useEffect(() => {
    const timer = setInterval(() => {
      setValue(v => (v >= 100 ? 0 : v + 5));
    }, 300);
    return () => clearInterval(timer);
  }, []);


  return (
    <View className="p-4 gap-4">
      <NText className="text-lg font-bold">Animated</NText>
      <NProgress value={value} />
      <NText className="text-muted">{value}%</NText>


      <NText className="text-lg font-bold">Static values</NText>
      <NProgress value={0} />
      <NProgress value={25} />
      <NProgress value={50} />
      <NProgress value={75} />
      <NProgress value={100} />
    </View>
  );
}

Attributes

3 props
NameTypeDefaultDetails
valuenumberRequiredProgress value (0-100).
classNamestring' 'You can customise progress container by passing tailwind classes.
indicatorClassNamestring' 'You can customise progress indicator by passing tailwind classes.

Tags

Other components solving nearby problems.