Kantongku: animasi bar HP pakai scaleX (fix error native animated width)

This commit is contained in:
Bro
2026-08-16 20:52:32 +07:00
parent 507a732672
commit d3bbf45d6b
+12 -6
View File
@@ -214,12 +214,12 @@ export function DashboardScreen() {
hpMsg = `Saldo cukup ${coverageDays} dari ${remainingDays} hari — jaga pengeluaran ⚔️`; 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(() => { useEffect(() => {
Animated.timing(hpAnim, { Animated.timing(hpAnim, {
toValue: hpPct, toValue: hpPct,
duration: 800, duration: 800,
useNativeDriver: false, useNativeDriver: true,
}).start(); }).start();
}, [hpPct, hpAnim]); }, [hpPct, hpAnim]);
@@ -420,11 +420,16 @@ export function DashboardScreen() {
styles.hpFill, styles.hpFill,
{ {
backgroundColor: hpBarColor, backgroundColor: hpBarColor,
width: hpAnim.interpolate({
inputRange: [0, 100],
outputRange: ['0%', '100%'],
}),
opacity: pulse, opacity: pulse,
transform: [
{
scaleX: hpAnim.interpolate({
inputRange: [0, 100],
outputRange: [0, 1],
}),
},
],
transformOrigin: 'left',
}, },
]} ]}
/> />
@@ -958,6 +963,7 @@ const styles = StyleSheet.create({
overflow: 'hidden', overflow: 'hidden',
}, },
hpFill: { hpFill: {
width: '100%',
height: '100%', height: '100%',
borderRadius: 7, borderRadius: 7,
}, },