Philip Cesar Garay
49 lines
1.1 KiB
JavaScript
49 lines
1.1 KiB
JavaScript
import { useEffect, useState } from "react";
|
|
import { View } from "react-native";
|
|
import { mainBorderRadius } from "../styles/Style";
|
|
import { Palette } from "../styles";
|
|
import { LinearGradient } from "./LinearGradient/LinearGradient";
|
|
|
|
const ProgressBar = ({
|
|
progress = 0,
|
|
containerStyle = {},
|
|
gradient = false,
|
|
}) => {
|
|
return (
|
|
<View
|
|
style={{
|
|
width: "100%",
|
|
height: 5,
|
|
backgroundColor: "#0F0C19",
|
|
borderRadius: mainBorderRadius,
|
|
overflow: "hidden",
|
|
...containerStyle,
|
|
}}
|
|
>
|
|
{gradient ? (
|
|
<LinearGradient
|
|
colors={["#F94697", "#7023F7"]}
|
|
style={{
|
|
width: `${progress}%`,
|
|
height: "100%",
|
|
borderRadius: mainBorderRadius,
|
|
}}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 0 }}
|
|
/>
|
|
) : (
|
|
<View
|
|
style={{
|
|
width: `${progress}%`,
|
|
height: "100%",
|
|
backgroundColor: Palette.white,
|
|
borderRadius: mainBorderRadius,
|
|
}}
|
|
/>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default ProgressBar;
|