fix for blurry images when resizing

See issue meliorence#141
rivals-com · Nov 16, 2018 · bab312b · bab312b
1 parent 7b160cc
commit bab312b
Showing 1 changed file with 18 additions and 4 deletions.
diff --git a/src/HTMLImage.js b/src/HTMLImage.js
@@ -7,7 +7,8 @@ export default class HTMLImage extends PureComponent {
         super(props);
         this.state = {
             width: props.imagesInitialDimensions.width,
-            height: props.imagesInitialDimensions.height
+            height: props.imagesInitialDimensions.height,
+            indeterminate: (!props.style || !props.style.width || !props.style.height)
         };
     }
 
@@ -77,7 +78,8 @@ export default class HTMLImage extends PureComponent {
         if (styleWidth && styleHeight) {
             return this.setState({
                 width: typeof styleWidth === 'string' && styleWidth.search('%') !== -1 ? styleWidth : parseInt(styleWidth, 10),
-                height: typeof styleHeight === 'string' && styleHeight.search('%') !== -1 ? styleHeight : parseInt(styleHeight, 10)
+                height: typeof styleHeight === 'string' && styleHeight.search('%') !== -1 ? styleHeight : parseInt(styleHeight, 10),
+                indeterminate: false
             });
         }
         // Fetch image dimensions only if they aren't supplied or if with or height is missing
@@ -89,7 +91,7 @@ export default class HTMLImage extends PureComponent {
                 }
                 const optimalWidth = imagesMaxWidth <= originalWidth ? imagesMaxWidth : originalWidth;
                 const optimalHeight = (optimalWidth * originalHeight) / originalWidth;
-                this.setState({ width: optimalWidth, height: optimalHeight, error: false });
+                this.setState({ width: optimalWidth, height: optimalHeight, indeterminate: false, error: false });
             },
             () => {
                 this.setState({ error: true });
@@ -115,9 +117,21 @@ export default class HTMLImage extends PureComponent {
         );
     }
 
+    get placeholderImage () {
+        return (
+            <View style={{width: this.props.imagesInitialDimensions.width, height: this.props.imagesInitialDimensions.height}} />
+        );
+    }
+
     render () {
         const { source, style, passProps } = this.props;
 
-        return !this.state.error ? this.validImage(source, style, passProps) : this.errorImage;
+        if (this.state.error) {
+            return this.errorImage;
+        } 
+        if (this.state.indeterminate) {
+            return this.placeholderImage;
+        }
+        return this.validImage(source, style, passProps);
     }
 }