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

Comparing version 1.1.0 to 1.1.1

index.js

@@ -15,2 +15,4 @@ import React, { Component } from 'react';
 
+const getSourceKey = source => (source && source.uri) || String(source);
+
 export const createImageProgress = ImageComponent =>
@@ -29,3 +31,3 @@ class ImageProgress extends Component {
       imageStyle: PropTypes.object,
-      threshold: PropTypes.number.isRequired,
+      threshold: PropTypes.number,
     };
@@ -42,2 +44,15 @@
 
+    static getDerivedStateFromProps(props, state) {
+      const sourceKey = getSourceKey(props.source);
+      if (sourceKey !== state.sourceKey) {
+        return {
+          sourceKey,
+          error: null,
+          loading: false,
+          progress: 0,
+        };
+      }
+      return null;
+    }
+
     constructor(props) {
@@ -47,2 +62,3 @@ super(props);
       this.state = {
+        sourceKey: getSourceKey(props.source),
         error: null,
@@ -64,16 +80,2 @@ loading: false,
 
-    componentWillReceiveProps(props) {
-      if (
-        !this.props.source ||
-        !props.source ||
-        this.props.source.uri !== props.source.uri
-      ) {
-        this.setState({
-          error: null,
-          loading: false,
-          progress: 0,
-        });
-      }
-    }
-
     componentWillUnmount() {
@@ -152,5 +154,4 @@ if (this.thresholdTimer) {
 
-    onLoadEnd = event => {
+    handleLoadEnd = event => {
       this.setState({
-        error: null,
         loading: false,
@@ -160,3 +161,3 @@ progress: 1,
       this.bubbleEvent('onLoadEnd', event);
-    }
+    };
 
@@ -192,3 +193,9 @@ render() {
       }
-      const { progress, thresholdReached, loading, error } = this.state;
+      const {
+        progress,
+        sourceKey,
+        thresholdReached,
+        loading,
+        error,
+      } = this.state;
 
@@ -207,5 +214,4 @@ let indicatorElement;
         } else {
-          const IndicatorComponent = typeof indicator === 'function'
-            ? indicator
-            : DefaultIndicator;
+          const IndicatorComponent =
+            typeof indicator === 'function' ? indicator : DefaultIndicator;
           indicatorElement = (
@@ -228,3 +234,3 @@ <IndicatorComponent
             {...props}
-            key={source && source.uri}
+            key={sourceKey}
             onLoadStart={this.handleLoadStart}
@@ -234,3 +240,3 @@ onProgress={this.handleProgress}
             onLoad={this.handleLoad}
-            onLoadEnd={this.onLoadEnd}
+            onLoadEnd={this.handleLoadEnd}
             source={source}
@@ -237,0 +243,0 @@ style={[StyleSheet.absoluteFill, imageStyle]}

package.json

 {
   "name": "react-native-image-progress",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Progress indicator for networked images, supports progress bar and spinner",
@@ -8,3 +8,3 @@ "main": "index.js",
     "test": "eslint index.js",
-    "format": "./node_modules/.bin/prettier --single-quote --trailing-comma all --write {,Example/}*.js"
+    "format": "./node_modules/.bin/prettier --write {,Example/}*.js"
   },
@@ -53,4 +53,4 @@ "keywords": [
     "eslint-plugin-react": "^7.0.1",
-    "prettier": "^1.4.4"
+    "prettier": "^1.13.3"
   }
 }

README.md

@@ -1,2 +0,2 @@
-# react-native-image-progress [![npm version](https://img.shields.io/npm/v/react-native-image-progress.svg?style=flat)](https://www.npmjs.com/package/react-native-image-progress)
+# react-native-image-progress [![Travis](https://img.shields.io/travis/oblador/react-native-image-progress.svg)](https://travis-ci.org/oblador/react-native-image-progress) [![npm version](https://img.shields.io/npm/v/react-native-image-progress.svg)](https://www.npmjs.com/package/react-native-image-progress)
 *Progress indicator for networked images in React Native*
@@ -3,0 +3,0 @@

No alert changes

Improved metrics

Total package byte prevSize

11981

increased by2.06%

Lines of code

215

increased by2.38%

No dependency changes