ProgressBar.js 745 B

12345678910111213141516171819202122232425262728293031323334353637
  1. import React from 'react'
  2. import { View, Text, StyleSheet } from 'react-native'
  3. const colorGreen = '#0b8600'
  4. const colorBlue = '#006bb7'
  5. export default function ProgressBar ({ progress }) {
  6. return (
  7. <View style={styles.root}>
  8. <View
  9. style={styles.wrapper}
  10. >
  11. <View style={[styles.bar, {
  12. backgroundColor: progress === 100 ? colorGreen : colorBlue,
  13. width: `${progress}%`,
  14. }]}
  15. />
  16. </View>
  17. <Text>{progress ? `${progress}%` : null}</Text>
  18. </View>
  19. )
  20. }
  21. const styles = StyleSheet.create({
  22. root: {
  23. marginTop: 15,
  24. marginBottom: 15,
  25. },
  26. wrapper:{
  27. height: 5,
  28. overflow: 'hidden',
  29. backgroundColor: '#dee1e3',
  30. },
  31. bar: {
  32. height: 5,
  33. },
  34. })