ProgressBar.js 725 B

123456789101112131415161718192021222324252627282930313233
  1. import React from 'react' // eslint-disable-line no-unused-vars
  2. import { View, Text } from 'react-native'
  3. export default function ProgressBar (props) {
  4. const { progress } = props
  5. const colorGreen = '#0b8600'
  6. const colorBlue = '#006bb7'
  7. return (
  8. <View style={{
  9. marginTop: 15,
  10. marginBottom: 15,
  11. }}
  12. >
  13. <View
  14. style={{
  15. height: 5,
  16. overflow: 'hidden',
  17. backgroundColor: '#dee1e3',
  18. }}
  19. >
  20. <View style={{
  21. height: 5,
  22. backgroundColor: progress === 100 ? colorGreen : colorBlue,
  23. width: `${progress}%`,
  24. }}
  25. />
  26. </View>
  27. <Text>{progress ? `${progress}%` : null}</Text>
  28. </View>
  29. )
  30. }