@s20.ai/safecam-360-rn/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, {useEffect, useState} from 'react';
import {View, Dimensions, StyleSheet} from 'react-native';
import constants from '../../config/constants';
import styleConfig from '../styleConfig';
const ProgressBar = ({
  totalImages,
  noOfImagesLoaded,
  imageHeight,
  orientation,
}) => {
  return (
    <View
      style={[
        {width: Dimensions.get('window').width},
        styleConfig.progressBar,
        orientation.includes(constants.LANDSCAPE)
          ? {bottom: 0}
          : {top: imageHeight},
      ]}>
      <View
        style={{
          backgroundColor: '#f28500',
          width: `${((noOfImagesLoaded / totalImages) * 100).toFixed()}%`,
          height: 4,
        }}></View>
    </View>
  );
};

export default ProgressBar;