react-native-fit-image - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

FitImage.js

 import React, {
   Component,
-  Dimensions,
   Image,
@@ -24,50 +23,67 @@ PropTypes,
 
-    if(size.filter((e) => { return e; }).length == 1) {
-      throw("Props error: size props must be present " +
-            "none or both of width and height.");
+    if (size.filter(e => e).length === 1) {
+      throw new Error('Props error: size props must be present ' +
+                      'none or both of width and height.');
     }
 
-    if(originalSize.filter((e) => { return e; }).length === 1) {
-      throw("Props error: originalSize props must be present " +
-            "none or both of originalWidth and originalHeight.");
+    if (originalSize.filter(e => e).length === 1) {
+      throw new Error('Props error: originalSize props must be present ' +
+                      'none or both of originalWidth and originalHeight.');
     }
 
-    if([...size, ...originalSize].filter((e) => { return e; }).length === 0) {
-      throw("Props error: at least one props must be present " +
-            "among (originalWidth, originalHeight) and (width, height).");
-    }
-
     this.state = {
       height: 0,
+      layoutWidth: undefined,
+      originalWidth: undefined,
+      originalHeight: undefined,
     };
   }
 
-  _getStyle() {
-    if(this.props.width) {
+  componentDidMount() {
+    if (!this.props.originalWidth || !this.props.originalHeight) {
+      Image.getSize(this.props.source.uri, (width, height) => {
+        const newHeight = this.state.layoutWidth / width;
+
+        this.setState({
+          height: newHeight,
+          originalWidth: width,
+          originalHeight: height,
+        });
+      });
+    }
+  }
+
+  getStyle() {
+    if (this.props.width) {
       return { width: this.props.width };
-    } else {
-      return { flex: 1 };
     }
+    return { flex: 1 };
   }
 
-  _getRatio(width) {
-    return width / this.props.originalWidth;
+  getOriginalWidth() {
+    return this.props.originalWidth || this.state.originalWidth;
   }
 
-  _getHeight(width) {
-    if(this.props.height) {
+  getOriginalHeight() {
+    return this.props.originalHeight || this.state.originalHeight;
+  }
+
+  getRatio() {
+    return this.state.layoutWidth / this.getOriginalWidth();
+  }
+
+  getHeight() {
+    if (this.props.height) {
       return this.props.height;
-    } else {
-      return this.props.originalHeight * this._getRatio(width);
     }
+    return this.getOriginalHeight() * this.getRatio();
   }
 
-  _setHeight(event) {
-    var { width } = event.nativeEvent.layout;
-    console.log('width', width);
+  resize(event) {
+    const { width } = event.nativeEvent.layout;
+    const height = this.getHeight();
 
-    const height = this._getHeight(width);
-
     this.setState({
       height,
+      layoutWidth: width,
     });
@@ -77,4 +93,2 @@ }
   render() {
-    console.log(this.state.height);
-
     return (
@@ -86,5 +100,5 @@ <Image
           this.props.style,
-          this._getStyle(),
+          this.getStyle(),
         ]}
-        onLayout={(event) => this._setHeight(event)}
+        onLayout={(event) => this.resize(event)}
       />
@@ -95,2 +109,4 @@ );
 
+FitImage.propTypes = propTypes;
+
 export default FitImage;

package.json

 {
   "name": "react-native-fit-image",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "Responsive image component to fit perfectly itself.",
@@ -5,0 +5,0 @@ "main": "FitImage.js",

README.md

@@ -20,4 +20,11 @@ # React Native Fit Image [![npm version](https://badge.fury.io/js/react-native-fit-image.svg)](https://badge.fury.io/js/react-native-fit-image)
 // draws image to fit inherited space automatically, even when screen is rotated.
+// even you don't need to provide original size in v1.2.0
 <FitImage
   source={{ uri: 'http://facebook.github.io/react/img/logo_og.png' }}
+  style={styles.fitImage}
+/>
+
+// draws image to fit inherited space automatically, even when screen is rotated.
+<FitImage
+  source={{ uri: 'http://facebook.github.io/react/img/logo_og.png' }}
   originalWidth={400}
@@ -28,3 +35,3 @@ originalHeight={400}
 
-// or draws image to specify size like Image component.
+// or draws image to specific size like Image component.
 <FitImage
@@ -41,2 +48,5 @@ source={{ uri: 'http://facebook.github.io/react/img/logo_og.png' }}
 
+![FitImageExample - Portrait](./FitImageExample/fit_image_example_portrait.gif)
+![FitImageExample - LandScape](./FitImageExample/fit_image_example_landscape.gif)
+
 [1]: https://github.com/huiseoul/react-native-fit-image/tree/master/FitImageExample

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4579

increased by20.6%

Lines of code

90

increased by18.42%

Number of lines in readme file

50

increased by25%

No dependency changes