51 lines
1.1 KiB
TypeScript
51 lines
1.1 KiB
TypeScript
import { COLORS } from '@rn-ui-lib/colors';
|
|
import React, { useState, useEffect } from 'react';
|
|
import { View, Animated, StyleSheet } from 'react-native';
|
|
|
|
type ProgressBarProps = {
|
|
progress: number;
|
|
height?: number;
|
|
color?: string;
|
|
};
|
|
|
|
const ProgressBar = ({ progress, height = 10, color = COLORS.TEXT.BLUE }: ProgressBarProps) => {
|
|
const [animatedWidth] = useState(new Animated.Value(0));
|
|
|
|
useEffect(() => {
|
|
Animated.timing(animatedWidth, {
|
|
toValue: progress * 100,
|
|
useNativeDriver: false,
|
|
}).start();
|
|
}, [progress]);
|
|
|
|
return (
|
|
<View style={[styles.container, { height }]}>
|
|
<Animated.View
|
|
style={[
|
|
styles.fill,
|
|
{
|
|
width: animatedWidth.interpolate({
|
|
inputRange: [0, 100],
|
|
outputRange: ['0%', '100%'],
|
|
}),
|
|
backgroundColor: color,
|
|
},
|
|
]}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
backgroundColor: '#e0e0e0',
|
|
borderRadius: 8,
|
|
overflow: 'hidden',
|
|
},
|
|
fill: {
|
|
height: '100%',
|
|
},
|
|
});
|
|
|
|
export default ProgressBar;
|