image-loader-basic.js

module.exports = React.createClass({
  displayName: 'ImageTester',

  getInitialState() {
    return {
      showImage: false
    };
  },

  render() {
    var imageSrc = 'http://www.eatornotapp.com/img/Home.png?cBuster' + Math.random();
    var image;
    var buttonLabel;
    if (!this.state.showImage) {
      buttonLabel = 'Show Image';
      image = (
        <View
          style={{
            height: 534,
            width: 300,
            backgroundColor: '#CCC'
          }}
        >
        </View>
      );
    } else {
      buttonLabel = 'Hide Image';
      image = (
        <Image
          style={{
            height: 534,
            width: 300,
            backgroundColor: '#CCC'
          }}
          source={{
            uri: imageSrc
          }} />
      );
    }
    return (
      <View
        style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <TouchableOpacity
          style={{
            padding: 30
          }}
          onPress={() => {
            this.setState({showImage: !this.state.showImage});
          }}
        >
          <Text>{buttonLabel}</Text>
        </TouchableOpacity>
        {image}      
      </View>
    );
  }
});