From 5f8fac2518e8233a49442d8751ec90838a17faa8 Mon Sep 17 00:00:00 2001
From: amal <iam.amaliadwi@gmail.com>
Date: Mon, 14 Jul 2025 17:14:17 +0800
Subject: [PATCH] fix : progress bar

---
 components/progressBar.tsx | 12 +++++++++---
 constants/Styles.ts        |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/progressBar.tsx b/components/progressBar.tsx
index fc1e656..a736f4f 100644
--- a/components/progressBar.tsx
+++ b/components/progressBar.tsx
@@ -12,6 +12,12 @@ type Props = {
 export default function ProgressBar({ margin, value, category }: Props) {
    const [progress, setProgress] = useState(new Animated.Value(0));
    const [totalProgress, setTotalProgress] = useState(category == 'carousel' ? 232 : category == 'page' ? 245 : 290);
+   const [componentWidth, setComponentWidth] = useState(0);
+
+   const handleLayout = (event: any) => {
+      const { width } = event.nativeEvent.layout;
+      setComponentWidth(width);
+   };
 
 
    useEffect(() => {
@@ -19,16 +25,16 @@ export default function ProgressBar({ margin, value, category }: Props) {
          // carousel:: 100% = 255
          // page:: 100% = 290
          // wrapbar :: 90%
-         toValue: value / 100 * totalProgress,
+         toValue: value / 100 * componentWidth,
          duration: 1000,
          useNativeDriver: false
       }).start();
-   }, [value]);
+   }, [value, componentWidth]);
 
 
    return (
       <View style={[Styles.contentItemCenter]}>
-         <View style={[Styles.wrapBar, { margin: margin && margin }]}>
+         <View style={[Styles.wrapBar, { margin: margin && margin }]} onLayout={handleLayout}>
             <Animated.View style={[Styles.contentBar, { width: progress }]} />
          </View>
       </View>
diff --git a/constants/Styles.ts b/constants/Styles.ts
index cf59193..37e93f4 100644
--- a/constants/Styles.ts
+++ b/constants/Styles.ts
@@ -339,7 +339,7 @@ const Styles = StyleSheet.create({
       backgroundColor: '#ccc',
       borderRadius: 10,
       margin: 0,
-      width: '90%'
+      width: '100%'
    },
    contentBar: {
       height: 20,