Untitled
unknown
plain_text
2 years ago
1.0 kB
3
Indexable
import React, { useState, useEffect } from 'react'; import { View, StyleSheet, Animated } from 'react-native'; const ProgressBar = ({ progress }) => { const [animation, setAnimation] = useState(new Animated.Value(0)); useEffect(() => { Animated.timing(animation, { toValue: progress, duration: 1000, useNativeDriver: false, }).start(); }, [progress]); const width = animation.interpolate({ inputRange: [0, 1], outputRange: ['0%', '100%'], }); return ( <View style={styles.container}> <View style={styles.progressBar}> <Animated.View style={[styles.innerProgressBar, { width }]} /> </View> </View> ); }; const styles = StyleSheet.create({ container: { width: '100%', height: 20, backgroundColor: '#f2f2f2', borderRadius: 10, overflow: 'hidden', }, progressBar: { width: '100%', height: 20, backgroundColor: '#2196f3', }, innerProgressBar: { height: '100%', backgroundColor: '#fff', }, }); export default ProgressBar;
Editor is loading...