@s20.ai/safecam-360-rn/src/components/common/ProgressiveImage.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, StyleSheet, Image } from 'react-native';
import FastImage from 'react-native-fast-image';
const styles = StyleSheet.create({
    imageOverlay: {
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
        top: 0,
      },
      container: {
        backgroundColor: '#e1e4e8',
      },
});
class ProgressiveImage extends React.Component {
  render() {
    const {
        thumbnailSource,
        source,
        style,
        noOfImagesLoaded, 
        setNoOfImagesLoaded,
        isLoading,
        ...props
      } = this.props;

    return <View style={styles.container}>
    
        <FastImage
            {...props}
            onLoadEnd={e => {
                console.log('low res loaded - '+thumbnailSource.uri)
                setNoOfImagesLoaded(noOfImagesLoaded => noOfImagesLoaded + 1);
              }}
            source={thumbnailSource}
            style={style}
        
          />
    
      
      <FastImage
             {...props}
            // onLoadEnd={e=>{
            //     console.log('high res loaded - '+source.uri)
            // }}
            source={source}
            style={[styles.imageOverlay, style]}
          />
      
    </View>

  }
}
export default ProgressiveImage;