48 lines
1.2 KiB
JavaScript
48 lines
1.2 KiB
JavaScript
import React from "react";
|
|
import { ScrollView, StyleSheet, Text, View } from "react-native";
|
|
import * as Progress from "react-native-progress";
|
|
|
|
export default function UploadProgress({ uploads }) {
|
|
console.log("uploads :>> ", uploads);
|
|
return (
|
|
<View style={styles.container}>
|
|
<ScrollView>
|
|
{Object.keys(uploads).map((key) => (
|
|
<View key={key} style={styles.progressItem}>
|
|
<Text style={styles.progressText}>{key}</Text>
|
|
<View style={styles.progressBarContainer}>
|
|
<Progress.Bar
|
|
style={styles.progress}
|
|
height={10}
|
|
width={null}
|
|
progress={uploads[key].percent}
|
|
color={uploads[key].percent === 1 ? "green" : "blue"}
|
|
/>
|
|
</View>
|
|
</View>
|
|
))}
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
}
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
display: "flex",
|
|
//flex: 1,
|
|
},
|
|
progressItem: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginBottom: 12,
|
|
},
|
|
progressText: {
|
|
flex: 1,
|
|
},
|
|
progressBarContainer: {
|
|
flex: 1,
|
|
marginLeft: 12,
|
|
marginRight: 12,
|
|
},
|
|
});
|