@s20.ai/safecam-360-rn-lite/src/components/common/ProgressBar.js

A React Native component to view the interior panorama and exterior 360 degree views of a product featuring suppport for hotspots. Compatible with Android and iOS

import React from 'react';
import {View, Dimensions, StyleSheet} from 'react-native';
import constants from '../../config/constants';
import styleConfig from '../styleConfig';
const ProgressBar = ({
  totalImages,
  noOfImagesLoaded,
  imageHeight,
  isPortrait,
}) => {
  return (
    <View
      style={[
        {width: Dimensions.get('window').width},
        styleConfig.progressBar,
        !isPortrait ? {bottom: 0} : {top: imageHeight},
      ]}>
      <View
        style={{
          backgroundColor: '#f28500',
          width: `${((noOfImagesLoaded / totalImages) * 100).toFixed()}%`,
          height: 4,
        }}></View>
    </View>
  );
};

export default ProgressBar;