{"id":1786,"date":"2025-07-29T02:57:41","date_gmt":"2025-07-29T02:57:41","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=1786"},"modified":"2025-07-29T03:09:13","modified_gmt":"2025-07-29T03:09:13","slug":"flmprogressbar","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/07\/29\/flmprogressbar\/","title":{"rendered":"\ud504\ub85c\uadf8\ub798\uc2a4\ubc14\/FlmProgressBar"},"content":{"rendered":"\n<p><strong>1.react-native-freelifemakers-ui NPM \ubaa8\ub4c8 \uc124\uce58\ud558\uae30 \/ react-native-freelifemakers-ui NPM Module Install<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># npm install react-native-freelifemakers-ui<\/code><\/pre>\n\n\n\n<p><strong>2.\uc0ac\uc6a9\ud558\uae30 \/ Usage<\/strong><br>1)\ubaa8\ub4c8 \ubd88\ub7ec\uc624\uae30 \/ import Module<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {FlmProgressBarFlmText, FlmButton, FlmDialog} from 'react-native-freelifemakers-ui';<\/code><\/pre>\n\n\n\n<p>2)\ud504\ub85c\uadf8\ub798\uc2a4\ubc14 \/ FlmProgressBar<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>      &lt;FlmProgressBar\n        label=\"\ud30c\uc77c \ub2e4\uc6b4\ub85c\ub4dc \uc911\/Downloading file\"\n        progress={currentProgress}\n        height={15}\n        barColor=\"#4CAF50\" \/\/ \ub179\uc0c9 \ubc14 \/ green bar\n        trackColor=\"#e0e0e0\"\n        showPercentage={true}\n        style={styles.progressBarWrapper}\n        labelStyle={styles.progressBarLabel}\n      \/&gt;<\/code><\/pre>\n\n\n\n<p><strong>3.\uc608\uc81c\ucf54\ub4dc \/ Example code<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nimport React, { useState, useEffect } from \"react\";\nimport { View, Text, StyleSheet, Animated } from \"react-native\";\n\n\/\/ FlmProgressBar \ucef4\ud3ec\ub10c\ud2b8\n\/\/ \uc774 \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc9c4\ud589\ub960\uc744 \uc2dc\uac01\uc801\uc73c\ub85c \ud45c\uc2dc\ud558\ub294 \ud504\ub85c\uadf8\ub808\uc2a4 \ubc14 UI\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.\n\/\/ This component provides a progress bar UI to visually display progress.\nconst FlmProgressBar = ({\n  progress = 0, \/\/ \ud604\uc7ac \uc9c4\ud589\ub960 (0-100 \uc0ac\uc774\uc758 \uac12) \/ Current progress value (between 0-100)\n  height = 10, \/\/ \ud504\ub85c\uadf8\ub808\uc2a4 \ubc14\uc758 \ub192\uc774 \/ Height of the progress bar\n  barColor = \"#2563eb\", \/\/ \uc9c4\ud589\ub960 \ubc14\uc758 \uc0c9\uc0c1 \/ Color of the progress bar\n  trackColor = \"#e5e7eb\", \/\/ \ud2b8\ub799(\ubc30\uacbd)\uc758 \uc0c9\uc0c1 \/ Color of the track (background)\n  label, \/\/ \ud504\ub85c\uadf8\ub808\uc2a4 \ubc14 \uc606\uc5d0 \ud45c\uc2dc\ub420 \ud14d\uc2a4\ud2b8 \ub808\uc774\ube14 \/ Text label to be displayed next to the progress bar\n  showPercentage = true, \/\/ \uc9c4\ud589\ub960 \ud37c\uc13c\ud2b8\ub97c \ud45c\uc2dc\ud560\uc9c0 \uc5ec\ubd80 \/ Whether to show the percentage progress\n  style, \/\/ \uc804\uccb4 \ucee8\ud14c\uc774\ub108\uc5d0 \uc801\uc6a9\ub420 \uc2a4\ud0c0\uc77c \/ Style to be applied to the entire container\n  labelStyle, \/\/ \ub808\uc774\ube14 \ud14d\uc2a4\ud2b8\uc5d0 \uc801\uc6a9\ub420 \uc2a4\ud0c0\uc77c \/ Style to be applied to the label text\n  barStyle, \/\/ \uc9c4\ud589\ub960 \ubc14 \uc790\uccb4\uc5d0 \uc801\uc6a9\ub420 \uc2a4\ud0c0\uc77c \/ Style to be applied to the progress bar itself\n  trackStyle, \/\/ \ud2b8\ub799 \ubd80\ubd84\uc5d0 \uc801\uc6a9\ub420 \uc2a4\ud0c0\uc77c \/ Style to be applied to the track part\n  percentageTextStyle, \/\/ \ud37c\uc13c\ud2b8 \ud14d\uc2a4\ud2b8\uc5d0 \uc801\uc6a9\ub420 \uc2a4\ud0c0\uc77c \/ Style to be applied to the percentage text\n}) =&gt; {\n  \/\/ \uc9c4\ud589\ub960 \uc560\ub2c8\uba54\uc774\uc158 \uac12 \ucd08\uae30\ud654\n  \/\/ Initialize progress animation value\n  const animatedProgress = useState(new Animated.Value(progress))&#91;0];\n\n  \/\/ progress prop\uc774 \ubcc0\uacbd\ub420 \ub54c \uc560\ub2c8\uba54\uc774\uc158 \uc5c5\ub370\uc774\ud2b8\n  \/\/ Update animation when progress prop changes\n  useEffect(() =&gt; {\n    Animated.timing(animatedProgress, {\n      toValue: progress,\n      duration: 300, \/\/ 0.3\ucd08 \ub3d9\uc548 \uc560\ub2c8\uba54\uc774\uc158 \/ Animation for 0.3 seconds\n      useNativeDriver: false, \/\/ width \uc560\ub2c8\uba54\uc774\uc158\uc5d0\ub294 useNativeDriver\ub97c false\ub85c \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4.\n      \/\/ useNativeDriver must be set to false for width animation.\n    }).start();\n  }, &#91;progress, animatedProgress]);\n\n  \/\/ \uc9c4\ud589\ub960 \uac12\uc758 \uc720\ud6a8\uc131 \uac80\uc0ac \ubc0f \ud074\ub7a8\ud551 (0-100)\n  \/\/ Validate and clamp progress value (0-100)\n  const clampedProgress = Math.min(Math.max(progress, 0), 100);\n\n  \/\/ \uc560\ub2c8\uba54\uc774\uc158\ub41c \ub108\ube44 \uacc4\uc0b0\n  \/\/ Calculate animated width\n  const widthInterpolation = animatedProgress.interpolate({\n    inputRange: &#91;0, 100],\n    outputRange: &#91;\"0%\", \"100%\"],\n  });\n\n  return (\n    &lt;View style={&#91;styles.container, style]}&gt;\n      {\/* \ub808\uc774\ube14 \ud14d\uc2a4\ud2b8 *\/}\n      {\/* Label text *\/}\n      {label &amp;&amp; &lt;Text style={&#91;styles.label, labelStyle]}&gt;{label}&lt;\/Text&gt;}\n\n      {\/* \ud504\ub85c\uadf8\ub808\uc2a4 \ubc14 \ud2b8\ub799 \ucee8\ud14c\uc774\ub108 *\/}\n      {\/* Progress bar track container *\/}\n      &lt;View\n        style={&#91;\n          styles.track,\n          { height: height, backgroundColor: trackColor },\n          trackStyle,\n        ]}\n      &gt;\n        {\/* \uc9c4\ud589\ub960 \ubc14 *\/}\n        {\/* Progress bar *\/}\n        &lt;Animated.View\n          style={&#91;\n            styles.bar,\n            {\n              width: widthInterpolation,\n              height: height,\n              backgroundColor: barColor,\n            },\n            barStyle,\n          ]}\n        \/&gt;\n      &lt;\/View&gt;\n\n      {\/* \ud37c\uc13c\ud2b8 \ud14d\uc2a4\ud2b8 *\/}\n      {\/* Percentage text *\/}\n      {showPercentage &amp;&amp; (\n        &lt;Text style={&#91;styles.percentageText, percentageTextStyle]}&gt;\n          {`${clampedProgress.toFixed(0)}%`}\n        &lt;\/Text&gt;\n      )}\n    &lt;\/View&gt;\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    width: \"100%\",\n    paddingVertical: 10,\n    paddingHorizontal: 15,\n    borderRadius: 8,\n    backgroundColor: \"#ffffff\",\n    shadowColor: \"#000\",\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.1,\n    shadowRadius: 4,\n    elevation: 2,\n    marginVertical: 5,\n  },\n  label: {\n    fontSize: 16,\n    fontWeight: \"600\",\n    color: \"#333333\",\n    marginBottom: 8,\n  },\n  track: {\n    width: \"100%\",\n    borderRadius: 5,\n    overflow: \"hidden\", \/\/ \uc9c4\ud589\ub960 \ubc14\uac00 \ud2b8\ub799 \ubc16\uc73c\ub85c \ub098\uac00\uc9c0 \uc54a\ub3c4\ub85d\n    \/\/ Ensures the progress bar does not go outside the track\n  },\n  bar: {\n    borderRadius: 5,\n  },\n  percentageText: {\n    fontSize: 14,\n    color: \"#555555\",\n    marginTop: 5,\n    textAlign: \"right\", \/\/ \ud37c\uc13c\ud2b8 \ud14d\uc2a4\ud2b8\ub97c \uc624\ub978\ucabd\uc5d0 \uc815\ub82c\n    \/\/ Align percentage text to the right\n  },\n});\n\nexport default FlmProgressBar;<\/code><\/pre>\n\n\n\n<p><strong>4.\uc2a4\ud06c\ub9b0\uc0f7\/ScreenShot<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"\ud504\ub85c\uadf8\ub798\uc2a4\ubc14\/FlmProgressBar\" width=\"473\" height=\"840\" src=\"https:\/\/www.youtube.com\/embed\/lEMPAl-8Qf4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>1.react-native-freelifemakers-ui NPM \ubaa8\ub4c8 \uc124\uce58\ud558\uae30 \/ react-native-freelifemakers-ui NPM Module Install 2.\uc0ac\uc6a9\ud558\uae30 \/ Usage1)\ubaa8\ub4c8 \ubd88\ub7ec\uc624\uae30 \/ import Module 2)\ud504\ub85c\uadf8\ub798\uc2a4\ubc14 \/ FlmProgressBar 3.\uc608\uc81c\ucf54\ub4dc \/ Example code 4.\uc2a4\ud06c\ub9b0\uc0f7\/ScreenShot<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,15,1],"tags":[],"class_list":["post-1786","post","type-post","status-publish","format-standard","hentry","category-reactnative","category-rnuimodule","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1786","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=1786"}],"version-history":[{"count":6,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1786\/revisions"}],"predecessor-version":[{"id":1793,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1786\/revisions\/1793"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=1786"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=1786"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=1786"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}