Kantongku: animasi bar HP pakai scaleX (fix error native animated width)
This commit is contained in:
@@ -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,
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user