refactor(rejection): 🔨Optimize error handling from Image.getSize

Still reject errors from `Image.getSize`. Catch errors in `updateImageHeight`. Not caching the wrong
image size.

ExampleApp/App.js

@@ -1,34 +1,41 @@
 import React, { Component } from 'react';
 import AutoHeightImage from 'react-native-auto-height-image';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, ScrollView } from 'react-native';
 
 export default class App extends Component {
     render() {
         return (
-            <View style={styles.container}>
+            <ScrollView style={styles.scrollViewContainer} contentContainerStyle={styles.scrollViewContentContainer}>
                 <Text>Basic example</Text>
                 <AutoHeightImage
                     width={100}
                     imageURL={'http://placehold.it/350x150'}
                 />
+                <Text>Basic example</Text>
+                <AutoHeightImage
+                    width={200}
+                    imageURL={'http://placehold.it/350x150'}
+                />
                 <Text>Wrong imageURL</Text>
                 <AutoHeightImage
                     width={100}
-                    imageURL={'abcdefg'}
+                    imageURL={'https://vivaxy.github.io/404'}
                     onError={(error) => {
-                        console.log(error);
+                        console.log('----- onError', error);
                     }}
                 />
-            </View>
+            </ScrollView>
         );
     }
 }
 
 const styles = StyleSheet.create({
-    container: {
+    scrollViewContainer: {
         flex: 1,
         backgroundColor: '#fff',
+        marginTop: 20,
+    },
+    scrollViewContentContainer: {
         alignItems: 'center',
-        justifyContent: 'center',
     },
 });

cache.js

@@ -20,27 +20,19 @@ const getImageSizeFromCache = (imageURL) => {
 };
 
 const loadImageSize = (imageURL) => {
-    return new Promise((resolve) => {
+    return new Promise((resolve, reject) => {
         Image.getSize(imageURL, (width, height) => {
             // success
             resolve({ width, height });
-        }, () => {
-            // error
-            // reject(err);
-            // not rejecting err, send a resolve instead
-            resolve({ width: 0, height: 0 });
-        });
+        }, reject);
     });
 };
 
 export const getImageSizeFitWidthFromCache = (imageURL, toWidth) => {
     const size = getImageSizeFromCache(imageURL);
     if (size) {
         const { width, height } = size;
-        return {
-            width: toWidth,
-            height: toWidth * height / width,
-        };
+        return { width: toWidth, height: toWidth * height / width };
     }
     return {};
 };
@@ -56,8 +48,5 @@ const getImageSizeMaybeFromCache = async(imageURL) => {
 
 export const getImageSizeFitWidth = async(imageURL, toWidth) => {
     const { width, height } = await getImageSizeMaybeFromCache(imageURL);
-    return {
-        width: toWidth,
-        height: toWidth * height / width,
-    };
+    return { width: toWidth, height: toWidth * height / width };
 };

helpers.js

@@ -1 +1,4 @@
-export const NOOP = () => {};
+export const NOOP = () => {
+};
+export const DEFAULT_WIDTH = 0;
+export const DEFAULT_HEIGHT = 0;

index.js

@@ -8,9 +8,7 @@ import { Image, StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';
 
 import { getImageSizeFitWidth, getImageSizeFitWidthFromCache } from './cache';
-import { NOOP } from './helpers';
-
-const DEFAULT_HEIGHT = 0;
+import { NOOP, DEFAULT_HEIGHT } from './helpers';
 
 // remove `source`, `resizeMode` props from `autoHeightImagePropTypes`
 const { source, resizeMode, ...autoHeightImagePropTypes } = Image.propTypes;
@@ -58,12 +56,16 @@ export default class AutoHeightImage extends PureComponent {
         if (this.state.height === DEFAULT_HEIGHT) {
             // image height could not be `0`
             const { imageURL, width, onHeightChange } = props;
-            const { height } = await getImageSizeFitWidth(imageURL, width);
-            this.styles = StyleSheet.create({ image: { width, height } });
-            if (this.hasMounted) {
-                // guard `this.setState` to be valid
-                this.setState({ height });
-                onHeightChange(height);
+            try {
+                const { height } = await getImageSizeFitWidth(imageURL, width);
+                this.styles = StyleSheet.create({ image: { width, height } });
+                if (this.hasMounted) {
+                    // guard `this.setState` to be valid
+                    this.setState({ height });
+                    onHeightChange(height);
+                }
+            } catch (ex) {
+                // Might be Image.getSize error, we ignore it here.
             }
         }
     }