Merge pull request #32700 from Expensify/revert-13036-kidroca/feature/react-native-web-image-headers

 [CP Staging + Prod] Revert "Image Web/Desktop: Add support for http headers"

Author: yuwenmemon

patches/react-native-web+0.19.9+005+image-header-support.patch

@@ -1,35 +1,51 @@
 import lodashGet from 'lodash/get';
-import React, {useMemo} from 'react';
+import React, {useEffect, useMemo} from 'react';
+import {Image as RNImage} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import CONST from '@src/CONST';
+import _ from 'underscore';
 import ONYXKEYS from '@src/ONYXKEYS';
-import BaseImage from './BaseImage';
 import {defaultProps, imagePropTypes} from './imagePropTypes';
 import RESIZE_MODES from './resizeModes';
 
-function Image({source: propsSource, isAuthTokenRequired, session, ...forwardedProps}) {
-    // Update the source to include the auth token if required
+function Image(props) {
+    const {source: propsSource, isAuthTokenRequired, onLoad, session} = props;
+    /**
+     * Check if the image source is a URL - if so the `encryptedAuthToken` is appended
+     * to the source.
+     */
     const source = useMemo(() => {
-        if (typeof lodashGet(propsSource, 'uri') === 'number') {
-            return propsSource.uri;
+        if (isAuthTokenRequired) {
+            // There is currently a `react-native-web` bug preventing the authToken being passed
+            // in the headers of the image request so the authToken is added as a query param.
+            // On native the authToken IS passed in the image request headers
+            const authToken = lodashGet(session, 'encryptedAuthToken', null);
+            return {uri: `${propsSource.uri}?encryptedAuthToken=${encodeURIComponent(authToken)}`};
         }
-        if (typeof propsSource !== 'number' && isAuthTokenRequired) {
-            const authToken = lodashGet(session, 'encryptedAuthToken');
-            return {
-                ...propsSource,
-                headers: {
-                    [CONST.CHAT_ATTACHMENT_TOKEN_KEY]: authToken,
-                },
-            };
-        }
-
         return propsSource;
         // The session prop is not required, as it causes the image to reload whenever the session changes. For more information, please refer to issue #26034.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [propsSource, isAuthTokenRequired]);
 
+    /**
+     * 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
+     */
+    useEffect(() => {
+        // If an onLoad callback was specified then manually call it and pass
+        // the natural image dimensions to match the native API
+        if (onLoad == null) {
+            return;
+        }
+        RNImage.getSize(source.uri, (width, height) => {
+            onLoad({nativeEvent: {width, height}});
+        });
+    }, [onLoad, source]);
+
+    // Omit the props which the underlying RNImage won't use
+    const forwardedProps = _.omit(props, ['source', 'onLoad', 'session', 'isAuthTokenRequired']);
+
     return (
-        <BaseImage
+        <RNImage
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...forwardedProps}
             source={source}

src/components/Image/BaseImage.js

@@ -0,0 +1,63 @@
+import lodashGet from 'lodash/get';
+import React from 'react';
+import RNFastImage from 'react-native-fast-image';
+import {withOnyx} from 'react-native-onyx';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {defaultProps, imagePropTypes} from './imagePropTypes';
+import RESIZE_MODES from './resizeModes';
+
+const dimensionsCache = new Map();
+
+function resolveDimensions(key) {
+    return dimensionsCache.get(key);
+}
+
+function Image(props) {
+    // eslint-disable-next-line react/destructuring-assignment
+    const {source, isAuthTokenRequired, session, ...rest} = props;
+
+    let imageSource = source;
+    if (source && source.uri && typeof source.uri === 'number') {
+        imageSource = source.uri;
+    }
+    if (typeof imageSource !== 'number' && isAuthTokenRequired) {
+        const authToken = lodashGet(props, 'session.encryptedAuthToken', null);
+        imageSource = {
+            ...source,
+            headers: authToken
+                ? {
+                      [CONST.CHAT_ATTACHMENT_TOKEN_KEY]: authToken,
+                  }
+                : null,
+        };
+    }
+
+    return (
+        <RNFastImage
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...rest}
+            source={imageSource}
+            onLoad={(evt) => {
+                const {width, height} = evt.nativeEvent;
+                dimensionsCache.set(source.uri, {width, height});
+                if (props.onLoad) {
+                    props.onLoad(evt);
+                }
+            }}
+        />
+    );
+}
+
+Image.propTypes = imagePropTypes;
+Image.defaultProps = defaultProps;
+Image.displayName = 'Image';
+const ImageWithOnyx = withOnyx({
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+})(Image);
+ImageWithOnyx.resizeMode = RESIZE_MODES;
+ImageWithOnyx.resolveDimensions = resolveDimensions;
+
+export default ImageWithOnyx;

src/components/Image/BaseImage.native.js

@@ -34,6 +34,7 @@ function RoomHeaderAvatars(props) {
             <AttachmentModal
                 headerTitle={props.icons[0].name}
                 source={UserUtils.getFullSizeAvatar(props.icons[0].source, props.icons[0].id)}
+                isAuthTokenRequired
                 isWorkspaceAvatar={props.icons[0].type === CONST.ICON_TYPE_WORKSPACE}
                 originalFileName={props.icons[0].name}
             >
@@ -78,6 +79,7 @@ function RoomHeaderAvatars(props) {
                         <AttachmentModal
                             headerTitle={icon.name}
                             source={UserUtils.getFullSizeAvatar(icon.source, icon.id)}
+                            isAuthTokenRequired
                             originalFileName={icon.name}
                             isWorkspaceAvatar={icon.type === CONST.ICON_TYPE_WORKSPACE}
                         >

src/components/Image/index.js

@@ -134,6 +134,7 @@ function DetailsPage(props) {
                                 <AttachmentModal
                                     headerTitle={details.displayName}
                                     source={UserUtils.getFullSizeAvatar(details.avatar, details.accountID)}
+                                    isAuthTokenRequired
                                     originalFileName={details.originalFileName}
                                 >
                                     {({show}) => (