fix: 🐛 fix `Can't perform a React state update on an unmounted compon…

…ent.` closes #44
vivaxy · May 7, 2020 · 035e6a8 · 035e6a8
1 parent dbe6df5
commit 035e6a8
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 15 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@
 /build
 node_modules
 npm-debug.log
+yarn-error.log
diff --git a/ExampleApp/package.json b/ExampleApp/package.json
@@ -5,14 +5,15 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
-    "eject": "expo eject"
+    "eject": "expo eject",
+    "postinstall": "rm -rf ./node_modules/react-native-auto-height-image/node_modules && rm -rf ./node_modules/react-native-auto-height-image/ExampleApp"
   },
   "dependencies": {
     "expo": "^34.0.1",
     "react": "16.8.3",
     "react-dom": "^16.8.6",
     "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
-    "react-native-auto-height-image": "^3.0.0",
+    "react-native-auto-height-image": "file:..",
     "react-native-web": "^0.11.4"
   },
   "devDependencies": {

diff --git a/ExampleApp/yarn.lock b/ExampleApp/yarn.lock
@@ -3970,10 +3970,8 @@ react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
   integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
 
-react-native-auto-height-image@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/react-native-auto-height-image/-/react-native-auto-height-image-3.0.0.tgz#2df6dbbcad5d873acf4f63e5187a8a0fd546b134"
-  integrity sha512-Tt1VU7bFm3qxzwl/jwfVlo1R4dUuVDKvWYFqOROrXRAhjkuKIACC4UdfVhUv6RJJJbWhBrxHP0SPVe458MIbZg==
+"react-native-auto-height-image@file:..":
+  version "3.1.2"
   dependencies:
     prop-types "^15.7.2"
 

diff --git a/autoHeightImage.js b/autoHeightImage.js
@@ -2,7 +2,7 @@
  * @since 2017-04-11 19:10:08
  * @author vivaxy
  */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import ImagePolyfill from './imagePolyfill';
 import AnimatableImage from './animatableImage';
 import PropTypes from 'prop-types';
@@ -16,14 +16,27 @@ const { resizeMode, ...ImagePropTypes } = AnimatableImage.propTypes;
 function AutoHeightImage(props) {
   const { onHeightChange, source, width, style, ...rest } = props;
   const [height, setHeight] = useState(DEFAULT_HEIGHT);
-
-  useEffect(() => {
-    (async () => {
-      const { height: newHeight } = await getImageSizeFitWidth(source, width);
-      setHeight(newHeight);
-      onHeightChange(newHeight);
-    })();
-  }, [source, onHeightChange, width]);
+  const mountedRef = useRef(false);
+
+  useEffect(function() {
+    mountedRef.current = true;
+    return function() {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  useEffect(
+    function() {
+      (async function() {
+        const { height: newHeight } = await getImageSizeFitWidth(source, width);
+        if (mountedRef.current) {
+          setHeight(newHeight);
+          onHeightChange(newHeight);
+        }
+      })();
+    },
+    [source, onHeightChange, width]
+  );
 
   // StyleSheet.create will cache styles, not what we want
   const imageStyles = { width, height };