import React, { Component } from 'react';
import { Image } from 'react-native';

export default class ProgressiveImage extends Component {
    state = { showDefault: true, error: false };

    render() {
        var image = this.state.showDefault ? { uri: this.props.loadingUri } : ( this.state.error ? { uri: this.props.errorUri } : { uri: this.props.uri } );
        if (image.uri == null) {
            image = { uri: this.props.errorUri };
        }
        return (
            <Image style={this.props.style}
                   source={image}
                   onLoadEnd={() => this.setState({showDefault: false})}
                   onError={() => this.setState({error: true})}
                   resizeMode={this.props.resizeMode}/>
        );
    }
}