You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
841 B
35 lines
841 B
3 years ago
|
import React, {useState, useEffect} from 'react';
|
||
|
|
import {View} from 'react-native';
|
||
|
|
import tw from 'tailwind-rn';
|
||
|
|
|
||
|
|
//Color
|
||
|
|
import Color from '../constants/Colors';
|
||
|
|
|
||
|
|
function Progress({percent}) {
|
||
|
|
const [delayPercent, setDelayPercent] = useState(0);
|
||
|
|
useEffect(() => {
|
||
|
|
setTimeout(() => {
|
||
|
|
setDelayPercent(() => percent);
|
||
|
|
}, 1000);
|
||
|
|
}, [percent]);
|
||
|
|
return (
|
||
|
|
<View
|
||
|
|
style={[
|
||
|
|
tw('w-full h-1.5 rounded-full overflow-hidden my-3'),
|
||
|
|
{backgroundColor: '#D3E9FF'},
|
||
|
|
]}>
|
||
|
|
<View
|
||
|
|
style={[
|
||
|
|
tw('h-full transition-all duration-500 rounded-full'),
|
||
|
|
{
|
||
|
|
backgroundColor: Color.theme1.light.blue3,
|
||
|
|
width: percent + '%',
|
||
|
|
// backgroundColor: Color.theme1.light.blue4,
|
||
|
|
},
|
||
|
|
]}></View>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Progress;
|