import * as React from 'react';
import { Text, View, StyleSheet, Image, ActivityIndicator } from 'react-native';

const url = 'https://homepages.cae.wisc.edu/~ece533/images/airplane.png';
const placeholder = require('./assets/snack-icon.png');

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      imageSource: null,
    };
  }

  componentDidMount() {
    this.getImageSource(url);
  }

  getImageSource = url => {
    if (url) {
      this.setState({ imageSource: { uri: url } });
    } else {
      this.setState({ imageSource: placeholder });
    }
  };

  onErrorImage = () => {
    this.setState({ imageSource: placeholder });
  };

  render() {
    return (
      <View style={styles.container}>
          <Image
            source={this.state.imageSource}
            style={{ width: 100, height: 100 }}
            onError={this.onErrorImage}
          /> 
      </View>
    );
  }
}