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 ⚔️`;
}
// 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,
},