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

Comparing version 1.5.3 to 1.5.4

dist/FitImage.d.ts

 /// <reference types="react" />
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
-import { Component } from 'react';
+import { Component, ReactElement } from 'react';
 import { ImageProperties } from 'react-native';
 export interface IFitImageProps extends ImageProperties {
+    children?: ReactElement<any>;
     /**
@@ -37,7 +38,6 @@ * Whether should display activity indicator or not
 export interface IFitImageState {
-    height: number;
     isLoading: boolean;
-    layoutWidth: number | undefined;
-    originalHeight: number | undefined;
-    originalWidth: number | undefined;
+    layoutWidth: number;
+    originalHeight: number;
+    originalWidth: number;
 }
@@ -77,5 +77,7 @@ declare class FitImage extends Component<IFitImageProps, IFitImageState> {
     };
-    private style;
+    private ImageComponent;
     private isFirstLoad;
     private mounted;
+    private sizeStyle;
+    private style;
     constructor(props: IFitImageProps);
@@ -85,2 +87,3 @@ componentDidMount(): void;
     render(): JSX.Element;
+    private shouldDisplayIndicator;
     private onLoad;
@@ -92,8 +95,7 @@ private onLoadStart;
     private getRatio;
-    private getStyle;
-    private resize;
-    private refreshStateSize;
-    private setStateSize;
+    private onLayout;
+    private fetchOriginalSizeFromRemoteImage;
+    private setOriginalSize;
     private renderActivityIndicator;
 }
 export default FitImage;

dist/FitImage.js

@@ -39,5 +39,10 @@ "use strict";
         var _this = _super.call(this, props) || this;
+        _this.ImageComponent = react_native_1.ImageBackground || react_native_1.Image;
+        _this.shouldDisplayIndicator = function () {
+            return _this.state.isLoading && _this.props.indicator !== false;
+        };
         _this.onLoad = function () {
-            _this.setState({ isLoading: false });
-            _this.refreshStateSize();
+            if (_this.state.isLoading) {
+                _this.setState({ isLoading: false });
+            }
             if (typeof _this.props.onLoad === 'function') {
@@ -53,33 +58,21 @@ _this.props.onLoad();
         };
-        _this.getHeight = function (layoutWidth) {
+        _this.getHeight = function () {
             if (_this.style && _this.style.height) {
-                return _this.style.height;
+                return Number(_this.style.height);
             }
-            return _this.getOriginalHeight() * _this.getRatio(layoutWidth);
+            return Math.round(_this.getOriginalHeight() * _this.getRatio());
         };
         _this.getOriginalHeight = function () { return (_this.props.originalHeight || _this.state.originalHeight || 0); };
         _this.getOriginalWidth = function () { return (_this.props.originalWidth || _this.state.originalWidth || 0); };
-        _this.getRatio = function (width) {
-            var originalWidth = _this.getOriginalWidth();
-            if (originalWidth === 0) {
+        _this.getRatio = function () {
+            if (_this.getOriginalWidth() === 0) {
                 return 0;
             }
-            var layoutWidth = width || _this.state.layoutWidth || 0;
-            return layoutWidth / _this.getOriginalWidth();
+            return _this.state.layoutWidth / _this.getOriginalWidth();
         };
-        _this.getStyle = function () {
-            if (_this.style && _this.style.width) {
-                return { width: _this.style.width };
-            }
-            return { flexGrow: 1 };
+        _this.onLayout = function (event) {
+            var layoutWidth = event.nativeEvent.layout.width;
+            _this.setState({ layoutWidth: layoutWidth });
         };
-        _this.resize = function (event) {
-            var width = event.nativeEvent.layout.width;
-            var height = Number(_this.getHeight(width));
-            _this.setState({
-                height: height,
-                layoutWidth: width
-            });
-        };
-        _this.refreshStateSize = function () {
+        _this.fetchOriginalSizeFromRemoteImage = function () {
             var uri;
@@ -99,9 +92,7 @@ if (_this.props.source instanceof Array) {
                 }
-                _this.setStateSize(originalWidth, originalHeight);
+                _this.setOriginalSize(originalWidth, originalHeight);
             }, function () { return null; });
         };
-        _this.setStateSize = function (originalWidth, originalHeight) {
-            var height = (_this.state.layoutWidth || 0) / originalWidth;
+        _this.setOriginalSize = function (originalWidth, originalHeight) {
             _this.setState({
-                height: height,
                 originalHeight: originalHeight,
@@ -121,2 +112,6 @@ originalWidth: originalWidth
             }
+            if (_this.style.width) {
+                _this.sizeStyle = { width: _this.style.width };
+            }
+            _this.sizeStyle = { flexGrow: 1 };
         }
@@ -130,7 +125,6 @@ var originalSize = [props.originalWidth, props.originalHeight];
         _this.state = {
-            height: 0,
             isLoading: false,
-            layoutWidth: undefined,
-            originalHeight: undefined,
-            originalWidth: undefined
+            layoutWidth: 0,
+            originalHeight: 0,
+            originalWidth: 0
         };
@@ -140,7 +134,7 @@ return _this;
     FitImage.prototype.componentDidMount = function () {
+        this.mounted = true;
         if (this.props.originalWidth && this.props.originalHeight) {
             return;
         }
-        this.mounted = true;
-        this.refreshStateSize();
+        this.fetchOriginalSizeFromRemoteImage();
     };
@@ -151,16 +145,9 @@ FitImage.prototype.componentWillUnmount = function () {
     FitImage.prototype.render = function () {
-        var children = this.props.children;
-        var ImageComponent = react_native_1.Image;
-        if (this.state.isLoading && this.props.indicator !== false) {
-            children = this.renderActivityIndicator();
-        }
-        if (children && react_native_1.ImageBackground) {
-            ImageComponent = react_native_1.ImageBackground;
-        }
-        return (React.createElement(ImageComponent, __assign({}, this.props, { onLayout: this.resize, onLoad: this.onLoad, onLoadStart: this.onLoadStart, source: this.props.source, style: [
+        var ImageComponent = this.ImageComponent;
+        return (React.createElement(ImageComponent, __assign({}, this.props, { onLayout: this.onLayout, onLoad: this.onLoad, onLoadStart: this.onLoadStart, source: this.props.source, style: [
                 this.style,
-                this.getStyle(),
-                { height: this.state.height },
+                this.sizeStyle,
+                { height: this.getHeight() },
                 styles.container,
-            ] }), children));
+            ] }), this.shouldDisplayIndicator() ? this.renderActivityIndicator() : this.props.children));
     };
@@ -167,0 +154,0 @@ FitImage.propTypes = propTypes;

package.json

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

README.md

@@ -32,5 +32,5 @@ # 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 and shows indicator while image is loading
+// draws image to fit inherited space automatically and disables loading indicator
 <FitImage
-  indicator
+  indicator={false} // disable loading indicator
   indicatorColor="white" // react native colors or color codes like #919191
@@ -37,0 +37,0 @@ indicatorSize="large" // (small | large) or integer

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

184008

increased by0.03%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Lines of code

377

decreased by-2.84%

No dependency changes