diff --git a/package-lock.json b/package-lock.json index 4d83093d1f5d..1528ae678a2b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "hasInstallScript": true, "license": "MIT", "dependencies": { - "@expensify/react-native-web": "0.18.12", + "@expensify/react-native-web": "0.18.15", "@formatjs/intl-getcanonicallocales": "^1.5.8", "@formatjs/intl-locale": "^2.4.21", "@formatjs/intl-numberformat": "^6.2.5", @@ -2468,9 +2468,9 @@ "dev": true }, "node_modules/@expensify/react-native-web": { - "version": "0.18.12", - "resolved": "https://registry.npmjs.org/@expensify/react-native-web/-/react-native-web-0.18.12.tgz", - "integrity": "sha512-0+4XdDTNM2/XsURL++qJyBrrmpsm/mgZ+z1QgPahBkS85DxHvUkj4fwFidN8kkONz5yn2URfr6PxVqAQ0dpETg==", + "version": "0.18.15", + "resolved": "https://registry.npmjs.org/@expensify/react-native-web/-/react-native-web-0.18.15.tgz", + "integrity": "sha512-xE3WdGKY4SRLfIrimUlgP78ZsDaWy3g+KIO8mpxTm9zCXeX/sgEYs6QvhFghgEhhp7Y1bLH9LWTKiZy9LZM8EA==", "dependencies": { "@babel/runtime": "^7.18.6", "create-react-class": "^15.7.0", @@ -46538,9 +46538,9 @@ } }, "@expensify/react-native-web": { - "version": "0.18.12", - "resolved": "https://registry.npmjs.org/@expensify/react-native-web/-/react-native-web-0.18.12.tgz", - "integrity": "sha512-0+4XdDTNM2/XsURL++qJyBrrmpsm/mgZ+z1QgPahBkS85DxHvUkj4fwFidN8kkONz5yn2URfr6PxVqAQ0dpETg==", + "version": "0.18.15", + "resolved": "https://registry.npmjs.org/@expensify/react-native-web/-/react-native-web-0.18.15.tgz", + "integrity": "sha512-xE3WdGKY4SRLfIrimUlgP78ZsDaWy3g+KIO8mpxTm9zCXeX/sgEYs6QvhFghgEhhp7Y1bLH9LWTKiZy9LZM8EA==", "requires": { "@babel/runtime": "^7.18.6", "create-react-class": "^15.7.0", diff --git a/package.json b/package.json index c7d117b580e0..085b2e95dad4 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "test:e2e": "node tests/e2e/testRunner.js --development" }, "dependencies": { - "@expensify/react-native-web": "0.18.12", + "@expensify/react-native-web": "0.18.15", "@formatjs/intl-getcanonicallocales": "^1.5.8", "@formatjs/intl-locale": "^2.4.21", "@formatjs/intl-numberformat": "^6.2.5", diff --git a/src/components/Avatar.js b/src/components/Avatar.js index ed05a78d18c4..687ed8d4f5c4 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -8,7 +8,6 @@ import themeColors from '../styles/themes/default'; import CONST from '../CONST'; import * as StyleUtils from '../styles/StyleUtils'; import * as Expensicons from './Icon/Expensicons'; -import getAvatarDefaultSource from '../libs/getAvatarDefaultSource'; import Image from './Image'; import {withNetwork} from './OnyxProvider'; import networkPropTypes from './networkPropTypes'; @@ -119,12 +118,7 @@ class Avatar extends PureComponent { ) : ( - this.setState({imageError: true})} - /> + this.setState({imageError: true})} /> )} ); diff --git a/src/components/Image/index.js b/src/components/Image/index.js index 0b42f3ee25d7..43b3d112c19e 100644 --- a/src/components/Image/index.js +++ b/src/components/Image/index.js @@ -8,36 +8,23 @@ import {defaultProps, imagePropTypes} from './imagePropTypes'; import RESIZE_MODES from './resizeModes'; class Image extends React.Component { - constructor(props) { - super(props); - - this.debouncedConfigureImageSource = _.debounce(this.configureImageSource, 220); - - this.state = { - imageSource: undefined, - }; - } - componentDidMount() { - this.debouncedConfigureImageSource(); + this.configureOnLoad(); } componentDidUpdate(prevProps) { - if (prevProps.source.uri === this.props.source.uri) { + if (prevProps.source === this.props.source) { return; } - - this.debouncedConfigureImageSource.cancel(); - this.debouncedConfigureImageSource(); + this.configureOnLoad(); } /** * Check if the image source is a URL - if so the `encryptedAuthToken` is appended - * to the source. The natural image dimensions can then be retrieved using this source - * and as a result the `onLoad` event needs to be maunually invoked to return these dimensions + * to the source. + * @returns {Object} - the configured image source */ - configureImageSource() { - this.props.onLoadStart(); + getImageSource() { const source = this.props.source; let imageSource = source; if (this.props.isAuthTokenRequired) { @@ -47,25 +34,34 @@ class Image extends React.Component { const authToken = lodashGet(this.props, 'session.encryptedAuthToken', null); imageSource = {uri: `${source.uri}?encryptedAuthToken=${encodeURIComponent(authToken)}`}; } - this.setState({imageSource}); + return imageSource; + } + + /** + * The natural image dimensions are retrieved using the updated source + * and as a result the `onLoad` event needs to be manually invoked to return these dimensions + */ + configureOnLoad() { // If an onLoad callback was specified then manually call it and pass // the natural image dimensions to match the native API if (this.props.onLoad == null) { return; } + const imageSource = this.getImageSource(); RNImage.getSize(imageSource.uri, (width, height) => { this.props.onLoad({nativeEvent: {width, height}}); }); } render() { - // eslint-disable-next-line - const { source, onLoad, ...rest } = this.props; + // Omit the props which the underlying RNImage won't use + const forwardedProps = _.omit(this.props, ['source', 'onLoad', 'session', 'isAuthTokenRequired']); + const source = this.getImageSource(); - // eslint-disable-next-line - return ; + // eslint-disable-next-line react/jsx-props-no-spreading + return ; } } diff --git a/src/libs/getAvatarDefaultSource/index.js b/src/libs/getAvatarDefaultSource/index.js deleted file mode 100644 index 54c2a7d04b01..000000000000 --- a/src/libs/getAvatarDefaultSource/index.js +++ /dev/null @@ -1,7 +0,0 @@ -/** - * Avatar icon flickers when message is sent for the first time, return and set the source as - * defaultSource prop of image to prevent avatar icon from flicker when running on Web/Desktop - * @param {String|Function} source The source of avatar image - * @return {Object} The image source - */ -export default source => ({uri: source}); diff --git a/src/libs/getAvatarDefaultSource/index.native.js b/src/libs/getAvatarDefaultSource/index.native.js deleted file mode 100644 index 1c1c79caf151..000000000000 --- a/src/libs/getAvatarDefaultSource/index.native.js +++ /dev/null @@ -1,5 +0,0 @@ -/** - * Avatar icon does not flicker when running on Native, return and set undefined as defaultSource prop of image - * @return {Object} undefined - */ -export default () => undefined;