feat: ✨updateImageHeight with safe check

ExampleApp/.babelrc

@@ -2,7 +2,7 @@
   "presets": ["babel-preset-expo"],
   "env": {
     "development": {
-      "plugins": ["transform-react-jsx-source"]
+      "plugins": ["@babel/transform-react-jsx-source"]
     }
   }
 }

ExampleApp/app.json

@@ -1,5 +1,5 @@
 {
   "expo": {
-    "sdkVersion": "23.0.0"
+    "sdkVersion": "32.0.0"
   }
 }

ExampleApp/package.json

@@ -1,27 +1,26 @@
 {
-  "name": "ExampleApp",
+  "name": "example-app",
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "jest-expo": "23.0.0",
-    "react-native-scripts": "1.8.1",
-    "react-test-renderer": "16.0.0"
+    "jest-expo": "^32.0.0",
+    "react-test-renderer": "^16.8.4"
   },
-  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
+  "main": "node_modules/expo/AppEntry.js",
   "scripts": {
-    "start": "react-native-scripts start",
-    "eject": "react-native-scripts eject",
-    "android": "react-native-scripts android",
-    "ios": "react-native-scripts ios",
-    "test": "node node_modules/jest/bin/jest.js --watch"
+    "start": "expo start",
+    "eject": "expo eject",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "test": "jest"
   },
   "jest": {
     "preset": "jest-expo"
   },
   "dependencies": {
-    "expo": "^23.0.4",
-    "react": "16.0.0",
-    "react-native": "0.50.3",
-    "react-native-auto-height-image": "^1.0.0"
+    "expo": "^32.0.0",
+    "react": "16.5.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
+    "react-native-auto-height-image": "^1.0.5"
   }
 }

autoHeightImage.js

@@ -30,7 +30,7 @@ export default class AutoHeightImage extends PureComponent {
     this.setInitialImageHeight();
   }
 
-  updateMarker = null
+  updateSequence = 0;
 
   async componentDidMount() {
     this.hasMounted = true;
@@ -43,6 +43,8 @@ export default class AutoHeightImage extends PureComponent {
 
   componentWillUnmount() {
     this.hasMounted = false;
+    // clear memory usage
+    this.updateSequence = null;
   }
 
   setInitialImageHeight() {
@@ -65,11 +67,11 @@ export default class AutoHeightImage extends PureComponent {
       // image height could not be `0`
       const { source, width, onHeightChange } = props;
       try {
-        const safeMarker = Math.random()
-        this.updateMarker = safeMarker
+        const updateSequence = ++this.updateSequence;
         const { height } = await getImageSizeFitWidth(source, width);
-        const currentMarker = this.updateMarker
-        if (safeMarker && safeMarker !== currentMarker) return
+        if (updateSequence !== this.updateSequence) {
+          return;
+        }
 
         this.styles = StyleSheet.create({ image: { width, height } });
         if (this.hasMounted) {

package.json

@@ -29,8 +29,8 @@
     "husky": "^0.14.3",
     "lint-staged": "^6.1.0",
     "prettier": "^1.10.2",
-    "react": "16.0.0-alpha.6",
-    "react-native": "^0.43.4",
+    "react": "^16.8.4",
+    "react-native": "0.58.6",
     "standard-version": "^4.0.0"
   },
   "peerDependencies": {