File size: 1,195 Bytes
0bedb61 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | import React from 'react';
import { StyleSheet, View } from 'react-native';
import Animated, {
useAnimatedStyle,
interpolate,
interpolateColor,
} from 'react-native-reanimated';
import { COLORS } from '../constants/colors';
interface TimerBarProps {
progress: Animated.SharedValue<number>;
}
export const TimerBar: React.FC<TimerBarProps> = ({ progress }) => {
const barStyle = useAnimatedStyle(() => {
const width = `${progress.value * 100}%`;
const backgroundColor = interpolateColor(
progress.value,
[0, 0.25, 0.5, 1],
[COLORS.error, COLORS.accent, COLORS.primary, COLORS.primary]
);
return { width, backgroundColor };
});
return (
<View style={styles.container}>
<View style={styles.track}>
<Animated.View style={[styles.bar, barStyle]} />
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
width: '100%',
paddingHorizontal: 20,
paddingTop: 8,
},
track: {
height: 4,
backgroundColor: COLORS.surfaceLight,
borderRadius: 2,
overflow: 'hidden',
},
bar: {
height: '100%',
borderRadius: 2,
},
});
|