1
 class PureImage extends React.Component {
    constructor(props){
    super(props);
    this.time = null;
  }
  shouldComponentUpdate(nextProps,nextState){
    if(nextProps.source.uri === this.props.source.uri){
      return false;
    }else{
      return true;
    }
  }
  render(){
    console.log('renderin Pure Image');
    return (
      <Image
        defaultSource={Images.defaultUser}
        style={ProfileStyle.profileImage}
        onLoadStart= {()=> {this.time = new Date(); console.log('image load start at ', this.time);} }
        onLoadEnd = { ()=> {console.log('image load ended at ',new Date()); console.log('time taken=', (new Date().getTime()-this.time.getTime())/1000, ' secs');  } }
        onLoad={()=>console.log('image loaded')}
        onProgress={(e)=> {let progress = Math.round(100*e.nativeEvent.loaded / e.nativeEvent.total); console.log('progress started at',new Date());console.log('progress=',progress)} }
        source={this.props.source} 
      />
    );
  }
}

I've made a pure component wrapper for Image component. Upon uploading image, which changes the this.props.source.uri property the image should be updated. But it takes about 1 minute to do go. I've put onLoadStart, onLoadEnd and onProgress methods to see what's happening. the onLoadStart() is fired immediately but it takes 40+ seconds for onProgress to start showing any progress. Why is it so? Image sizes i'm using are less < 1mb and upload in 2,3 seconds.

Pavan
  • 985
  • 2
  • 15
  • 27
  • I'm asking the user to pick an image and upload it on s3 instance. I tried to take a staticArry of 5 images and selected Random pic on upload action, and that image loads fast. Could this be an issue with image being uploaded and retrieval from s3 instance. – Pavan Nov 07 '17 at 07:40

0 Answers0