Progress Component

A flexible and animated progress bar component for React Native applications with support for both determinate and indeterminate progress states.

Features

📊 Determinate Progress - Show specific progress values (0-100%)
🔄 Indeterminate Progress - Animated loading indicator for unknown durations
🎨 Customizable Styling - Full control over colors, dimensions, and border radius
⚡ Smooth Animations - Built with React Native Reanimated for optimal performance
📱 Responsive Design - Adapts to different screen sizes and orientations
🎯 TypeScript Ready - Full type safety and IntelliSense support

Installation

💻Bash

npm install rn-base-component
# or
yarn add rn-base-component

Basic Usage

Determinate Progress

⚛️TSX

import React from 'react'
import { Progress } from 'rn-base-component'

export default function App() {
  return 
}

Indeterminate Progress

⚛️TSX

import { Progress } from 'rn-base-component'

Advanced Usage

Custom Styling

⚛️TSX

File Upload Progress

⚛️TSX

import React, { useState, useEffect } from 'react'
import { View, Text } from 'react-native'
import { Progress, Button } from 'rn-base-component'

export default function FileUploader() {
  const [progress, setProgress] = useState(0)
  const [isUploading, setIsUploading] = useState(false)

  const simulateUpload = () => {
    setIsUploading(true)
    setProgress(0)
    
    const interval = setInterval(() => {
      setProgress(prev => {
        if (prev >= 100) {
          clearInterval(interval)
          setIsUploading(false)
          return 100
        }
        return prev + Math.random() * 10
      })
    }, 200)
  }

  return (
    
      
      
      {isUploading && (
        
          
          
            {Math.round(progress)}%
          
        
      )}
    
  )
}

Loading Indicator

⚛️TSX


  
  Loading...

API Reference

ProgressProps

Prop	Type	Default	Description
`value`	`number`	`0`	Progress value (0-100)
`width`	`number`	`200`	Width of the progress bar
`height`	`number`	`6`	Height of the progress bar
`backgroundColor`	`string`	`#E5E7EB`	Background color of the progress track
`progressColor`	`string`	`theme.primaryColor`	Color of the progress fill
`borderRadius`	`number`	`3`	Border radius of the progress bar
`isIndeterminateProgress`	`boolean`	`false`	Enable indeterminate progress animation
`animationDuration`	`number`	`1000`	Duration of indeterminate animation (ms)
`style`	`StyleProp<ViewStyle>`	`undefined`	Custom style for the container

Value Range

The value prop accepts numbers from 0 to 100, representing the percentage of completion.

Common Use Cases

Download Progress

⚛️TSX

import React, { useState } from 'react'
import { View, Text } from 'react-native'
import { Progress, Button } from 'rn-base-component'

export default function DownloadManager() {
  const [downloads, setDownloads] = useState([])

  const startDownload = (filename) => {
    const newDownload = {
      id: Date.now(),
      filename,
      progress: 0,
      completed: false,
    }
    
    setDownloads(prev => [...prev, newDownload])
    
    // Simulate download progress
    const interval = setInterval(() => {
      setDownloads(prev => prev.map(download => {
        if (download.id === newDownload.id && !download.completed) {
          const newProgress = download.progress + Math.random() * 15
          if (newProgress >= 100) {
            clearInterval(interval)
            return { ...download, progress: 100, completed: true }
          }
          return { ...download, progress: newProgress }
        }
        return download
      }))
    }, 300)
  }

  return (
    
      
      
      {downloads.map(download => (
        
          {download.filename}
          
          
            {download.completed ? 'Complete' : `${Math.round(download.progress)}%`}
          
        
      ))}
    
  )
}

Multi-step Form Progress

⚛️TSX


  Step {currentStep} of {totalSteps}

Best Practices

Meaningful Values - Ensure progress values accurately represent completion
Smooth Updates - Update progress incrementally for smooth animations
Visual Feedback - Use appropriate colors to indicate different states
Accessibility - Provide text alternatives for progress information
Performance - Avoid too frequent updates that could impact performance
User Experience - Show indeterminate progress for unknown durations

Performance

For smooth animations, avoid updating the progress value more than 60 times per second.