프로그래스바/FlmProgressBar

1.react-native-freelifemakers-ui NPM 모듈 설치하기 / 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.예제코드 / Example 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 = ({
  progress = 0, // 현재 진행률 (0-100 사이의 값) / Current progress value (between 0-100)
  height = 10, // 프로그레스 바의 높이 / Height of the progress bar
  barColor = "#2563eb", // 진행률 바의 색상 / Color of the progress bar
  trackColor = "#e5e7eb", // 트랙(배경)의 색상 / Color of the track (background)
  label, // 프로그레스 바 옆에 표시될 텍스트 레이블 / Text label to be displayed next to the progress bar
  showPercentage = true, // 진행률 퍼센트를 표시할지 여부 / Whether to show the percentage progress
  style, // 전체 컨테이너에 적용될 스타일 / Style to be applied to the entire container
  labelStyle, // 레이블 텍스트에 적용될 스타일 / Style to be applied to the label text
  barStyle, // 진행률 바 자체에 적용될 스타일 / Style to be applied to the progress bar itself
  trackStyle, // 트랙 부분에 적용될 스타일 / Style to be applied to the track part
  percentageTextStyle, // 퍼센트 텍스트에 적용될 스타일 / Style to be applied to the percentage text
}) => {
  // 진행률 애니메이션 값 초기화
  // 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,
      duration: 300, // 0.3초 동안 애니메이션 / Animation for 0.3 seconds
      useNativeDriver: false, // width 애니메이션에는 useNativeDriver를 false로 설정해야 합니다.
      // useNativeDriver must be set to false for width animation.
    }).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