sfm-uikit-react-native/src/commonClass/ProgressBar.js

It is a react native component for SmartFloMeet users.

import React from 'react';
import { View, Text } from 'react-native';

export const  ProgressBar = ({ bgcolor, completed }) => {
  // Define the styles for the container, filler, and label
  const containerStyles = {
    height: 25,
    width: '80%',
    backgroundColor: '#e0e0de',
    borderRadius: 50,
    marginTop: 20, // Add some margin for spacing
  };

  const fillerStyles = {
    height: '100%',
    width: `${completed}%`,
    backgroundColor: bgcolor,
    borderRadius: 50,
    textAlign: 'right',
  };

  const labelStyles = {
    padding: 5,
    color: 'white',
    fontWeight: 'bold',
    textAlign:'right'
  };

  return (
    <View style={containerStyles}>
      <View style={fillerStyles}>
        <Text style={labelStyles}>{`${completed}%`}</Text>
      </View>
    </View>
  );
};