Image: fix example code

docs/components/Image.md

@@ -75,7 +75,7 @@ const { Component, PropTypes } = React;
 class Avatar extends Component {
   constructor(props, context) {
     super(props, context)
-    this.state = { isLoaded: false }
+    this.state = { loading: true }
   }
 
   static propTypes = {
@@ -90,12 +90,12 @@ class Avatar extends Component {
 
   _onLoad(e) {
     console.log('Avatar.onLoad', e)
-    this.setState({ isLoaded: true })
+    this.setState({ loading: false })
   }
 
   render() {
     const { size, testID, user } = this.props
-    const { isLoaded } = this.state
+    const loadingStyle = this.state.loading ? { styles.loading } : { }
 
     return (
       <Image
@@ -104,18 +104,20 @@ class Avatar extends Component {
         onLoad={this._onLoad.bind(this)}
         resizeMode='cover'
         source={{ uri: user.avatarUrl }}
-        style={ ...style.base, ...style[size], ...style[isLoaded] }
+        style={{ ...styles.base, ...styles[size], ...loadingStyle }}
       />
     )
   }
 }
 
-const style = {
+const styles = {
   base: {
     borderColor: 'white',
     borderRadius: '5px',
-    borderWidth: '5px',
-    opacity: 0.5,
+    borderWidth: '5px'
+  },
+  loading: {
+    opacity: 0.5
   },
   small: {
     height: '32px',
@@ -129,8 +131,5 @@ const style = {
     height: '64px',
     width: '64px'
   }
-  isLoaded: {
-    opacity: 1
-  }
 }
 ```

src/components/Image/index.js

@@ -16,6 +16,7 @@ const imageStyleKeys = Object.keys(ImageStylePropTypes)
 const styles = {
   initial: {
     alignSelf: 'flex-start',
+    backgroundColor: 'lightgray',
     backgroundPosition: 'center',
     backgroundRepeat: 'no-repeat',
     backgroundSize: '100% 100%'
@@ -112,8 +113,8 @@ class Image extends React.Component {
 
     this._destroyImageLoader()
     this.setState({ status: STATUS_ERRORED })
-    if (onError) onError(event)
     this._onLoadEnd()
+    if (onError) onError(event)
   }
 
   _onLoad(e) {
@@ -122,8 +123,8 @@ class Image extends React.Component {
 
     this._destroyImageLoader()
     this.setState({ status: STATUS_LOADED })
-    if (onLoad) onLoad(event)
     this._onLoadEnd()
+    if (onLoad) onLoad(event)
   }
 
   _onLoadEnd() {