Refactor Image for Web/Desktop with Source Headers

- Introduced `BaseImage` component that branches between native and web implementations.
    - **Native**: Utilizes `expo-image` directly.
    - **Web**: Minor adjustments made to the `onLoad` event signature for compatibility.
- Eliminated `Image/index.native.js` as both native and web components now leverage a unified high-level implementation for image loading and rendering.
- Added `BaseImage` specific props
- Adapt to `expo-image` deprecation of `event.nativeEvent` usage.
- Ensure compatibility with components using the `onLoad` prop.

Author: kidroca

src/components/Image/BaseImage.native.tsx

@@ -0,0 +1,32 @@
+import {Image as ExpoImage} from 'expo-image';
+import type {ImageLoadEventData} from 'expo-image';
+import {useCallback} from 'react';
+import type {BaseImageProps} from './types';
+
+function BaseImage({onLoad, ...props}: BaseImageProps) {
+    const imageLoadedSuccessfully = useCallback(
+        (event: ImageLoadEventData) => {
+            if (!onLoad) {
+                return;
+            }
+
+            // We override `onLoad`, so both web and native have the same signature
+            const {width, height} = event.source;
+            onLoad({nativeEvent: {width, height}});
+        },
+        [onLoad],
+    );
+
+    return (
+        <ExpoImage
+            // Only subscribe to onLoad when a handler is provided to avoid unnecessary event registrations, optimizing performance.
+            onLoad={onLoad ? imageLoadedSuccessfully : undefined}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+        />
+    );
+}
+
+BaseImage.displayName = 'BaseImage';
+
+export default BaseImage;

src/components/Image/BaseImage.tsx

@@ -0,0 +1,32 @@
+import React, {useCallback} from 'react';
+import {Image as RNImage} from 'react-native';
+import type {ImageLoadEventData} from 'react-native';
+import type {BaseImageProps} from './types';
+
+function BaseImage({onLoad, ...props}: BaseImageProps) {
+    const imageLoadedSuccessfully = useCallback(
+        (event: {nativeEvent: ImageLoadEventData}) => {
+            if (!onLoad) {
+                return;
+            }
+
+            // We override `onLoad`, so both web and native have the same signature
+            const {width, height} = event.nativeEvent.source;
+            onLoad({nativeEvent: {width, height}});
+        },
+        [onLoad],
+    );
+
+    return (
+        <RNImage
+            // Only subscribe to onLoad when a handler is provided to avoid unnecessary event registrations, optimizing performance.
+            onLoad={onLoad ? imageLoadedSuccessfully : undefined}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+        />
+    );
+}
+
+BaseImage.displayName = 'BaseImage';
+
+export default BaseImage;

src/components/Image/index.native.tsx

@@ -1,50 +1,32 @@
-import React, {useEffect, useMemo} from 'react';
-import {Image as RNImage} from 'react-native';
+import React, {useMemo} from 'react';
 import {withOnyx} from 'react-native-onyx';
-import useNetwork from '@hooks/useNetwork';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import BaseImage from './BaseImage';
 import type {ImageOnyxProps, ImageOwnProps, ImageProps} from './types';
 
-function Image({source: propsSource, isAuthTokenRequired = false, onLoad, session, ...forwardedProps}: ImageProps) {
-    const {isOffline} = useNetwork();
-
+function Image({source: propsSource, isAuthTokenRequired = false, session, ...forwardedProps}: ImageProps) {
     /**
      * Check if the image source is a URL - if so the `encryptedAuthToken` is appended
      * to the source.
      */
     const source = useMemo(() => {
         const authToken = session?.encryptedAuthToken ?? null;
         if (isAuthTokenRequired && typeof propsSource === 'object' && 'uri' in propsSource && authToken) {
-            // 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
-            return {uri: `${propsSource?.uri}?encryptedAuthToken=${encodeURIComponent(authToken)}`};
+            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;
-        }
-
-        if (typeof source === 'object' && 'uri' in source && source.uri) {
-            RNImage.getSize(source.uri, (width, height) => {
-                onLoad({nativeEvent: {width, height}});
-            });
-        }
-    }, [onLoad, source, isOffline]);
-
     return (
-        <RNImage
+        <BaseImage
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...forwardedProps}
             source={source}

src/components/Image/index.tsx

@@ -17,13 +17,18 @@ type ImageOnLoadEvent = {
     };
 };
 
-type ImageOwnProps = {
-    /** Styles for the Image */
-    style?: StyleProp<ImageStyle>;
-
+type BaseImageProps = {
     /** The static asset or URI source of the image */
     source: ExpoImageSource | Omit<ImageURISource, 'cache'> | ImageRequireSource | undefined;
 
+    /** Event for when the image is fully loaded and returns the natural dimensions of the image */
+    onLoad?: (event: ImageOnLoadEvent) => void;
+};
+
+type ImageOwnProps = BaseImageProps & {
+    /** Styles for the Image */
+    style?: StyleProp<ImageStyle>;
+
     /** Should an auth token be included in the image request */
     isAuthTokenRequired?: boolean;
 
@@ -39,13 +44,10 @@ type ImageOwnProps = {
     /** Error handler */
     onError?: () => void;
 
-    /** Event for when the image is fully loaded and returns the natural dimensions of the image */
-    onLoad?: (event: ImageOnLoadEvent) => void;
-
     /** Progress events while the image is downloading */
     onProgress?: () => void;
 };
 
 type ImageProps = ImageOnyxProps & ImageOwnProps;
 
-export type {ImageOwnProps, ImageOnyxProps, ImageProps, ExpoImageSource, ImageOnLoadEvent};
+export type {BaseImageProps, ImageOwnProps, ImageOnyxProps, ImageProps, ExpoImageSource, ImageOnLoadEvent};