1.react-native-freelifemakers-ui NPM Module Install

npm install react-native-freelifemakers-ui

2.Usage

1)import Module

import {FlmProgressBarFlmText, FlmButton, FlmDialog} from 'react-native-freelifemakers-ui';

2)FlmProgressBar

      <FlmProgressBar
        label="파일 다운로드 중/Downloading file"
        progress={currentProgress}
        height={15}
        barColor="#4CAF50" // 녹색 바 / green bar
        trackColor="#e0e0e0"
        showPercentage={true}
        style={styles.progressBarWrapper}
        labelStyle={styles.progressBarLabel}
      />

3.Full Code

import React, { useState, useEffect } from "react";
import { View, Text, StyleSheet, Animated } from "react-native";

// FlmProgressBar 컴포넌트
// 이 컴포넌트는 진행률을 시각적으로 표시하는 프로그레스 바 UI를 제공합니다.
// This component provides a progress bar UI to visually display progress.
const FlmProgressBar = ({
  // 현재 진행률 (0-100 사이의 값) / Current progress value (between 0-100)
  progress = 0,
  
  // 프로그레스 바의 높이 / Height of the progress bar
  height = 10, 
  
  // 진행률 바의 색상 / Color of the progress bar
  barColor = "#2563eb",
  
  // 트랙(배경)의 색상 / Color of the track (background)
  trackColor = "#e5e7eb",
  
  // 프로그레스 바 옆에 표시될 텍스트 레이블 
  // Text label to be displayed next to the progress bar
  label,
  
  // 진행률 퍼센트를 표시할지 여부 
  // Whether to show the percentage progress
  showPercentage = true, 
  
  // 전체 컨테이너에 적용될 스타일 
  // Style to be applied to the entire container
  style,
  
  // 레이블 텍스트에 적용될 스타일 
  // Style to be applied to the label text
  labelStyle, 
  
  // 진행률 바 자체에 적용될 스타일 
  // Style to be applied to the progress bar itself
  barStyle, 
  
  // 트랙 부분에 적용될 스타일 
  // Style to be applied to the track part
  trackStyle, 
  
  // 퍼센트 텍스트에 적용될 스타일 
  // Style to be applied to the percentage text
  percentageTextStyle, 
}) => {
  // 진행률 애니메이션 값 초기화
  // Initialize progress animation value
  const animatedProgress = useState(new Animated.Value(progress))[0];

  // progress prop이 변경될 때 애니메이션 업데이트
  // Update animation when progress prop changes
  useEffect(() => {
    Animated.timing(animatedProgress, {
      toValue: progress,
       // 0.3초 동안 애니메이션 / Animation for 0.3 seconds
      duration: 300,
      // width 애니메이션에는 useNativeDriver를 false로 설정해야 합니다.
      // useNativeDriver must be set to false for width animation.
      useNativeDriver: false, 

    }).start();
  }, [progress, animatedProgress]);

  // 진행률 값의 유효성 검사 및 클램핑 (0-100)
  // Validate and clamp progress value (0-100)
  const clampedProgress = Math.min(Math.max(progress, 0), 100);

  // 애니메이션된 너비 계산
  // Calculate animated width
  const widthInterpolation = animatedProgress.interpolate({
    inputRange: [0, 100],
    outputRange: ["0%", "100%"],
  });

  return (
    <View style={[styles.container, style]}>
      {/* 레이블 텍스트 */}
      {/* Label text */}
      {label && <Text style={[styles.label, labelStyle]}>{label}</Text>}

      {/* 프로그레스 바 트랙 컨테이너 */}
      {/* Progress bar track container */}
      <View
        style={[
          styles.track,
          { height: height, backgroundColor: trackColor },
          trackStyle,
        ]}
      >
        {/* 진행률 바 */}
        {/* Progress bar */}
        <Animated.View
          style={[
            styles.bar,
            {
              width: widthInterpolation,
              height: height,
              backgroundColor: barColor,
            },
            barStyle,
          ]}
        />
      </View>

      {/* 퍼센트 텍스트 */}
      {/* Percentage text */}
      {showPercentage && (
        <Text style={[styles.percentageText, percentageTextStyle]}>
          {`${clampedProgress.toFixed(0)}%`}
        </Text>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: "100%",
    paddingVertical: 10,
    paddingHorizontal: 15,
    borderRadius: 8,
    backgroundColor: "#ffffff",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2,
    marginVertical: 5,
  },
  label: {
    fontSize: 16,
    fontWeight: "600",
    color: "#333333",
    marginBottom: 8,
  },
  track: {
    width: "100%",
    borderRadius: 5,
    overflow: "hidden", // 진행률 바가 트랙 밖으로 나가지 않도록
    // Ensures the progress bar does not go outside the track
  },
  bar: {
    borderRadius: 5,
  },
  percentageText: {
    fontSize: 14,
    color: "#555555",
    marginTop: 5,
    textAlign: "right", // 퍼센트 텍스트를 오른쪽에 정렬
    // Align percentage text to the right
  },
});

export default FlmProgressBar;

4.ScreenShot

https://youtube.com/shorts/lEMPAl-8Qf4