[TS Migration] Migrate Image to TypeScript

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

@@ -1,35 +1,35 @@
-import lodashGet from 'lodash/get';
 import React from 'react';
-import RNFastImage from 'react-native-fast-image';
+import {ImageRequireSource, ImageURISource} from 'react-native';
+import RNFastImage, {Source} 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';
+import {DimensionsCacheValue, ImageOnyxProps, ImagePropsWithOnyx} from './types';
 
-const dimensionsCache = new Map();
+const dimensionsCache = new Map<string, DimensionsCacheValue>();
 
-function resolveDimensions(key) {
+function resolveDimensions(key: string) {
     return dimensionsCache.get(key);
 }
 
-function Image(props) {
+function Image(props: ImagePropsWithOnyx) {
     // eslint-disable-next-line react/destructuring-assignment
     const {source, isAuthTokenRequired, session, ...rest} = props;
 
-    let imageSource = source;
-    if (source && source.uri && typeof source.uri === 'number') {
+    let imageSource: Omit<ImageURISource, 'cache'> | ImageRequireSource | Source = source;
+    if (typeof source !== 'number' && typeof source.uri === 'number') {
         imageSource = source.uri;
     }
-    if (typeof imageSource !== 'number' && isAuthTokenRequired) {
-        const authToken = lodashGet(props, 'session.encryptedAuthToken', null);
+    if (typeof source !== 'number' && isAuthTokenRequired) {
+        const authToken = props.session?.encryptedAuthToken ?? null;
         imageSource = {
             ...source,
             headers: authToken
                 ? {
                       [CONST.CHAT_ATTACHMENT_TOKEN_KEY]: authToken,
                   }
-                : null,
+                : undefined,
         };
     }
 
@@ -39,6 +39,9 @@ function Image(props) {
             {...rest}
             source={imageSource}
             onLoad={(evt) => {
+                if (typeof source === 'number' || !source.uri) {
+                    return;
+                }
                 const {width, height} = evt.nativeEvent;
                 dimensionsCache.set(source.uri, {width, height});
                 if (props.onLoad) {
@@ -49,15 +52,14 @@ function Image(props) {
     );
 }
 
-Image.propTypes = imagePropTypes;
-Image.defaultProps = defaultProps;
 Image.displayName = 'Image';
-const ImageWithOnyx = withOnyx({
+Image.resizeMode = RESIZE_MODES;
+Image.resolveDimensions = resolveDimensions;
+
+const ImageWithOnyx = withOnyx<ImagePropsWithOnyx, ImageOnyxProps>({
     session: {
         key: ONYXKEYS.SESSION,
     },
 })(Image);
-ImageWithOnyx.resizeMode = RESIZE_MODES;
-ImageWithOnyx.resolveDimensions = resolveDimensions;
 
 export default ImageWithOnyx;

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

@@ -1,25 +1,24 @@
-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, ImageProps, ImagePropsWithOnyx} from './types';
 
-function Image(props) {
-    const {source: propsSource, isAuthTokenRequired, onLoad, session} = props;
+function Image(props: ImagePropsWithOnyx) {
+    const {source: propsSource, isAuthTokenRequired, onLoad, session, ...forwardedProps} = props;
     /**
      * 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);
-            return {uri: `${propsSource.uri}?encryptedAuthToken=${encodeURIComponent(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
+        const authToken = session?.encryptedAuthToken ?? null;
+
+        if (isAuthTokenRequired && authToken && typeof propsSource !== 'number') {
+            return {uri: `${propsSource?.uri}?encryptedAuthToken=${encodeURIComponent(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.
@@ -33,17 +32,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 (onLoad == null || 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 +49,20 @@ function Image(props) {
     );
 }
 
-function imagePropsAreEqual(prevProps, nextProps) {
+function imagePropsAreEqual(prevProps: ImageProps, nextProps: ImageProps) {
     return prevProps.source === nextProps.source;
 }
 
-Image.propTypes = imagePropTypes;
-Image.defaultProps = defaultProps;
+Image.resizeMode = RESIZE_MODES;
+Image.displayName = 'Image';
 
 const ImageWithOnyx = React.memo(
-    withOnyx({
+    withOnyx<ImagePropsWithOnyx, ImageOnyxProps>({
         session: {
             key: ONYXKEYS.SESSION,
         },
     })(Image),
     imagePropsAreEqual,
 );
-ImageWithOnyx.resizeMode = RESIZE_MODES;
 
 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,48 @@
+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 = {
+    /* Onyx Props */
+    /** Session info for the currently logged in user. */
+    session: OnyxEntry<Session>;
+};
+
+type ImageProps = {
+    /** 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 ImagePropsWithOnyx = ImageOnyxProps & ImageProps;
+
+type DimensionsCacheValue = {
+    width: number;
+    height: number;
+};
+
+export type {ImageProps, ImageOnyxProps, ImagePropsWithOnyx, DimensionsCacheValue};