From d3bbf45d6b0e3cc0ce13ebafbec4582bdf5f2302 Mon Sep 17 00:00:00 2001
From: Bro <bro@local>
Date: Sun, 16 Aug 2026 20:52:32 +0700
Subject: [PATCH] Kantongku: animasi bar HP pakai scaleX (fix error native
 animated width)

---
 src/screens/DashboardScreen.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/screens/DashboardScreen.tsx b/src/screens/DashboardScreen.tsx
index e1de830..9797b27 100644
--- a/src/screens/DashboardScreen.tsx
+++ b/src/screens/DashboardScreen.tsx
@@ -214,12 +214,12 @@ export function DashboardScreen() {
     hpMsg = `Saldo cukup ${coverageDays} dari ${remainingDays} hari — jaga pengeluaran ⚔️`;
   }
 
-  // Bar HP: width bergerak halus mengikuti data
+  // Bar HP: scaleX bergerak halus mengikuti data (native driver aman)
   useEffect(() => {
     Animated.timing(hpAnim, {
       toValue: hpPct,
       duration: 800,
-      useNativeDriver: false,
+      useNativeDriver: true,
     }).start();
   }, [hpPct, hpAnim]);
 
@@ -420,11 +420,16 @@ export function DashboardScreen() {
                 styles.hpFill,
                 {
                   backgroundColor: hpBarColor,
-                  width: hpAnim.interpolate({
-                    inputRange: [0, 100],
-                    outputRange: ['0%', '100%'],
-                  }),
                   opacity: pulse,
+                  transform: [
+                    {
+                      scaleX: hpAnim.interpolate({
+                        inputRange: [0, 100],
+                        outputRange: [0, 1],
+                      }),
+                    },
+                  ],
+                  transformOrigin: 'left',
                 },
               ]}
             />
@@ -958,6 +963,7 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
   },
   hpFill: {
+    width: '100%',
     height: '100%',
     borderRadius: 7,
   },