diff --git a/.gitignore b/.gitignore index 6e09cb4..30e8bf1 100644 --- 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 index dbe7c74..d42f09a 100644 --- 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 index 345d633..a702c31 100644 --- 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 index 0b6f496..640c79d 100644 --- 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 };