[TS Migration] Migrate Image to TypeScript

src/components/Image/index.native.tsx

@@ -0,0 +1,45 @@
+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 {FastImageSource, ImageOnyxProps, ImageProps} from './types';
+
+function Image({source, isAuthTokenRequired, session, ...rest}: ImageProps) {
+    let imageSource: FastImageSource = source;
+    if (typeof source !== 'number' && typeof source.uri === 'number') {
+        imageSource = source.uri;
+    }
+    if (typeof imageSource !== 'number' && typeof source !== 'number' && isAuthTokenRequired) {
+        const authToken = session?.encryptedAuthToken ?? null;
+        imageSource = {
+            ...source,
+            headers: authToken
+                ? {
+                      [CONST.CHAT_ATTACHMENT_TOKEN_KEY]: authToken,
+                  }
+                : undefined,
+        };
+    }
+
+    return (
+        <RNFastImage
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...rest}
+            source={imageSource}
+            onLoad={(evt) => {
+                rest.onLoad?.(evt);
+            }}
+        />
+    );
+}
+
+const ImageWithOnyx = withOnyx<ImageProps, ImageOnyxProps>({
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+})(Image);
+
+ImageWithOnyx.displayName = 'Image';
+
+export default ImageWithOnyx;

src/components/Image/index.js → src/components/Image/index.tsx

@@ -1,24 +1,21 @@
-import lodashGet from 'lodash/get';
 import React, {useEffect, useMemo} from 'react';
 import {Image as RNImage} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
 import ONYXKEYS from '@src/ONYXKEYS';
-import {defaultProps, imagePropTypes} from './imagePropTypes';
-import RESIZE_MODES from './resizeModes';
+import {ImageOnyxProps, ImageOwnProps, ImageProps} from './types';
 
-function Image(props) {
-    const {source: propsSource, isAuthTokenRequired, onLoad, session} = props;
+function Image({source: propsSource, isAuthTokenRequired, onLoad, session, ...forwardedProps}: ImageProps) {
     /**
      * Check if the image source is a URL - if so the `encryptedAuthToken` is appended
      * to the source.
      */
     const source = useMemo(() => {
-        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);
+        // 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 = session?.encryptedAuthToken ?? null;
+
+        if (isAuthTokenRequired && authToken && typeof propsSource !== 'number' && propsSource.uri) {
             return {uri: `${propsSource.uri}?encryptedAuthToken=${encodeURIComponent(authToken)}`};
         }
         return propsSource;
@@ -33,17 +30,14 @@ function Image(props) {
     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) {
+        if (typeof onLoad !== 'function' || typeof source === 'number' || !source.uri) {
             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 (
         <RNImage
             // eslint-disable-next-line react/jsx-props-no-spreading
@@ -53,21 +47,19 @@ function Image(props) {
     );
 }
 
-function imagePropsAreEqual(prevProps, nextProps) {
+function imagePropsAreEqual(prevProps: ImageOwnProps, nextProps: ImageOwnProps) {
     return prevProps.source === nextProps.source;
 }
 
-Image.propTypes = imagePropTypes;
-Image.defaultProps = defaultProps;
-
 const ImageWithOnyx = React.memo(
-    withOnyx({
+    withOnyx<ImageProps, ImageOnyxProps>({
         session: {
             key: ONYXKEYS.SESSION,
         },
     })(Image),
     imagePropsAreEqual,
 );
-ImageWithOnyx.resizeMode = RESIZE_MODES;
+
+ImageWithOnyx.displayName = 'Image';
 
 export default ImageWithOnyx;

src/components/Image/resizeModes.js → src/components/Image/resizeModes.ts

@@ -3,6 +3,6 @@ const RESIZE_MODES = {
     cover: 'cover',
     stretch: 'stretch',
     center: 'center',
-};
+} as const;
 
 export default RESIZE_MODES;

src/components/Image/types.ts

@@ -0,0 +1,44 @@
+import {ImageRequireSource, ImageResizeMode, ImageStyle, ImageURISource, StyleProp} from 'react-native';
+import {ImageStyle as FastImageStyle, OnLoadEvent, ResizeMode, Source} from 'react-native-fast-image';
+import {OnyxEntry} from 'react-native-onyx';
+import {Session} from '@src/types/onyx';
+
+type ImageOnyxProps = {
+    /** Session info for the currently logged in user. */
+    session: OnyxEntry<Session>;
+};
+
+type ImageOwnProps = {
+    /** Styles for the Image */
+    style?: StyleProp<ImageStyle & FastImageStyle>;
+
+    /** The static asset or URI source of the image */
+    source: Omit<ImageURISource, 'cache'> | ImageRequireSource | Omit<Source, 'cache'>;
+
+    /** Should an auth token be included in the image request */
+    isAuthTokenRequired?: boolean;
+
+    /** How should the image fit within its container */
+    resizeMode?: ImageResizeMode & ResizeMode;
+
+    /** Event for when the image begins loading */
+    onLoadStart?: () => void;
+
+    /** Event for when the image finishes loading */
+    onLoadEnd?: () => void;
+
+    /** Error handler */
+    onError?: () => void;
+
+    /** Event for when the image is fully loaded and returns the natural dimensions of the image */
+    onLoad?: (event: OnLoadEvent) => void;
+
+    /** Progress events while the image is downloading */
+    onProgress?: () => void;
+};
+
+type ImageProps = ImageOnyxProps & ImageOwnProps;
+
+type FastImageSource = Omit<ImageURISource, 'cache'> | ImageRequireSource | Source;
+
+export type {ImageOwnProps, ImageOnyxProps, ImageProps, FastImageSource};

src/components/ImageView/index.js

@@ -3,6 +3,7 @@ import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import Image from '@components/Image';
+import RESIZE_MODES from '@components/Image/resizeModes';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as StyleUtils from '@styles/StyleUtils';
@@ -239,7 +240,7 @@ function ImageView({isAuthTokenRequired, url, fileName, onError}) {
                     style={isLoading || zoomScale === 0 ? undefined : [styles.w100, styles.h100]}
                     // When Image dimensions are lower than the container boundary(zoomscale <= 1), use `contain` to render the image with natural dimensions.
                     // Both `center` and `contain` keeps the image centered on both x and y axis.
-                    resizeMode={zoomScale > 1 ? Image.resizeMode.center : Image.resizeMode.contain}
+                    resizeMode={zoomScale > 1 ? RESIZE_MODES.center : RESIZE_MODES.contain}
                     onLoadStart={imageLoadingStart}
                     onLoad={imageLoad}
                     onError={onError}
@@ -270,7 +271,7 @@ function ImageView({isAuthTokenRequired, url, fileName, onError}) {
                     source={{uri: url}}
                     isAuthTokenRequired={isAuthTokenRequired}
                     style={[styles.h100, styles.w100]}
-                    resizeMode={Image.resizeMode.contain}
+                    resizeMode={RESIZE_MODES.contain}
                     onLoadStart={imageLoadingStart}
                     onLoad={imageLoad}
                     onError={onError}

src/components/ImageView/index.native.js

@@ -5,6 +5,7 @@ import ImageZoom from 'react-native-image-pan-zoom';
 import _ from 'underscore';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import Image from '@components/Image';
+import RESIZE_MODES from '@components/Image/resizeModes';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
@@ -219,7 +220,7 @@ function ImageView({isAuthTokenRequired, url, onScaleChanged, onPress, style}) {
                         ]}
                         source={{uri: url}}
                         isAuthTokenRequired={isAuthTokenRequired}
-                        resizeMode={Image.resizeMode.contain}
+                        resizeMode={RESIZE_MODES.contain}
                         onLoadStart={imageLoadingStart}
                         onLoad={configureImageZoom}
                     />