diff --git a/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js b/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.tsx
similarity index 67%
rename from src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js
rename to src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.tsx
index dd2713a38b2b..d46dce1a3658 100644
--- a/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js
+++ b/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.tsx
@@ -1,19 +1,14 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import {PixelRatio, View} from 'react-native';
+import {PixelRatio, StyleProp, View, ViewStyle} from 'react-native';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import useThemeStyles from '@styles/useThemeStyles';
 
-const propTypes = {
+type AttachmentCarouselCellRendererProps = {
     /** Cell Container styles */
-    style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
+    style: StyleProp<ViewStyle>;
 };
 
-const defaultProps = {
-    style: [],
-};
-
-function AttachmentCarouselCellRenderer(props) {
+function AttachmentCarouselCellRenderer(props: AttachmentCarouselCellRendererProps) {
     const styles = useThemeStyles();
     const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
     const modalStyles = styles.centeredModalStyles(isSmallScreenWidth, true);
@@ -28,8 +23,6 @@ function AttachmentCarouselCellRenderer(props) {
     );
 }
 
-AttachmentCarouselCellRenderer.propTypes = propTypes;
-AttachmentCarouselCellRenderer.defaultProps = defaultProps;
 AttachmentCarouselCellRenderer.displayName = 'AttachmentCarouselCellRenderer';
 
 export default React.memo(AttachmentCarouselCellRenderer);
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselActions.js b/src/components/Attachments/AttachmentCarousel/CarouselActions.js
deleted file mode 100644
index cf5309222c4e..000000000000
--- a/src/components/Attachments/AttachmentCarousel/CarouselActions.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
-import {useEffect} from 'react';
-import KeyboardShortcut from '@libs/KeyboardShortcut';
-import CONST from '@src/CONST';
-
-const propTypes = {
-    /** Callback to cycle through attachments */
-    onCycleThroughAttachments: PropTypes.func.isRequired,
-};
-
-function CarouselActions({onCycleThroughAttachments}) {
-    useEffect(() => {
-        const shortcutLeftConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_LEFT;
-        const unsubscribeLeftKey = KeyboardShortcut.subscribe(
-            shortcutLeftConfig.shortcutKey,
-            (e) => {
-                if (lodashGet(e, 'target.blur')) {
-                    // prevents focus from highlighting around the modal
-                    e.target.blur();
-                }
-
-                onCycleThroughAttachments(-1);
-            },
-            shortcutLeftConfig.descriptionKey,
-            shortcutLeftConfig.modifiers,
-        );
-
-        const shortcutRightConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_RIGHT;
-        const unsubscribeRightKey = KeyboardShortcut.subscribe(
-            shortcutRightConfig.shortcutKey,
-            (e) => {
-                if (lodashGet(e, 'target.blur')) {
-                    // prevents focus from highlighting around the modal
-                    e.target.blur();
-                }
-
-                onCycleThroughAttachments(1);
-            },
-            shortcutRightConfig.descriptionKey,
-            shortcutRightConfig.modifiers,
-        );
-
-        return () => {
-            unsubscribeLeftKey();
-            unsubscribeRightKey();
-        };
-    }, [onCycleThroughAttachments]);
-
-    return null;
-}
-
-CarouselActions.propTypes = propTypes;
-
-export default CarouselActions;
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselActions.tsx b/src/components/Attachments/AttachmentCarousel/CarouselActions.tsx
new file mode 100644
index 000000000000..bdc181b6be9d
--- /dev/null
+++ b/src/components/Attachments/AttachmentCarousel/CarouselActions.tsx
@@ -0,0 +1,33 @@
+import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
+import CONST from '@src/CONST';
+
+type CarouselActionsProps = {
+    onCycleThroughAttachments: (direction: number) => void;
+};
+
+const shortcutLeftConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_LEFT;
+const shortcutRightConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_RIGHT;
+
+function CarouselActions({onCycleThroughAttachments}: CarouselActionsProps) {
+    useKeyboardShortcut(shortcutLeftConfig, (e) => {
+        const target = e?.target as HTMLElement;
+        // prevents focus from highlighting around the modal
+        target?.blur();
+
+        onCycleThroughAttachments(-1);
+    });
+
+    useKeyboardShortcut(shortcutRightConfig, (e) => {
+        const target = e?.target as HTMLElement;
+        // prevents focus from highlighting around the modal
+        target?.blur();
+
+        onCycleThroughAttachments(1);
+    });
+
+    return null;
+}
+
+CarouselActions.displayName = 'CarouselActions';
+
+export default CarouselActions;
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js b/src/components/Attachments/AttachmentCarousel/CarouselButtons.tsx
similarity index 69%
rename from src/components/Attachments/AttachmentCarousel/CarouselButtons.js
rename to src/components/Attachments/AttachmentCarousel/CarouselButtons.tsx
index 14a6ea268468..8d6bac6bf8b5 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
+++ b/src/components/Attachments/AttachmentCarousel/CarouselButtons.tsx
@@ -1,8 +1,5 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
-import _ from 'underscore';
-import * as AttachmentCarouselViewPropTypes from '@components/Attachments/propTypes';
 import Button from '@components/Button';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Tooltip from '@components/Tooltip';
@@ -10,36 +7,23 @@ import useLocalize from '@hooks/useLocalize';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
+import {Attachment} from './CarouselItem';
 
-const propTypes = {
-    /** Where the arrows should be visible */
-    shouldShowArrows: PropTypes.bool.isRequired,
-
-    /** The current page index */
-    page: PropTypes.number.isRequired,
-
-    /** The attachments from the carousel */
-    attachments: AttachmentCarouselViewPropTypes.attachmentsPropType.isRequired,
-
-    /** Callback to go one page back */
-    onBack: PropTypes.func.isRequired,
-    /** Callback to go one page forward */
-    onForward: PropTypes.func.isRequired,
-
-    autoHideArrow: PropTypes.func,
-    cancelAutoHideArrow: PropTypes.func,
-};
-
-const defaultProps = {
-    autoHideArrow: () => {},
-    cancelAutoHideArrow: () => {},
+type CarouselButtonsProps = {
+    shouldShowArrows: boolean;
+    page: number;
+    attachments: Attachment[];
+    onBack: () => void;
+    onForward: () => void;
+    autoHideArrow?: () => void;
+    cancelAutoHideArrow?: () => void;
 };
 
-function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward, cancelAutoHideArrow, autoHideArrow}) {
+function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward, cancelAutoHideArrow = () => {}, autoHideArrow = () => {}}: CarouselButtonsProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const isBackDisabled = page === 0;
-    const isForwardDisabled = page === _.size(attachments) - 1;
+    const isForwardDisabled = page === attachments.length - 1;
 
     const {translate} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -58,6 +42,7 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward
                             onPress={onBack}
                             onPressIn={cancelAutoHideArrow}
                             onPressOut={autoHideArrow}
+                            text=""
                         />
                     </View>
                 </Tooltip>
@@ -74,6 +59,7 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward
                             onPress={onForward}
                             onPressIn={cancelAutoHideArrow}
                             onPressOut={autoHideArrow}
+                            text=""
                         />
                     </View>
                 </Tooltip>
@@ -82,8 +68,6 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward
     ) : null;
 }
 
-CarouselButtons.propTypes = propTypes;
-CarouselButtons.defaultProps = defaultProps;
 CarouselButtons.displayName = 'CarouselButtons';
 
 export default CarouselButtons;
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselItem.js b/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx
similarity index 65%
rename from src/components/Attachments/AttachmentCarousel/CarouselItem.js
rename to src/components/Attachments/AttachmentCarousel/CarouselItem.tsx
index b6cc0cbf21a4..49f48283dfb3 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselItem.js
+++ b/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx
@@ -1,8 +1,6 @@
-import PropTypes from 'prop-types';
 import React, {useContext, useState} from 'react';
-import {View} from 'react-native';
+import {Role, StyleProp, View, ViewStyle} from 'react-native';
 import AttachmentView from '@components/Attachments/AttachmentView';
-import * as AttachmentsPropTypes from '@components/Attachments/propTypes';
 import Button from '@components/Button';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
@@ -11,51 +9,26 @@ import useLocalize from '@hooks/useLocalize';
 import ReportAttachmentsContext from '@pages/home/report/ReportAttachmentsContext';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
+import {Attachment} from './types';
 
-const propTypes = {
+type CarouselItemProps = {
     /** Attachment required information such as the source and file name */
-    item: PropTypes.shape({
-        /** Report action ID of the attachment */
-        reportActionID: PropTypes.string,
-
-        /** Whether source URL requires authentication */
-        isAuthTokenRequired: PropTypes.bool,
-
-        /** URL to full-sized attachment or SVG function */
-        source: AttachmentsPropTypes.attachmentSourcePropType.isRequired,
-
-        /** Additional information about the attachment file */
-        file: PropTypes.shape({
-            /** File name of the attachment */
-            name: PropTypes.string,
-        }),
-
-        /** Whether the attachment has been flagged */
-        hasBeenFlagged: PropTypes.bool,
-
-        /** The id of the transaction related to the attachment */
-        transactionID: PropTypes.string,
-    }).isRequired,
+    item: Attachment;
 
     /** Whether the attachment is currently being viewed in the carousel */
-    isFocused: PropTypes.bool.isRequired,
+    isFocused: boolean;
 
     /** onPress callback */
-    onPress: PropTypes.func,
-};
-
-const defaultProps = {
-    onPress: undefined,
+    onPress?: () => void;
 };
 
-function CarouselItem({item, isFocused, onPress}) {
+function CarouselItem({item, isFocused, onPress = undefined}: CarouselItemProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {isAttachmentHidden} = useContext(ReportAttachmentsContext);
-    // eslint-disable-next-line es/no-nullish-coalescing-operators
-    const [isHidden, setIsHidden] = useState(() => isAttachmentHidden(item.reportActionID) ?? item.hasBeenFlagged);
+    const reportAttachmentsContext = useContext(ReportAttachmentsContext);
+    const [isHidden, setIsHidden] = useState<boolean>(() => !!reportAttachmentsContext?.isAttachmentHidden(item.reportActionID ?? '') ?? item.hasBeenFlagged);
 
-    const renderButton = (style) => (
+    const renderButton = (style: StyleProp<ViewStyle>) => (
         <Button
             small
             style={style}
@@ -81,7 +54,7 @@ function CarouselItem({item, isFocused, onPress}) {
             <PressableWithoutFeedback
                 style={[styles.attachmentRevealButtonContainer]}
                 onPress={onPress}
-                role={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
+                role={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON as Role}
                 accessibilityLabel={item.file.name || translate('attachmentView.unknownFilename')}
             >
                 {children}
@@ -114,8 +87,7 @@ function CarouselItem({item, isFocused, onPress}) {
     );
 }
 
-CarouselItem.propTypes = propTypes;
-CarouselItem.defaultProps = defaultProps;
 CarouselItem.displayName = 'CarouselItem';
 
 export default CarouselItem;
+export type {Attachment};
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPage.js b/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPage.tsx
similarity index 82%
rename from src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPage.js
rename to src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPage.tsx
index 7a083d71b591..573a5c835495 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPage.js
+++ b/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPage.tsx
@@ -1,14 +1,14 @@
-/* eslint-disable es/no-optional-chaining */
-import PropTypes from 'prop-types';
 import React, {useContext, useEffect, useRef, useState} from 'react';
 import {ActivityIndicator, PixelRatio, StyleSheet, View} from 'react-native';
-import * as AttachmentsPropTypes from '@components/Attachments/propTypes';
 import Image from '@components/Image';
 import AttachmentCarouselPagerContext from './AttachmentCarouselPagerContext';
 import ImageTransformer from './ImageTransformer';
 import ImageWrapper from './ImageWrapper';
 
-function getCanvasFitScale({canvasWidth, canvasHeight, imageWidth, imageHeight}) {
+type CanvasDimensions = {canvasWidth: number; canvasHeight: number; imageWidth: number; imageHeight: number};
+type OnLoadEvent = {nativeEvent: {width: number; height: number}};
+
+function getCanvasFitScale({canvasWidth, canvasHeight, imageWidth, imageHeight}: CanvasDimensions) {
     const imageScaleX = canvasWidth / imageWidth;
     const imageScaleY = canvasHeight / imageHeight;
 
@@ -17,22 +17,14 @@ function getCanvasFitScale({canvasWidth, canvasHeight, imageWidth, imageHeight})
 
 const cachedDimensions = new Map();
 
-const pagePropTypes = {
-    /** Whether source url requires authentication */
-    isAuthTokenRequired: PropTypes.bool,
-
-    /** URL to full-sized attachment, SVG function, or numeric static image on native platforms */
-    source: AttachmentsPropTypes.attachmentSourcePropType.isRequired,
-
-    isActive: PropTypes.bool.isRequired,
-};
-
-const defaultProps = {
-    isAuthTokenRequired: false,
+type AttachmentCarouselPageProps = {
+    isAuthTokenRequired?: boolean;
+    source: string;
+    isActive: boolean;
 };
 
-function AttachmentCarouselPage({source, isAuthTokenRequired, isActive: initialIsActive}) {
-    const {canvasWidth, canvasHeight} = useContext(AttachmentCarouselPagerContext);
+function AttachmentCarouselPage({source, isAuthTokenRequired = false, isActive: initialIsActive}: AttachmentCarouselPageProps) {
+    const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);
 
     const dimensions = cachedDimensions.get(source);
 
@@ -49,7 +41,7 @@ function AttachmentCarouselPage({source, isAuthTokenRequired, isActive: initialI
     }, [initialIsActive]);
 
     const [initialActivePageLoad, setInitialActivePageLoad] = useState(isActive);
-    const isImageLoaded = useRef(null);
+    const isImageLoaded = useRef<boolean | null>(null);
     const [isImageLoading, setIsImageLoading] = useState(false);
     const [isFallbackLoading, setIsFallbackLoading] = useState(false);
     const [showFallback, setShowFallback] = useState(true);
@@ -88,13 +80,20 @@ function AttachmentCarouselPage({source, isAuthTokenRequired, isActive: initialI
                             onLoadEnd={() => {
                                 setShowFallback(false);
                                 setIsImageLoading(false);
-                                isImageLoaded.current = true;
+                                if (isImageLoaded.current) {
+                                    isImageLoaded.current = true;
+                                }
                             }}
-                            onLoad={(evt) => {
+                            onLoad={(evt: OnLoadEvent) => {
                                 const imageWidth = (evt.nativeEvent?.width || 0) / PixelRatio.get();
                                 const imageHeight = (evt.nativeEvent?.height || 0) / PixelRatio.get();
 
-                                const {imageScaleX, imageScaleY} = getCanvasFitScale({canvasWidth, canvasHeight, imageWidth, imageHeight});
+                                const {imageScaleX, imageScaleY} = getCanvasFitScale({
+                                    canvasWidth: attachmentCarouselPagerContext?.canvasWidth ?? 0,
+                                    canvasHeight: attachmentCarouselPagerContext?.canvasHeight ?? 0,
+                                    imageWidth,
+                                    imageHeight,
+                                });
 
                                 // Don't update the dimensions if they are already set
                                 if (
@@ -145,11 +144,16 @@ function AttachmentCarouselPage({source, isAuthTokenRequired, isActive: initialI
                             }
                             setIsFallbackLoading(false);
                         }}
-                        onLoad={(evt) => {
+                        onLoad={(evt: OnLoadEvent) => {
                             const imageWidth = evt.nativeEvent.width;
                             const imageHeight = evt.nativeEvent.height;
 
-                            const {imageScaleX, imageScaleY} = getCanvasFitScale({canvasWidth, canvasHeight, imageWidth, imageHeight});
+                            const {imageScaleX, imageScaleY} = getCanvasFitScale({
+                                canvasWidth: attachmentCarouselPagerContext?.canvasWidth ?? 0,
+                                canvasHeight: attachmentCarouselPagerContext?.canvasHeight ?? 0,
+                                imageWidth,
+                                imageHeight,
+                            });
                             const minImageScale = Math.min(imageScaleX, imageScaleY);
 
                             const scaledImageWidth = imageWidth * minImageScale;
@@ -182,8 +186,6 @@ function AttachmentCarouselPage({source, isAuthTokenRequired, isActive: initialI
     );
 }
 
-AttachmentCarouselPage.propTypes = pagePropTypes;
-AttachmentCarouselPage.defaultProps = defaultProps;
 AttachmentCarouselPage.displayName = 'AttachmentCarouselPage';
 
 export default AttachmentCarouselPage;
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.js b/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.js
deleted file mode 100644
index 39535288e22d..000000000000
--- a/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import {createContext} from 'react';
-
-const AttachmentCarouselContextPager = createContext(null);
-
-export default AttachmentCarouselContextPager;
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.tsx b/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.tsx
new file mode 100644
index 000000000000..87cc21f4718d
--- /dev/null
+++ b/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.tsx
@@ -0,0 +1,21 @@
+import {createContext, RefObject} from 'react';
+import PagerView from 'react-native-pager-view';
+import {SharedValue} from 'react-native-reanimated';
+
+type AttachmentCarouselPagerContextValue = {
+    canvasWidth: number;
+    canvasHeight: number;
+    isScrolling: SharedValue<boolean>;
+    pagerRef: RefObject<PagerView>;
+    shouldPagerScroll: SharedValue<boolean>;
+    onPinchGestureChange: (value?: boolean) => void;
+    onTap: () => void;
+    onSwipe: (value?: number) => void;
+    onSwipeSuccess: () => void;
+    onSwipeDown: () => void;
+};
+
+const AttachmentCarouselContextPager = createContext<AttachmentCarouselPagerContextValue | null>(null);
+
+export default AttachmentCarouselContextPager;
+export type {AttachmentCarouselPagerContextValue};
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.js b/src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.tsx
similarity index 84%
rename from src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.js
rename to src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.tsx
index cc1e20cb44e0..5c2faeb453d0 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.js
+++ b/src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.tsx
@@ -1,6 +1,4 @@
-/* eslint-disable es/no-optional-chaining */
-import PropTypes from 'prop-types';
-import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
+import React, {ComponentType, RefObject, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {Gesture, GestureDetector} from 'react-native-gesture-handler';
 import Animated, {
@@ -16,6 +14,7 @@ import Animated, {
     withSpring,
 } from 'react-native-reanimated';
 import useThemeStyles from '@styles/useThemeStyles';
+import ChildrenProps from '@src/types/utils/ChildrenProps';
 import AttachmentCarouselPagerContext from './AttachmentCarouselPagerContext';
 import ImageWrapper from './ImageWrapper';
 
@@ -33,35 +32,26 @@ const SPRING_CONFIG = {
     damping: 500,
 };
 
-function clamp(value, lowerBound, upperBound) {
+function clamp(value: number, lowerBound: number, upperBound: number) {
     'worklet';
 
     return Math.min(Math.max(lowerBound, value), upperBound);
 }
 
-const imageTransformerPropTypes = {
-    imageWidth: PropTypes.number,
-    imageHeight: PropTypes.number,
-    imageScaleX: PropTypes.number,
-    imageScaleY: PropTypes.number,
-    scaledImageWidth: PropTypes.number,
-    scaledImageHeight: PropTypes.number,
-    isActive: PropTypes.bool.isRequired,
-    children: PropTypes.node.isRequired,
+type ImageTransformerProps = ChildrenProps & {
+    imageWidth?: number;
+    imageHeight?: number;
+    imageScaleX?: number;
+    imageScaleY?: number;
+    scaledImageWidth?: number;
+    scaledImageHeight?: number;
+    minImageScale?: number;
+    isActive: boolean;
 };
 
-const imageTransformerDefaultProps = {
-    imageWidth: 0,
-    imageHeight: 0,
-    imageScaleX: 1,
-    imageScaleY: 1,
-    scaledImageWidth: 0,
-    scaledImageHeight: 0,
-};
-
-function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, scaledImageWidth, scaledImageHeight, isActive, children}) {
+function ImageTransformer({imageWidth = 0, imageHeight = 0, imageScaleX = 1, imageScaleY = 1, scaledImageWidth = 0, scaledImageHeight = 0, isActive, children}: ImageTransformerProps) {
     const styles = useThemeStyles();
-    const {canvasWidth, canvasHeight, onTap, onSwipe, onSwipeSuccess, pagerRef, shouldPagerScroll, isScrolling, onPinchGestureChange} = useContext(AttachmentCarouselPagerContext);
+    const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);
 
     const minImageScale = useMemo(() => Math.min(imageScaleX, imageScaleY), [imageScaleX, imageScaleY]);
     const maxImageScale = useMemo(() => Math.max(imageScaleX, imageScaleY), [imageScaleX, imageScaleY]);
@@ -105,7 +95,7 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
     const pinchScaleOffset = useSharedValue(1);
 
     // disable pan vertically when image is smaller than screen
-    const canPanVertically = useDerivedValue(() => canvasHeight < zoomScaledImageHeight.value, [canvasHeight]);
+    const canPanVertically = useDerivedValue(() => (attachmentCarouselPagerContext?.canvasHeight ?? 0) < zoomScaledImageHeight.value, [attachmentCarouselPagerContext?.canvasHeight]);
 
     // calculates bounds of the scaled image
     // can we pan left/right/up/down
@@ -113,6 +103,8 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
     const getBounds = useWorkletCallback(() => {
         let rightBoundary = 0;
         let topBoundary = 0;
+        const canvasWidth = attachmentCarouselPagerContext?.canvasWidth ?? 0;
+        const canvasHeight = attachmentCarouselPagerContext?.canvasHeight ?? 0;
 
         if (canvasWidth < zoomScaledImageWidth.value) {
             rightBoundary = Math.abs(canvasWidth - zoomScaledImageWidth.value) / 2;
@@ -142,7 +134,7 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
             canPanLeft: target.x < maxVector.x,
             canPanRight: target.x > minVector.x,
         };
-    }, [canvasWidth, canvasHeight]);
+    }, [attachmentCarouselPagerContext?.canvasWidth, attachmentCarouselPagerContext?.canvasHeight]);
 
     const afterPanGesture = useWorkletCallback(() => {
         const {target, isInBoundaryX, isInBoundaryY, minVector, maxVector} = getBounds();
@@ -205,11 +197,13 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
     });
 
     const zoomToCoordinates = useWorkletCallback(
-        (canvasFocalX, canvasFocalY) => {
+        (canvasFocalX: number, canvasFocalY: number) => {
             'worklet';
 
             stopAnimation();
 
+            const canvasWidth = attachmentCarouselPagerContext?.canvasWidth ?? 0;
+            const canvasHeight = attachmentCarouselPagerContext?.canvasHeight ?? 0;
             const canvasOffsetX = Math.max(0, (canvasWidth - scaledImageWidth) / 2);
             const canvasOffsetY = Math.max(0, (canvasHeight - scaledImageHeight) / 2);
 
@@ -262,7 +256,7 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
             zoomScale.value = withSpring(doubleTapScale, SPRING_CONFIG);
             pinchScaleOffset.value = doubleTapScale;
         },
-        [scaledImageWidth, scaledImageHeight, canvasWidth, canvasHeight],
+        [scaledImageWidth, scaledImageHeight, attachmentCarouselPagerContext?.canvasWidth, attachmentCarouselPagerContext?.canvasHeight],
     );
 
     const reset = useWorkletCallback((animated) => {
@@ -307,14 +301,14 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
             stopAnimation();
         })
         .onFinalize((evt, success) => {
-            if (!success || !onTap) {
+            if (!success || !attachmentCarouselPagerContext?.onTap) {
                 return;
             }
 
-            runOnJS(onTap)();
+            runOnJS(attachmentCarouselPagerContext?.onTap)();
         });
 
-    const previousTouch = useSharedValue(null);
+    const previousTouch = useSharedValue<{x: number; y: number} | null>(null);
 
     const panGesture = Gesture.Pan()
         .manualActivation(true)
@@ -349,7 +343,7 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
                 };
             }
         })
-        .simultaneousWithExternalGesture(pagerRef, doubleTap, singleTap)
+        .simultaneousWithExternalGesture((attachmentCarouselPagerContext?.pagerRef as unknown as RefObject<ComponentType>) ?? {current: undefined}, doubleTap, singleTap)
         .onBegin(() => {
             stopAnimation();
         })
@@ -357,7 +351,7 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
             // since we running both pinch and pan gesture handlers simultaneously
             // we need to make sure that we don't pan when we pinch and move fingers
             // since we track it as pinch focal gesture
-            if (evt.numberOfPointers > 1 || isScrolling.value) {
+            if (evt.numberOfPointers > 1 || attachmentCarouselPagerContext?.isScrolling.value) {
                 return;
             }
 
@@ -376,7 +370,7 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
         .onEnd((evt) => {
             previousTouch.value = null;
 
-            if (isScrolling.value) {
+            if (attachmentCarouselPagerContext?.isScrolling.value) {
                 return;
             }
 
@@ -390,7 +384,7 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
                 const rightDirection = (evt.translationY > 0 && evt.velocityY > 0) || (evt.translationY < 0 && evt.velocityY < 0);
 
                 if (enoughVelocity && rightDirection) {
-                    const maybeInvert = (v) => {
+                    const maybeInvert = (v: number) => {
                         const invert = evt.velocityY < 0;
                         return invert ? -v : v;
                     };
@@ -407,7 +401,7 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
                             velocity: Math.abs(evt.velocityY) < 1200 ? maybeInvert(1200) : evt.velocityY,
                         },
                         () => {
-                            runOnJS(onSwipeSuccess)();
+                            runOnJS(attachmentCarouselPagerContext?.onSwipeSuccess ?? (() => {}))();
                         },
                     );
                     return;
@@ -422,11 +416,11 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
         .withRef(panGestureRef);
 
     const getAdjustedFocal = useWorkletCallback(
-        (focalX, focalY) => ({
-            x: focalX - (canvasWidth / 2 + offsetX.value),
-            y: focalY - (canvasHeight / 2 + offsetY.value),
+        (focalX: number, focalY: number) => ({
+            x: focalX - ((attachmentCarouselPagerContext?.canvasWidth ?? 0) / 2 + offsetX.value),
+            y: focalY - ((attachmentCarouselPagerContext?.canvasHeight ?? 0) / 2 + offsetY.value),
         }),
-        [canvasWidth, canvasHeight],
+        [attachmentCarouselPagerContext?.canvasWidth, attachmentCarouselPagerContext?.canvasHeight],
     );
 
     // used to store event scale value when we limit scale
@@ -435,7 +429,7 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
     const pinchGesture = Gesture.Pinch()
         .onTouchesDown((evt, state) => {
             // we don't want to activate pinch gesture when we are scrolling pager
-            if (!isScrolling.value) {
+            if (!attachmentCarouselPagerContext?.isScrolling.value) {
                 return;
             }
 
@@ -502,19 +496,19 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
         ([zoom, running]) => {
             const newIsPinchGestureInUse = zoom !== 1 || running;
             if (isPinchGestureInUse !== newIsPinchGestureInUse) {
-                runOnJS(setIsPinchGestureInUse)(newIsPinchGestureInUse);
+                runOnJS(setIsPinchGestureInUse)(!!newIsPinchGestureInUse);
             }
         },
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => onPinchGestureChange(isPinchGestureInUse), [isPinchGestureInUse]);
+    useEffect(() => attachmentCarouselPagerContext?.onPinchGestureChange(isPinchGestureInUse), [isPinchGestureInUse]);
 
     const animatedStyles = useAnimatedStyle(() => {
         const x = pinchTranslateX.value + pinchBounceTranslateX.value + translateX.value + offsetX.value;
         const y = pinchTranslateY.value + pinchBounceTranslateY.value + translateY.value + offsetY.value;
 
         if (isSwiping.value) {
-            onSwipe(y);
+            attachmentCarouselPagerContext?.onSwipe(y);
         }
 
         return {
@@ -534,7 +528,10 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
     useAnimatedReaction(
         () => zoomScale.value,
         () => {
-            shouldPagerScroll.value = zoomScale.value === 1;
+            if (!attachmentCarouselPagerContext) {
+                return;
+            }
+            attachmentCarouselPagerContext.shouldPagerScroll.value = zoomScale.value === 1;
         },
     );
 
@@ -556,7 +553,7 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
             style={[
                 styles.flex1,
                 {
-                    width: canvasWidth,
+                    width: attachmentCarouselPagerContext?.canvasWidth,
                 },
             ]}
         >
@@ -573,8 +570,7 @@ function ImageTransformer({imageWidth, imageHeight, imageScaleX, imageScaleY, sc
         </View>
     );
 }
-ImageTransformer.propTypes = imageTransformerPropTypes;
-ImageTransformer.defaultProps = imageTransformerDefaultProps;
+
 ImageTransformer.displayName = 'ImageTransformer';
 
 export default ImageTransformer;
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/ImageWrapper.js b/src/components/Attachments/AttachmentCarousel/Pager/ImageWrapper.tsx
similarity index 72%
rename from src/components/Attachments/AttachmentCarousel/Pager/ImageWrapper.js
rename to src/components/Attachments/AttachmentCarousel/Pager/ImageWrapper.tsx
index b0a8b1f0d083..055b44d1c5c4 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/ImageWrapper.js
+++ b/src/components/Attachments/AttachmentCarousel/Pager/ImageWrapper.tsx
@@ -1,14 +1,10 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {StyleSheet} from 'react-native';
 import Animated from 'react-native-reanimated';
 import useThemeStyles from '@styles/useThemeStyles';
+import ChildrenProps from '@src/types/utils/ChildrenProps';
 
-const imageWrapperPropTypes = {
-    children: PropTypes.node.isRequired,
-};
-
-function ImageWrapper({children}) {
+function ImageWrapper({children}: ChildrenProps) {
     const styles = useThemeStyles();
     return (
         <Animated.View
@@ -20,7 +16,6 @@ function ImageWrapper({children}) {
     );
 }
 
-ImageWrapper.propTypes = imageWrapperPropTypes;
 ImageWrapper.displayName = 'ImageWrapper';
 
 export default ImageWrapper;
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/index.js b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
similarity index 57%
rename from src/components/Attachments/AttachmentCarousel/Pager/index.js
rename to src/components/Attachments/AttachmentCarousel/Pager/index.tsx
index 6913941ed726..199462628792 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/index.js
+++ b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
@@ -1,26 +1,31 @@
-import PropTypes from 'prop-types';
-import React, {useImperativeHandle, useMemo, useRef, useState} from 'react';
+import React, {ComponentType, ForwardedRef, ReactNode, RefObject, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {createNativeWrapper, GestureHandlerRootView} from 'react-native-gesture-handler';
-import PagerView from 'react-native-pager-view';
+import PagerView, {PagerViewOnPageScrollEventData} from 'react-native-pager-view';
+import {OnPageSelectedEventData} from 'react-native-pager-view/lib/typescript/PagerViewNativeComponent';
 import Animated, {runOnJS, useAnimatedProps, useAnimatedReaction, useEvent, useHandler, useSharedValue} from 'react-native-reanimated';
-import _ from 'underscore';
-import refPropTypes from '@components/refPropTypes';
+import {DependencyList} from 'react-native-reanimated/lib/typescript/reanimated2/hook';
+import {DirectEventHandler} from 'react-native/Libraries/Types/CodegenTypes';
+import {Attachment} from '@components/Attachments/AttachmentCarousel/types';
 import useThemeStyles from '@styles/useThemeStyles';
-import AttachmentCarouselPagerContext from './AttachmentCarouselPagerContext';
+import AttachmentCarouselPagerContext, {AttachmentCarouselPagerContextValue} from './AttachmentCarouselPagerContext';
+
+type PagerScrollEvent = PagerViewOnPageScrollEventData & {
+    eventName?: string;
+};
 
 const AnimatedPagerView = Animated.createAnimatedComponent(createNativeWrapper(PagerView));
 
-function usePageScrollHandler(handlers, dependencies) {
+function usePageScrollHandler<TContext extends Record<string, unknown>>(handlers: {onPageScroll: (event: PagerScrollEvent, context: TContext) => void}, dependencies: DependencyList) {
     const {context, doDependenciesDiffer} = useHandler(handlers, dependencies);
     const subscribeForEvents = ['onPageScroll'];
 
-    return useEvent(
+    return useEvent<PagerScrollEvent>(
         (event) => {
             'worklet';
 
             const {onPageScroll} = handlers;
-            if (onPageScroll && event.eventName.endsWith('onPageScroll')) {
+            if (onPageScroll && event.eventName?.endsWith('onPageScroll')) {
                 onPageScroll(event, context);
             }
         },
@@ -35,54 +40,39 @@ const noopWorklet = () => {
     // noop
 };
 
-const pagerPropTypes = {
-    items: PropTypes.arrayOf(
-        PropTypes.shape({
-            key: PropTypes.string,
-            url: PropTypes.string,
-        }),
-    ).isRequired,
-    renderItem: PropTypes.func.isRequired,
-    initialIndex: PropTypes.number,
-    onPageSelected: PropTypes.func,
-    onTap: PropTypes.func,
-    onSwipe: PropTypes.func,
-    onSwipeSuccess: PropTypes.func,
-    onSwipeDown: PropTypes.func,
-    onPinchGestureChange: PropTypes.func,
-    forwardedRef: refPropTypes,
-    containerWidth: PropTypes.number.isRequired,
-    containerHeight: PropTypes.number.isRequired,
-};
-
-const pagerDefaultProps = {
-    initialIndex: 0,
-    onPageSelected: () => {},
-    onTap: () => {},
-    onSwipe: noopWorklet,
-    onSwipeSuccess: () => {},
-    onSwipeDown: () => {},
-    onPinchGestureChange: () => {},
-    forwardedRef: null,
+type PagerProps = {
+    items: Attachment[];
+    renderItem: (props: {item: Attachment; isActive: boolean; index: number}) => ReactNode;
+    initialIndex?: number;
+    onPageSelected: DirectEventHandler<OnPageSelectedEventData>;
+    onTap?: () => void;
+    onSwipe?: () => void;
+    onSwipeSuccess?: () => void;
+    onSwipeDown?: () => void;
+    onPinchGestureChange?: (value?: boolean) => void;
+    containerWidth: number;
+    containerHeight: number;
 };
 
-function AttachmentCarouselPager({
-    items,
-    renderItem,
-    initialIndex,
-    onPageSelected,
-    onTap,
-    onSwipe = noopWorklet,
-    onSwipeSuccess,
-    onSwipeDown,
-    onPinchGestureChange,
-    forwardedRef,
-    containerWidth,
-    containerHeight,
-}) {
+function AttachmentCarouselPager(
+    {
+        items,
+        renderItem,
+        initialIndex = 0,
+        onPageSelected = () => {},
+        onTap = () => {},
+        onSwipe = noopWorklet,
+        onSwipeSuccess = () => {},
+        onSwipeDown = () => {},
+        onPinchGestureChange = () => {},
+        containerWidth,
+        containerHeight,
+    }: PagerProps,
+    ref: ForwardedRef<PagerView>,
+) {
     const styles = useThemeStyles();
     const shouldPagerScroll = useSharedValue(true);
-    const pagerRef = useRef(null);
+    const pagerRef = useRef<PagerView>(null);
 
     const isScrolling = useSharedValue(false);
     const activeIndex = useSharedValue(initialIndex);
@@ -115,10 +105,11 @@ function AttachmentCarouselPager({
     );
 
     useImperativeHandle(
-        forwardedRef,
-        () => ({
-            setPage: (...props) => pagerRef.current.setPage(...props),
-        }),
+        ref,
+        () =>
+            ({
+                setPage: (...props) => pagerRef?.current?.setPage(...props),
+            } as PagerView),
         [],
     );
 
@@ -126,7 +117,7 @@ function AttachmentCarouselPager({
         scrollEnabled: shouldPagerScroll.value,
     }));
 
-    const contextValue = useMemo(
+    const contextValue: AttachmentCarouselPagerContextValue = useMemo(
         () => ({
             canvasWidth: containerWidth,
             canvasHeight: containerHeight,
@@ -151,13 +142,13 @@ function AttachmentCarouselPager({
                     onPageScroll={pageScrollHandler}
                     animatedProps={animatedProps}
                     onPageSelected={onPageSelected}
-                    ref={pagerRef}
+                    ref={pagerRef as unknown as RefObject<ComponentType<PagerView>>}
                     style={styles.flex1}
                     initialPage={initialIndex}
                 >
-                    {_.map(items, (item, index) => (
+                    {items.map((item, index) => (
                         <View
-                            key={item.source}
+                            key={String(item.source)}
                             style={styles.flex1}
                         >
                             {renderItem({item, index, isActive: index === activePage})}
@@ -169,18 +160,6 @@ function AttachmentCarouselPager({
     );
 }
 
-AttachmentCarouselPager.propTypes = pagerPropTypes;
-AttachmentCarouselPager.defaultProps = pagerDefaultProps;
 AttachmentCarouselPager.displayName = 'AttachmentCarouselPager';
 
-const AttachmentCarouselPagerWithRef = React.forwardRef((props, ref) => (
-    <AttachmentCarouselPager
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        forwardedRef={ref}
-    />
-));
-
-AttachmentCarouselPagerWithRef.displayName = 'AttachmentCarouselPagerWithRef';
-
-export default AttachmentCarouselPagerWithRef;
+export default React.forwardRef(AttachmentCarouselPager);
diff --git a/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js b/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js
deleted file mode 100644
index 7543e8d9c099..000000000000
--- a/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import PropTypes from 'prop-types';
-import transactionPropTypes from '@components/transactionPropTypes';
-import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
-import reportPropTypes from '@pages/reportPropTypes';
-
-const propTypes = {
-    /** source is used to determine the starting index in the array of attachments */
-    source: PropTypes.string,
-
-    /** Callback to update the parent modal's state with a source and name from the attachments array */
-    onNavigate: PropTypes.func,
-
-    /** Callback to close carousel when user swipes down (on native) */
-    onClose: PropTypes.func,
-
-    /** Function to change the download button Visibility */
-    setDownloadButtonVisibility: PropTypes.func,
-
-    /** Object of report actions for this report */
-    reportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)),
-
-    /** The report currently being looked at */
-    report: reportPropTypes.isRequired,
-
-    /** The parent of `report` */
-    parentReport: reportPropTypes,
-
-    /** The report actions of the parent report */
-    parentReportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)),
-
-    /** The transaction attached to the parent report action */
-    transaction: transactionPropTypes,
-};
-
-const defaultProps = {
-    source: '',
-    reportActions: {},
-    parentReport: {},
-    parentReportActions: {},
-    transaction: {},
-    onNavigate: () => {},
-    onClose: () => {},
-    setDownloadButtonVisibility: () => {},
-};
-
-export {propTypes, defaultProps};
diff --git a/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js b/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.ts
similarity index 66%
rename from src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js
rename to src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.ts
index 0f1fa15c99ca..b9e23e182a73 100644
--- a/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js
+++ b/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.ts
@@ -1,22 +1,16 @@
 import {Parser as HtmlParser} from 'htmlparser2';
-import lodashGet from 'lodash/get';
-import _ from 'underscore';
+import {OnyxEntry} from 'react-native-onyx';
 import * as ReceiptUtils from '@libs/ReceiptUtils';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 import CONST from '@src/CONST';
+import {ReportAction, ReportActions, Transaction} from '@src/types/onyx';
+import {Attachment} from './CarouselItem';
 
-/**
- * Constructs the initial component state from report actions
- * @param {Object} parentReportAction
- * @param {Object} reportActions
- * @param {Object} transaction
- * @returns {Array}
- */
-function extractAttachmentsFromReport(parentReportAction, reportActions, transaction) {
-    const actions = [parentReportAction, ...ReportActionsUtils.getSortedReportActions(_.values(reportActions))];
-    const attachments = [];
+function extractAttachmentsFromReport(parentReportAction: OnyxEntry<ReportAction>, reportActions: OnyxEntry<ReportActions>, transaction: OnyxEntry<Transaction>) {
+    const actions = [parentReportAction, ...ReportActionsUtils.getSortedReportActions(Object.values(reportActions ?? {}))];
+    const attachments: Attachment[] = [];
 
     const htmlParser = new HtmlParser({
         onopentag: (name, attribs) => {
@@ -39,26 +33,26 @@ function extractAttachmentsFromReport(parentReportAction, reportActions, transac
         },
     });
 
-    _.forEach(actions, (action, key) => {
+    actions.forEach((action, key) => {
         if (!ReportActionsUtils.shouldReportActionBeVisible(action, key)) {
             return;
         }
 
         // We're handling receipts differently here because receipt images are not
         // part of the report action message, the images are constructed client-side
-        if (ReportActionsUtils.isMoneyRequestAction(action)) {
-            const transactionID = lodashGet(action, ['originalMessage', 'IOUTransactionID']);
+        if (ReportActionsUtils.isMoneyRequestAction(action) && action?.actionName === CONST.REPORT.ACTIONS.TYPE.IOU) {
+            const transactionID = action?.originalMessage?.IOUTransactionID;
             if (!transactionID) {
                 return;
             }
 
-            if (TransactionUtils.hasReceipt(transaction)) {
+            if (TransactionUtils.hasReceipt(transaction) && transaction) {
                 const {image} = ReceiptUtils.getThumbnailAndImageURIs(transaction);
-                const isLocalFile = typeof image === 'string' && _.some(CONST.ATTACHMENT_LOCAL_URL_PREFIX, (prefix) => image.startsWith(prefix));
+                const isLocalFile = typeof image === 'string' && CONST.ATTACHMENT_LOCAL_URL_PREFIX.some((prefix) => image.startsWith(prefix));
                 attachments.unshift({
-                    source: tryResolveUrlFromApiRoot(image),
+                    source: tryResolveUrlFromApiRoot(image as string),
                     isAuthTokenRequired: !isLocalFile,
-                    file: {name: transaction.filename},
+                    file: {name: transaction.filename ?? ''},
                     isReceipt: true,
                     transactionID,
                 });
@@ -66,9 +60,9 @@ function extractAttachmentsFromReport(parentReportAction, reportActions, transac
             }
         }
 
-        const decision = _.get(action, ['message', 0, 'moderationDecision', 'decision'], '');
+        const decision = action?.message?.[0].moderationDecision?.decision ?? '';
         const hasBeenFlagged = decision === CONST.MODERATION.MODERATOR_DECISION_PENDING_HIDE || decision === CONST.MODERATION.MODERATOR_DECISION_HIDDEN;
-        const html = _.get(action, ['message', 0, 'html'], '').replace('/>', `data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}"/>`);
+        const html = (action?.message?.[0].html ?? '').replace('/>', `data-flagged="${hasBeenFlagged}" data-id="${action?.reportActionID}"/>`);
         htmlParser.write(html);
     });
     htmlParser.end();
diff --git a/src/components/Attachments/AttachmentCarousel/index.native.js b/src/components/Attachments/AttachmentCarousel/index.native.tsx
similarity index 76%
rename from src/components/Attachments/AttachmentCarousel/index.native.js
rename to src/components/Attachments/AttachmentCarousel/index.native.tsx
index 6bf4e63c01e7..b5dce94a49b9 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.js
+++ b/src/components/Attachments/AttachmentCarousel/index.native.tsx
@@ -1,8 +1,7 @@
-import lodashGet from 'lodash/get';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {Keyboard, PixelRatio, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
+import PagerView from 'react-native-pager-view';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import * as Illustrations from '@components/Icon/Illustrations';
 import withLocalize from '@components/withLocalize';
@@ -10,30 +9,32 @@ import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import {defaultProps, propTypes} from './attachmentCarouselPropTypes';
 import CarouselButtons from './CarouselButtons';
-import CarouselItem from './CarouselItem';
+import CarouselItem, {Attachment} from './CarouselItem';
 import extractAttachmentsFromReport from './extractAttachmentsFromReport';
 import AttachmentCarouselPager from './Pager';
+import AttachmentCarouselProps, {AttachmentCarouselOnyxProps, TransactionAttachmentCarouselOnyxProps} from './types';
 import useCarouselArrows from './useCarouselArrows';
 
-function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, translate, transaction, onClose}) {
+function AttachmentCarousel(props: AttachmentCarouselProps) {
+    const {report, reportActions = {}, parentReportActions = {}, source = '', onNavigate = () => {}, setDownloadButtonVisibility = () => {}, translate, transaction, onClose} = props;
     const styles = useThemeStyles();
-    const pagerRef = useRef(null);
+    const pagerRef = useRef<PagerView>(null);
 
     const [containerDimensions, setContainerDimensions] = useState({width: 0, height: 0});
     const [page, setPage] = useState(0);
-    const [attachments, setAttachments] = useState([]);
+    const [attachments, setAttachments] = useState<Attachment[]>([]);
     const [activeSource, setActiveSource] = useState(source);
     const [isPinchGestureRunning, setIsPinchGestureRunning] = useState(true);
     const [shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows] = useCarouselArrows();
     const [isReceipt, setIsReceipt] = useState(false);
 
     const compareImage = useCallback(
-        (attachment) => {
+        (attachment: Attachment) => {
             if (attachment.isReceipt && isReceipt) {
-                return attachment.transactionID === transaction.transactionID;
+                return attachment.transactionID === transaction?.transactionID;
             }
             return attachment.source === source;
         },
@@ -41,14 +42,14 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
     );
 
     useEffect(() => {
-        const parentReportAction = parentReportActions[report.parentReportActionID];
+        const parentReportAction = parentReportActions?.[report.parentReportActionID ?? ''] ?? null;
         const attachmentsFromReport = extractAttachmentsFromReport(parentReportAction, reportActions, transaction);
 
-        const initialPage = _.findIndex(attachmentsFromReport, compareImage);
+        const initialPage = attachmentsFromReport.findIndex(compareImage);
 
         // Dismiss the modal when deleting an attachment during its display in preview.
-        if (initialPage === -1 && _.find(attachments, compareImage)) {
-            Navigation.dismissModal();
+        if (initialPage === -1 && attachments.find(compareImage)) {
+            Navigation.dismissModal(undefined);
         } else {
             setPage(initialPage);
             setAttachments(attachmentsFromReport);
@@ -57,7 +58,7 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
             setDownloadButtonVisibility(initialPage !== -1);
 
             // Update the parent modal's state with the source and name from the mapped attachments
-            if (!_.isUndefined(attachmentsFromReport[initialPage])) {
+            if (attachmentsFromReport[initialPage]) {
                 onNavigate(attachmentsFromReport[initialPage]);
             }
         }
@@ -66,11 +67,10 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
 
     /**
      * Updates the page state when the user navigates between attachments
-     * @param {Object} item
-     * @param {number} index
+
      */
     const updatePage = useCallback(
-        (newPageIndex) => {
+        (newPageIndex: number) => {
             Keyboard.dismiss();
             setShouldShowArrows(true);
 
@@ -87,13 +87,12 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
 
     /**
      * Increments or decrements the index to get another selected item
-     * @param {Number} deltaSlide
      */
     const cycleThroughAttachments = useCallback(
-        (deltaSlide) => {
+        (deltaSlide: number) => {
             const nextPageIndex = page + deltaSlide;
             updatePage(nextPageIndex);
-            pagerRef.current.setPage(nextPageIndex);
+            pagerRef?.current?.setPage(nextPageIndex);
 
             autoHideArrows();
         },
@@ -102,14 +101,12 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
 
     /**
      * Defines how a single attachment should be rendered
-     * @param {{ reportActionID: String, isAuthTokenRequired: Boolean, source: String, file: { name: String }, hasBeenFlagged: Boolean }} item
-     * @returns {JSX.Element}
      */
     const renderItem = useCallback(
-        ({item, isActive}) => (
+        (renderItemProps: {item: Attachment; isActive: boolean}) => (
             <CarouselItem
-                item={item}
-                isFocused={isActive && activeSource === item.source}
+                item={renderItemProps.item}
+                isFocused={renderItemProps.isActive && activeSource === renderItemProps.item.source}
                 onPress={() => setShouldShowArrows(!shouldShowArrows)}
             />
         ),
@@ -150,8 +147,8 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
                             renderItem={renderItem}
                             initialIndex={page}
                             onPageSelected={({nativeEvent: {position: newPage}}) => updatePage(newPage)}
-                            onPinchGestureChange={(newIsPinchGestureRunning) => {
-                                setIsPinchGestureRunning(newIsPinchGestureRunning);
+                            onPinchGestureChange={(newIsPinchGestureRunning?: boolean) => {
+                                setIsPinchGestureRunning(newIsPinchGestureRunning ?? false);
                                 if (!newIsPinchGestureRunning && !shouldShowArrows) {
                                     setShouldShowArrows(true);
                                 }
@@ -167,13 +164,12 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
         </View>
     );
 }
-AttachmentCarousel.propTypes = propTypes;
-AttachmentCarousel.defaultProps = defaultProps;
+
 AttachmentCarousel.displayName = 'AttachmentCarousel';
 
 export default compose(
     // eslint-disable-next-line rulesdir/no-multiple-onyx-in-file
-    withOnyx({
+    withOnyx<AttachmentCarouselProps, AttachmentCarouselOnyxProps>({
         reportActions: {
             key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`,
             canEvict: false,
@@ -186,14 +182,15 @@ export default compose(
             canEvict: false,
         },
     }),
+    withLocalize,
     // eslint-disable-next-line rulesdir/no-multiple-onyx-in-file
-    withOnyx({
+    withOnyx<AttachmentCarouselProps, TransactionAttachmentCarouselOnyxProps>({
         transaction: {
             key: ({report, parentReportActions}) => {
-                const parentReportAction = lodashGet(parentReportActions, [report.parentReportActionID]);
-                return `${ONYXKEYS.COLLECTION.TRANSACTION}${lodashGet(parentReportAction, 'originalMessage.IOUTransactionID', 0)}`;
+                const parentReportAction = parentReportActions?.[report?.parentReportActionID ?? ''];
+                const originalMessage = parentReportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.IOU ? parentReportAction?.originalMessage : null;
+                return `${ONYXKEYS.COLLECTION.TRANSACTION}${originalMessage?.IOUTransactionID ?? 0}`;
             },
         },
     }),
-    withLocalize,
 )(AttachmentCarousel);
diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.tsx
similarity index 77%
rename from src/components/Attachments/AttachmentCarousel/index.js
rename to src/components/Attachments/AttachmentCarousel/index.tsx
index 141e619e489e..35e1c339d6e3 100644
--- a/src/components/Attachments/AttachmentCarousel/index.js
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -1,12 +1,11 @@
-import lodashGet from 'lodash/get';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {FlatList, Keyboard, PixelRatio, View} from 'react-native';
+import {FlatList, Keyboard, PixelRatio, View, ViewToken} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import * as Illustrations from '@components/Icon/Illustrations';
 import withLocalize from '@components/withLocalize';
 import withWindowDimensions from '@components/withWindowDimensions';
+import {WindowDimensionsProps} from '@components/withWindowDimensions/types';
 import compose from '@libs/compose';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import Navigation from '@libs/Navigation/Navigation';
@@ -15,11 +14,11 @@ import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import AttachmentCarouselCellRenderer from './AttachmentCarouselCellRenderer';
-import {defaultProps, propTypes} from './attachmentCarouselPropTypes';
 import CarouselActions from './CarouselActions';
 import CarouselButtons from './CarouselButtons';
 import CarouselItem from './CarouselItem';
 import extractAttachmentsFromReport from './extractAttachmentsFromReport';
+import AttachmentCarouselProps, {Attachment, AttachmentCarouselOnyxProps, TransactionAttachmentCarouselOnyxProps} from './types';
 import useCarouselArrows from './useCarouselArrows';
 
 const viewabilityConfig = {
@@ -28,23 +27,24 @@ const viewabilityConfig = {
     itemVisiblePercentThreshold: 95,
 };
 
-function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, translate, transaction}) {
+function AttachmentCarousel(props: AttachmentCarouselProps & WindowDimensionsProps) {
+    const {report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, translate, transaction} = props;
     const styles = useThemeStyles();
-    const scrollRef = useRef(null);
+    const scrollRef = useRef<FlatList>(null);
 
     const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
 
     const [containerWidth, setContainerWidth] = useState(0);
-    const [page, setPage] = useState(0);
-    const [attachments, setAttachments] = useState([]);
-    const [activeSource, setActiveSource] = useState(source);
+    const [page, setPage] = useState<number | null>(0);
+    const [attachments, setAttachments] = useState<Attachment[]>([]);
+    const [activeSource, setActiveSource] = useState<string | null>(source);
     const [shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows] = useCarouselArrows();
     const [isReceipt, setIsReceipt] = useState(false);
 
     const compareImage = useCallback(
-        (attachment) => {
+        (attachment: Attachment) => {
             if (attachment.isReceipt && isReceipt) {
-                return attachment.transactionID === transaction.transactionID;
+                return attachment.transactionID === transaction?.transactionID;
             }
             return attachment.source === source;
         },
@@ -52,14 +52,14 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
     );
 
     useEffect(() => {
-        const parentReportAction = parentReportActions[report.parentReportActionID];
+        const parentReportAction = parentReportActions?.[report?.parentReportActionID ?? ''] ?? null;
         const attachmentsFromReport = extractAttachmentsFromReport(parentReportAction, reportActions, transaction);
 
-        const initialPage = _.findIndex(attachmentsFromReport, compareImage);
+        const initialPage = attachmentsFromReport.findIndex(compareImage);
 
         // Dismiss the modal when deleting an attachment during its display in preview.
-        if (initialPage === -1 && _.find(attachments, compareImage)) {
-            Navigation.dismissModal();
+        if (initialPage === -1 && attachments.find(compareImage)) {
+            Navigation.dismissModal(undefined);
         } else {
             setPage(initialPage);
             setAttachments(attachmentsFromReport);
@@ -68,7 +68,7 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
             setDownloadButtonVisibility(initialPage !== -1);
 
             // Update the parent modal's state with the source and name from the mapped attachments
-            if (!_.isUndefined(attachmentsFromReport[initialPage])) {
+            if (attachmentsFromReport[initialPage]) {
                 onNavigate(attachmentsFromReport[initialPage]);
             }
         }
@@ -77,16 +77,14 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
 
     /**
      * Updates the page state when the user navigates between attachments
-     * @param {Object} item
-     * @param {number} index
      */
     const updatePage = useCallback(
-        ({viewableItems}) => {
+        ({viewableItems}: {viewableItems: ViewToken[]}) => {
             Keyboard.dismiss();
 
             // Since we can have only one item in view at a time, we can use the first item in the array
             // to get the index of the current page
-            const entry = _.first(viewableItems);
+            const entry = viewableItems[0];
             if (!entry) {
                 setIsReceipt(false);
                 setActiveSource(null);
@@ -104,11 +102,10 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
 
     /**
      * Increments or decrements the index to get another selected item
-     * @param {Number} deltaSlide
      */
     const cycleThroughAttachments = useCallback(
-        (deltaSlide) => {
-            const nextIndex = page + deltaSlide;
+        (deltaSlide: number) => {
+            const nextIndex = (page ?? 0) + deltaSlide;
             const nextItem = attachments[nextIndex];
 
             if (!nextItem || !scrollRef.current) {
@@ -122,12 +119,10 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
 
     /**
      * Calculate items layout information to optimize scrolling performance
-     * @param {*} data
-     * @param {Number} index
-     * @returns {{offset: Number, length: Number, index: Number}}
      */
     const getItemLayout = useCallback(
-        (_data, index) => ({
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        (_: ArrayLike<Attachment> | null | undefined, index: number) => ({
             length: containerWidth,
             offset: containerWidth * index,
             index,
@@ -137,20 +132,12 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
 
     /**
      * Defines how a single attachment should be rendered
-     * @param {Object} item
-     * @param {String} item.reportActionID
-     * @param {Boolean} item.isAuthTokenRequired
-     * @param {String} item.source
-     * @param {Object} item.file
-     * @param {String} item.file.name
-     * @param {Boolean} item.hasBeenFlagged
-     * @returns {JSX.Element}
      */
     const renderItem = useCallback(
-        ({item}) => (
+        (renderItemProps: {item: Attachment}) => (
             <CarouselItem
-                item={item}
-                isFocused={activeSource === item.source}
+                item={renderItemProps.item}
+                isFocused={activeSource === renderItemProps.item.source}
                 onPress={canUseTouchScreen ? () => setShouldShowArrows(!shouldShowArrows) : undefined}
             />
         ),
@@ -175,7 +162,7 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
                 <>
                     <CarouselButtons
                         shouldShowArrows={shouldShowArrows}
-                        page={page}
+                        page={page ?? 0}
                         attachments={attachments}
                         onBack={() => cycleThroughAttachments(-1)}
                         onForward={() => cycleThroughAttachments(1)}
@@ -186,7 +173,6 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
                     {containerWidth > 0 && (
                         <FlatList
                             keyboardShouldPersistTaps="handled"
-                            listKey="AttachmentCarousel"
                             horizontal
                             decelerationRate="fast"
                             showsHorizontalScrollIndicator={false}
@@ -209,7 +195,7 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
                             CellRendererComponent={AttachmentCarouselCellRenderer}
                             renderItem={renderItem}
                             getItemLayout={getItemLayout}
-                            keyExtractor={(item) => item.source}
+                            keyExtractor={(item: Attachment) => String(item.source)}
                             viewabilityConfig={viewabilityConfig}
                             onViewableItemsChanged={updatePage}
                         />
@@ -222,13 +208,11 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
     );
 }
 
-AttachmentCarousel.propTypes = propTypes;
-AttachmentCarousel.defaultProps = defaultProps;
 AttachmentCarousel.displayName = 'AttachmentCarousel';
 
 export default compose(
     // eslint-disable-next-line rulesdir/no-multiple-onyx-in-file
-    withOnyx({
+    withOnyx<AttachmentCarouselProps, AttachmentCarouselOnyxProps>({
         reportActions: {
             key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`,
             canEvict: false,
@@ -241,15 +225,16 @@ export default compose(
             canEvict: false,
         },
     }),
+    withWindowDimensions,
     // eslint-disable-next-line rulesdir/no-multiple-onyx-in-file
-    withOnyx({
+    withOnyx<AttachmentCarouselProps, TransactionAttachmentCarouselOnyxProps>({
         transaction: {
             key: ({report, parentReportActions}) => {
-                const parentReportAction = lodashGet(parentReportActions, [report.parentReportActionID]);
-                return `${ONYXKEYS.COLLECTION.TRANSACTION}${lodashGet(parentReportAction, 'originalMessage.IOUTransactionID', 0)}`;
+                const parentReportAction = parentReportActions?.[report?.parentReportActionID ?? ''];
+                const originalMessage = parentReportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.IOU ? parentReportAction?.originalMessage : null;
+                return `${ONYXKEYS.COLLECTION.TRANSACTION}${originalMessage?.IOUTransactionID ?? 0}`;
             },
         },
     }),
     withLocalize,
-    withWindowDimensions,
 )(AttachmentCarousel);
diff --git a/src/components/Attachments/AttachmentCarousel/types.ts b/src/components/Attachments/AttachmentCarousel/types.ts
new file mode 100644
index 000000000000..e173ee406697
--- /dev/null
+++ b/src/components/Attachments/AttachmentCarousel/types.ts
@@ -0,0 +1,38 @@
+import {OnyxEntry} from 'react-native-onyx';
+import {WithLocalizeProps} from '@components/withLocalize';
+import {WindowDimensionsContextData} from '@components/withWindowDimensions/types';
+import {Report, ReportActions, Transaction} from '@src/types/onyx';
+
+type Attachment = {
+    reportActionID?: string;
+    source: string;
+    isAuthTokenRequired: boolean;
+    file: {name: string};
+    isReceipt: boolean;
+    hasBeenFlagged?: boolean;
+    transactionID?: string;
+};
+
+type AttachmentCarouselOnyxProps = {
+    reportActions: OnyxEntry<ReportActions>;
+    parentReportActions: OnyxEntry<ReportActions>;
+    parentReport: OnyxEntry<Report>;
+};
+
+type TransactionAttachmentCarouselOnyxProps = {
+    transaction: OnyxEntry<Transaction>;
+};
+
+type AttachmentCarouselProps = {
+    report: Report;
+    source: string;
+    onNavigate: (attachment: Attachment) => void;
+    setDownloadButtonVisibility: (isVisible: boolean) => void;
+    onClose: () => void;
+} & AttachmentCarouselOnyxProps &
+    TransactionAttachmentCarouselOnyxProps &
+    WithLocalizeProps &
+    WindowDimensionsContextData;
+
+export default AttachmentCarouselProps;
+export type {Attachment, AttachmentCarouselOnyxProps, TransactionAttachmentCarouselOnyxProps};
diff --git a/src/components/Attachments/AttachmentCarousel/useCarouselArrows.js b/src/components/Attachments/AttachmentCarousel/useCarouselArrows.tsx
similarity index 86%
rename from src/components/Attachments/AttachmentCarousel/useCarouselArrows.js
rename to src/components/Attachments/AttachmentCarousel/useCarouselArrows.tsx
index 0c55c3ae519d..bd06c81077f2 100644
--- a/src/components/Attachments/AttachmentCarousel/useCarouselArrows.js
+++ b/src/components/Attachments/AttachmentCarousel/useCarouselArrows.tsx
@@ -2,15 +2,15 @@ import {useCallback, useEffect, useRef, useState} from 'react';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import CONST from '@src/CONST';
 
-function useCarouselArrows() {
+function useCarouselArrows(): [boolean, (show?: boolean) => void, () => void, () => void] {
     const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
     const [shouldShowArrows, setShouldShowArrowsInternal] = useState(canUseTouchScreen);
-    const autoHideArrowTimeout = useRef(null);
+    const autoHideArrowTimeout = useRef<NodeJS.Timeout | null>(null);
 
     /**
      * Cancels the automatic hiding of the arrows.
      */
-    const cancelAutoHideArrows = useCallback(() => clearTimeout(autoHideArrowTimeout.current), []);
+    const cancelAutoHideArrows = useCallback(() => clearTimeout(autoHideArrowTimeout.current ?? undefined), []);
 
     /**
      * Automatically hide the arrows if there is no interaction for 3 seconds.
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.js b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.tsx
similarity index 64%
rename from src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.js
rename to src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.tsx
index fc443e5ea17b..c79c6d3293bd 100755
--- a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.tsx
@@ -1,25 +1,31 @@
 import React, {memo} from 'react';
+import {Role} from 'react-native';
 import AttachmentCarouselPage from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPage';
 import ImageView from '@components/ImageView';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import compose from '@libs/compose';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
-import {attachmentViewImageDefaultProps, attachmentViewImagePropTypes} from './propTypes';
+import AttachmentViewImageProps from './types';
 
-const propTypes = {
-    ...attachmentViewImagePropTypes,
-    ...withLocalizePropTypes,
-};
-
-function AttachmentViewImage({source, file, isAuthTokenRequired, isFocused, isUsedInCarousel, loadComplete, onPress, isImage, onScaleChanged, translate}) {
+function AttachmentViewImage({
+    source,
+    file = {name: ''},
+    isAuthTokenRequired = false,
+    isFocused = false,
+    isUsedInCarousel = false,
+    loadComplete = false,
+    onPress = undefined,
+    isImage = false,
+    onScaleChanged = () => {},
+}: AttachmentViewImageProps) {
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
     const children = isUsedInCarousel ? (
         <AttachmentCarouselPage
             source={source}
             isAuthTokenRequired={isImage && isAuthTokenRequired}
-            file={file}
+            // file={file}
             isActive={isFocused}
         />
     ) : (
@@ -36,7 +42,7 @@ function AttachmentViewImage({source, file, isAuthTokenRequired, isFocused, isUs
             onPress={onPress}
             disabled={loadComplete}
             style={[styles.flex1, styles.flexRow, styles.alignSelfStretch]}
-            role={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
+            role={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON as Role}
             accessibilityLabel={file.name || translate('attachmentView.unknownFilename')}
         >
             {children}
@@ -46,8 +52,6 @@ function AttachmentViewImage({source, file, isAuthTokenRequired, isFocused, isUs
     );
 }
 
-AttachmentViewImage.propTypes = propTypes;
-AttachmentViewImage.defaultProps = attachmentViewImageDefaultProps;
 AttachmentViewImage.displayName = 'AttachmentViewImage';
 
-export default compose(memo, withLocalize)(AttachmentViewImage);
+export default memo(AttachmentViewImage);
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.tsx
similarity index 61%
rename from src/components/Attachments/AttachmentView/AttachmentViewImage/index.js
rename to src/components/Attachments/AttachmentView/AttachmentViewImage/index.tsx
index 22bcf259ed77..4a8d2138d0f1 100755
--- a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.tsx
@@ -1,22 +1,18 @@
 import React, {memo} from 'react';
+import {Role} from 'react-native';
 import ImageView from '@components/ImageView';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import compose from '@libs/compose';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
-import {attachmentViewImageDefaultProps, attachmentViewImagePropTypes} from './propTypes';
+import AttachmentViewImageProps from './types';
 
-const propTypes = {
-    ...attachmentViewImagePropTypes,
-    ...withLocalizePropTypes,
-};
-
-function AttachmentViewImage({source, file, isAuthTokenRequired, loadComplete, onPress, isImage, onScaleChanged, translate, onError}) {
+function AttachmentViewImage({source, file, isAuthTokenRequired, loadComplete, onPress, isImage, onScaleChanged, onError}: AttachmentViewImageProps) {
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
     const children = (
         <ImageView
-            onScaleChanged={onScaleChanged}
+            onScaleChanged={onScaleChanged ?? (() => {})}
             url={source}
             fileName={file.name}
             isAuthTokenRequired={isImage && isAuthTokenRequired}
@@ -28,7 +24,7 @@ function AttachmentViewImage({source, file, isAuthTokenRequired, loadComplete, o
             onPress={onPress}
             disabled={loadComplete}
             style={[styles.flex1, styles.flexRow, styles.alignSelfStretch]}
-            role={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
+            role={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON as Role}
             accessibilityLabel={file.name || translate('attachmentView.unknownFilename')}
         >
             {children}
@@ -38,8 +34,6 @@ function AttachmentViewImage({source, file, isAuthTokenRequired, loadComplete, o
     );
 }
 
-AttachmentViewImage.propTypes = propTypes;
-AttachmentViewImage.defaultProps = attachmentViewImageDefaultProps;
 AttachmentViewImage.displayName = 'AttachmentViewImage';
 
-export default compose(memo, withLocalize)(AttachmentViewImage);
+export default memo(AttachmentViewImage);
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewImage/propTypes.js b/src/components/Attachments/AttachmentView/AttachmentViewImage/propTypes.js
deleted file mode 100644
index 184d3ae1a367..000000000000
--- a/src/components/Attachments/AttachmentView/AttachmentViewImage/propTypes.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import PropTypes from 'prop-types';
-import {attachmentViewDefaultProps, attachmentViewPropTypes} from '@components/Attachments/AttachmentView/propTypes';
-
-const attachmentViewImagePropTypes = {
-    ...attachmentViewPropTypes,
-
-    loadComplete: PropTypes.bool.isRequired,
-
-    isImage: PropTypes.bool.isRequired,
-};
-
-const attachmentViewImageDefaultProps = {
-    ...attachmentViewDefaultProps,
-
-    loadComplete: false,
-    isImage: false,
-};
-
-export {attachmentViewImagePropTypes, attachmentViewImageDefaultProps};
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewImage/types.ts b/src/components/Attachments/AttachmentView/AttachmentViewImage/types.ts
new file mode 100644
index 000000000000..c4aceee4087d
--- /dev/null
+++ b/src/components/Attachments/AttachmentView/AttachmentViewImage/types.ts
@@ -0,0 +1,9 @@
+import AttachmentProps from '@components/Attachments/AttachmentView/types';
+
+type AttachmentViewImageProps = {
+    loadComplete: boolean;
+    isImage: boolean;
+    onError: () => void;
+} & AttachmentProps;
+
+export default AttachmentViewImageProps;
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx
similarity index 72%
rename from src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js
rename to src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx
index 40887ddee697..714c01b99a2f 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx
@@ -1,10 +1,10 @@
 import React, {memo, useCallback, useContext, useEffect} from 'react';
 import AttachmentCarouselPagerContext from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
 import PDFView from '@components/PDFView';
-import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes';
+import AttachmentViewPdfProps from './types';
 
 function BaseAttachmentViewPdf({
-    file,
+    file = {name: ''} as File,
     encryptedSourceUrl,
     isFocused,
     isUsedInCarousel,
@@ -14,32 +14,33 @@ function BaseAttachmentViewPdf({
     onLoadComplete,
     errorLabelStyles,
     style,
-}) {
+}: AttachmentViewPdfProps) {
     const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);
 
     useEffect(() => {
         if (!attachmentCarouselPagerContext) {
             return;
         }
-        attachmentCarouselPagerContext.onPinchGestureChange(false);
+        attachmentCarouselPagerContext?.onPinchGestureChange(false);
         // eslint-disable-next-line react-hooks/exhaustive-deps -- we just want to call this function when component is mounted
     }, []);
 
     const onScaleChanged = useCallback(
-        (scale) => {
-            onScaleChangedProp(scale);
+        (scale: number) => {
+            onScaleChangedProp?.(scale);
 
             // When a pdf is shown in a carousel, we want to disable the pager scroll when the pdf is zoomed in
             if (isUsedInCarousel) {
                 const shouldPagerScroll = scale === 1;
 
-                attachmentCarouselPagerContext.onPinchGestureChange(!shouldPagerScroll);
+                attachmentCarouselPagerContext?.onPinchGestureChange(!shouldPagerScroll);
 
-                if (attachmentCarouselPagerContext.shouldPagerScroll.value === shouldPagerScroll) {
+                if (attachmentCarouselPagerContext?.shouldPagerScroll.value === shouldPagerScroll) {
                     return;
                 }
-
-                attachmentCarouselPagerContext.shouldPagerScroll.value = shouldPagerScroll;
+                if (attachmentCarouselPagerContext) {
+                    attachmentCarouselPagerContext.shouldPagerScroll.value = shouldPagerScroll;
+                }
             }
         },
         [attachmentCarouselPagerContext, isUsedInCarousel, onScaleChangedProp],
@@ -60,8 +61,6 @@ function BaseAttachmentViewPdf({
     );
 }
 
-BaseAttachmentViewPdf.propTypes = attachmentViewPdfPropTypes;
-BaseAttachmentViewPdf.defaultProps = attachmentViewPdfDefaultProps;
 BaseAttachmentViewPdf.displayName = 'BaseAttachmentViewPdf';
 
 export default memo(BaseAttachmentViewPdf);
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.tsx
similarity index 79%
rename from src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js
rename to src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.tsx
index 46afd23daa4c..074ad3545d3b 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.tsx
@@ -5,10 +5,9 @@ import Animated, {useSharedValue} from 'react-native-reanimated';
 import AttachmentCarouselPagerContext from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
 import styles from '@styles/styles';
 import BaseAttachmentViewPdf from './BaseAttachmentViewPdf';
-import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes';
+import AttachmentViewPdfProps from './types';
 
-function AttachmentViewPdf(props) {
-    const {onScaleChanged, ...restProps} = props;
+function AttachmentViewPdf({onScaleChanged, ...props}: AttachmentViewPdfProps) {
     const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);
     const scaleRef = useSharedValue(1);
     const offsetX = useSharedValue(0);
@@ -22,8 +21,10 @@ function AttachmentViewPdf(props) {
                 // enable  the pager scroll so that the user
                 // can swipe to the next attachment otherwise disable it.
                 if (Math.abs(evt.allTouches[0].absoluteX - offsetX.value) > Math.abs(evt.allTouches[0].absoluteY - offsetY.value) && scaleRef.value === 1) {
-                    attachmentCarouselPagerContext.shouldPagerScroll.value = true;
-                } else {
+                    if (attachmentCarouselPagerContext) {
+                        attachmentCarouselPagerContext.shouldPagerScroll.value = true;
+                    }
+                } else if (attachmentCarouselPagerContext) {
                     attachmentCarouselPagerContext.shouldPagerScroll.value = false;
                 }
             }
@@ -32,7 +33,7 @@ function AttachmentViewPdf(props) {
         });
 
     const updateScale = useCallback(
-        (scale) => {
+        (scale: number) => {
             scaleRef.value = scale;
         },
         [scaleRef],
@@ -41,7 +42,7 @@ function AttachmentViewPdf(props) {
     return (
         <View
             collapsable={false}
-            style={[styles.flex1]}
+            style={styles.flex1}
         >
             <GestureDetector gesture={Pan}>
                 <Animated.View
@@ -50,10 +51,10 @@ function AttachmentViewPdf(props) {
                 >
                     <BaseAttachmentViewPdf
                         // eslint-disable-next-line react/jsx-props-no-spreading
-                        {...restProps}
+                        {...props}
                         onScaleChanged={(scale) => {
-                            updateScale(scale);
-                            onScaleChanged();
+                            updateScale(scale ?? 0);
+                            onScaleChanged?.();
                         }}
                     />
                 </Animated.View>
@@ -62,7 +63,4 @@ function AttachmentViewPdf(props) {
     );
 }
 
-AttachmentViewPdf.propTypes = attachmentViewPdfPropTypes;
-AttachmentViewPdf.defaultProps = attachmentViewPdfDefaultProps;
-
 export default memo(AttachmentViewPdf);
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.ios.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.ios.tsx
similarity index 50%
rename from src/components/Attachments/AttachmentView/AttachmentViewPdf/index.ios.js
rename to src/components/Attachments/AttachmentView/AttachmentViewPdf/index.ios.tsx
index 103ff292760f..655df67a74e4 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.ios.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.ios.tsx
@@ -1,17 +1,16 @@
 import React, {memo} from 'react';
 import BaseAttachmentViewPdf from './BaseAttachmentViewPdf';
-import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes';
+import AttachmentViewPdfProps from './types';
 
-function AttachmentViewPdf(props) {
+function AttachmentViewPdf(props: AttachmentViewPdfProps) {
+    const {file = {name: ''} as File, ...restProps} = props;
     return (
         <BaseAttachmentViewPdf
             // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
+            {...restProps}
+            file={file}
         />
     );
 }
 
-AttachmentViewPdf.propTypes = attachmentViewPdfPropTypes;
-AttachmentViewPdf.defaultProps = attachmentViewPdfDefaultProps;
-
 export default memo(AttachmentViewPdf);
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx
similarity index 58%
rename from src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js
rename to src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx
index c3d1423b17c9..f4cb55e60057 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx
@@ -1,8 +1,8 @@
 import React, {memo} from 'react';
 import PDFView from '@components/PDFView';
-import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes';
+import AttachmentViewPdfProps from './types';
 
-function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onScaleChanged, onToggleKeyboard, onLoadComplete, errorLabelStyles, style}) {
+function AttachmentViewPdf({file = {name: ''}, encryptedSourceUrl, isFocused, onPress, onScaleChanged, onToggleKeyboard, onLoadComplete, errorLabelStyles, style}: AttachmentViewPdfProps) {
     return (
         <PDFView
             onPress={onPress}
@@ -18,7 +18,4 @@ function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onScal
     );
 }
 
-AttachmentViewPdf.propTypes = attachmentViewPdfPropTypes;
-AttachmentViewPdf.defaultProps = attachmentViewPdfDefaultProps;
-
 export default memo(AttachmentViewPdf);
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js
deleted file mode 100644
index a34010f0ba8b..000000000000
--- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import PropTypes from 'prop-types';
-import * as AttachmentsPropTypes from '@components/Attachments/propTypes';
-import stylePropTypes from '@styles/stylePropTypes';
-
-const attachmentViewPdfPropTypes = {
-    /** File object maybe be instance of File or Object */
-    file: AttachmentsPropTypes.attachmentFilePropType.isRequired,
-
-    encryptedSourceUrl: PropTypes.string.isRequired,
-    onToggleKeyboard: PropTypes.func.isRequired,
-    onLoadComplete: PropTypes.func.isRequired,
-
-    /** Additional style props */
-    style: stylePropTypes,
-
-    /** Styles for the error label */
-    errorLabelStyles: stylePropTypes,
-};
-
-const attachmentViewPdfDefaultProps = {
-    file: {
-        name: '',
-    },
-    style: [],
-    errorLabelStyles: [],
-};
-
-export {attachmentViewPdfPropTypes, attachmentViewPdfDefaultProps};
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts b/src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts
new file mode 100644
index 000000000000..651b57fdb103
--- /dev/null
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts
@@ -0,0 +1,16 @@
+import {StyleProp, ViewStyle} from 'react-native';
+import AttachmentProps from '@components/Attachments/AttachmentView/types';
+
+type AttachmentViewPdfProps = {
+    encryptedSourceUrl: string;
+    onToggleKeyboard: () => void;
+    onLoadComplete: () => void;
+
+    /** Additional style props */
+    style: StyleProp<ViewStyle>;
+
+    /** Styles for the error label */
+    errorLabelStyles: StyleProp<ViewStyle>;
+} & AttachmentProps;
+
+export default AttachmentViewPdfProps;
diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.tsx
similarity index 77%
rename from src/components/Attachments/AttachmentView/index.js
rename to src/components/Attachments/AttachmentView/index.tsx
index e484abe041b9..fd5b38c9bf88 100755
--- a/src/components/Attachments/AttachmentView/index.js
+++ b/src/components/Attachments/AttachmentView/index.tsx
@@ -1,16 +1,15 @@
 import Str from 'expensify-common/lib/str';
-import PropTypes from 'prop-types';
 import React, {memo, useState} from 'react';
-import {ActivityIndicator, ScrollView, View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
+import {ActivityIndicator, ScrollView, StyleProp, View, ViewStyle} from 'react-native';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
+import {ImageSource} from '@components/Attachments/AttachmentCarousel/types';
 import DistanceEReceipt from '@components/DistanceEReceipt';
 import EReceipt from '@components/EReceipt';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
 import compose from '@libs/compose';
@@ -21,77 +20,73 @@ import useThemeStyles from '@styles/useThemeStyles';
 import cursor from '@styles/utilities/cursor';
 import variables from '@styles/variables';
 import ONYXKEYS from '@src/ONYXKEYS';
+import {Transaction} from '@src/types/onyx';
 import AttachmentViewImage from './AttachmentViewImage';
 import AttachmentViewPdf from './AttachmentViewPdf';
-import {attachmentViewDefaultProps, attachmentViewPropTypes} from './propTypes';
+import AttachmentProps from './types';
 
-const propTypes = {
-    ...attachmentViewPropTypes,
-    ...withLocalizePropTypes,
+type AttachmentViewOnyxProps = {
+    /** The transaction currently being looked at */
+    transaction: OnyxEntry<Transaction>;
+};
 
+type AttachmentViewProps = {
     /** Flag to show/hide download icon */
-    shouldShowDownloadIcon: PropTypes.bool,
+    shouldShowDownloadIcon?: boolean;
 
     /** Flag to show the loading indicator */
-    shouldShowLoadingSpinnerIcon: PropTypes.bool,
+    shouldShowLoadingSpinnerIcon?: boolean;
 
     /** Notify parent that the UI should be modified to accommodate keyboard */
-    onToggleKeyboard: PropTypes.func,
+    onToggleKeyboard?: () => void;
 
     /** Extra styles to pass to View wrapper */
     // eslint-disable-next-line react/forbid-prop-types
-    containerStyles: PropTypes.arrayOf(PropTypes.object),
+    containerStyles?: StyleProp<ViewStyle>;
 
     /** Denotes whether it is a workspace avatar or not */
-    isWorkspaceAvatar: PropTypes.bool,
+    isWorkspaceAvatar?: boolean;
 
     /** The id of the transaction related to the attachment */
     // eslint-disable-next-line react/no-unused-prop-types
-    transactionID: PropTypes.string,
-};
+    transactionID?: string;
 
-const defaultProps = {
-    ...attachmentViewDefaultProps,
-    shouldShowDownloadIcon: false,
-    shouldShowLoadingSpinnerIcon: false,
-    onToggleKeyboard: () => {},
-    containerStyles: [],
-    isWorkspaceAvatar: false,
-    transactionID: '',
-};
+    fallbackSource?: string;
+} & AttachmentProps &
+    AttachmentViewOnyxProps;
 
 function AttachmentView({
     source,
-    file,
-    isAuthTokenRequired,
+    file = {name: ''} as File,
+    isAuthTokenRequired = false,
     isUsedInCarousel,
     onPress,
-    shouldShowLoadingSpinnerIcon,
-    shouldShowDownloadIcon,
+    shouldShowLoadingSpinnerIcon = false,
+    shouldShowDownloadIcon = false,
     containerStyles,
-    onScaleChanged,
-    onToggleKeyboard,
-    translate,
-    isFocused,
-    isWorkspaceAvatar,
+    onScaleChanged = () => {},
+    onToggleKeyboard = () => {},
+    isFocused = false,
+    isWorkspaceAvatar = false,
     fallbackSource,
     transaction,
-    isUsedInAttachmentModal,
-}) {
+    isUsedInAttachmentModal = false,
+}: AttachmentViewProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const [loadComplete, setLoadComplete] = useState(false);
     const [imageError, setImageError] = useState(false);
+    const {translate} = useLocalize();
 
     useNetwork({onReconnect: () => setImageError(false)});
 
     // Handles case where source is a component (ex: SVG)
-    if (_.isFunction(source)) {
+    if (typeof source === 'function') {
         let iconFillColor = '';
-        let additionalStyles = [];
+        let additionalStyles: StyleProp<ViewStyle> = [];
         if (isWorkspaceAvatar) {
             const defaultWorkspaceAvatarColor = StyleUtils.getDefaultWorkspaceAvatarColor(file.name);
-            iconFillColor = defaultWorkspaceAvatarColor.fill;
+            iconFillColor = defaultWorkspaceAvatarColor.fill ?? '';
             additionalStyles = [defaultWorkspaceAvatarColor];
         }
 
@@ -113,7 +108,7 @@ function AttachmentView({
                     style={styles.w100}
                     contentContainerStyle={[styles.flexGrow1, styles.justifyContentCenter, styles.alignItemsCenter]}
                 >
-                    <EReceipt transactionID={transaction.transactionID} />
+                    <EReceipt transactionID={transaction?.transactionID ?? ''} />
                 </ScrollView>
             </View>
         );
@@ -121,7 +116,7 @@ function AttachmentView({
 
     // Check both source and file.name since PDFs dragged into the text field
     // will appear with a source that is a blob
-    if ((_.isString(source) && Str.isPDF(source)) || (file && Str.isPDF(file.name || translate('attachmentView.unknownFilename')))) {
+    if ((typeof source === 'string' && Str.isPDF(source)) || (file && Str.isPDF(file.name || translate('attachmentView.unknownFilename')))) {
         const encryptedSourceUrl = isAuthTokenRequired ? addEncryptedAuthTokenToURL(source) : source;
 
         // We need the following View component on android native
@@ -158,7 +153,7 @@ function AttachmentView({
     if (isImage || (file && Str.isImage(file.name))) {
         return (
             <AttachmentViewImage
-                source={imageError ? fallbackSource : source}
+                source={imageError ? fallbackSource ?? '' : source}
                 file={file}
                 isAuthTokenRequired={isAuthTokenRequired}
                 isUsedInCarousel={isUsedInCarousel}
@@ -175,12 +170,12 @@ function AttachmentView({
     }
 
     return (
-        <View style={[styles.defaultAttachmentView, ...containerStyles]}>
+        <View style={[styles.defaultAttachmentView, containerStyles]}>
             <View style={styles.mr2}>
                 <Icon src={Expensicons.Paperclip} />
             </View>
 
-            <Text style={[styles.textStrong, styles.flexShrink1, styles.breakAll, styles.flexWrap, styles.mw100]}>{file && file.name}</Text>
+            <Text style={[styles.textStrong, styles.flexShrink1, styles.breakAll, styles.flexWrap, styles.mw100]}>{file?.name}</Text>
             {!shouldShowLoadingSpinnerIcon && shouldShowDownloadIcon && (
                 <Tooltip text={translate('common.download')}>
                     <View style={styles.ml2}>
@@ -202,14 +197,11 @@ function AttachmentView({
     );
 }
 
-AttachmentView.propTypes = propTypes;
-AttachmentView.defaultProps = defaultProps;
 AttachmentView.displayName = 'AttachmentView';
 
 export default compose(
     memo,
-    withLocalize,
-    withOnyx({
+    withOnyx<AttachmentViewProps, AttachmentViewOnyxProps>({
         transaction: {
             key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
         },
diff --git a/src/components/Attachments/AttachmentView/propTypes.js b/src/components/Attachments/AttachmentView/propTypes.js
deleted file mode 100644
index 0c7c8814267f..000000000000
--- a/src/components/Attachments/AttachmentView/propTypes.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import PropTypes from 'prop-types';
-import * as AttachmentsPropTypes from '@components/Attachments/propTypes';
-
-const attachmentViewPropTypes = {
-    /** Whether source url requires authentication */
-    isAuthTokenRequired: PropTypes.bool,
-
-    /** URL to full-sized attachment, SVG function, or numeric static image on native platforms */
-    source: AttachmentsPropTypes.attachmentSourcePropType.isRequired,
-
-    /** File object can be an instance of File or Object */
-    file: AttachmentsPropTypes.attachmentFilePropType,
-
-    /** Whether this view is the active screen  */
-    isFocused: PropTypes.bool,
-
-    /** Whether this AttachmentView is shown as part of a AttachmentCarousel */
-    isUsedInCarousel: PropTypes.bool,
-
-    /** Function for handle on press */
-    onPress: PropTypes.func,
-
-    /** Handles scale changed event */
-    onScaleChanged: PropTypes.func,
-
-    /** Whether this AttachmentView is shown as part of an AttachmentModal */
-    isUsedInAttachmentModal: PropTypes.bool,
-};
-
-const attachmentViewDefaultProps = {
-    isAuthTokenRequired: false,
-    file: {
-        name: '',
-    },
-    isFocused: false,
-    isUsedInCarousel: false,
-    onPress: undefined,
-    onScaleChanged: () => {},
-    isUsedInAttachmentModal: false,
-};
-
-export {attachmentViewPropTypes, attachmentViewDefaultProps};
diff --git a/src/components/Attachments/AttachmentView/types.ts b/src/components/Attachments/AttachmentView/types.ts
new file mode 100644
index 000000000000..3272948979c8
--- /dev/null
+++ b/src/components/Attachments/AttachmentView/types.ts
@@ -0,0 +1,12 @@
+type AttachmentProps = {
+    source: string;
+    file: {name: string};
+    isAuthTokenRequired?: boolean;
+    isFocused?: boolean;
+    isUsedInCarousel?: boolean;
+    onPress?: () => void;
+    onScaleChanged?: (scale?: number) => void;
+    isUsedInAttachmentModal?: boolean;
+};
+
+export default AttachmentProps;
diff --git a/src/components/Attachments/propTypes.js b/src/components/Attachments/propTypes.js
deleted file mode 100644
index 698a41de9648..000000000000
--- a/src/components/Attachments/propTypes.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import PropTypes from 'prop-types';
-
-const attachmentSourcePropType = PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.number]);
-const attachmentFilePropType = PropTypes.shape({
-    name: PropTypes.string,
-});
-
-const attachmentPropType = PropTypes.shape({
-    /** Whether source url requires authentication */
-    isAuthTokenRequired: PropTypes.bool,
-
-    /** URL to full-sized attachment, SVG function, or numeric static image on native platforms */
-    source: attachmentSourcePropType.isRequired,
-
-    /** File object can be an instance of File or Object */
-    file: attachmentFilePropType,
-});
-
-const attachmentsPropType = PropTypes.arrayOf(attachmentPropType);
-
-export {attachmentSourcePropType, attachmentFilePropType, attachmentPropType, attachmentsPropType};
diff --git a/src/pages/home/report/ReportAttachmentsContext.js b/src/pages/home/report/ReportAttachmentsContext.tsx
similarity index 54%
rename from src/pages/home/report/ReportAttachmentsContext.js
rename to src/pages/home/report/ReportAttachmentsContext.tsx
index 5602612a6cd6..beb3ca07637f 100644
--- a/src/pages/home/report/ReportAttachmentsContext.js
+++ b/src/pages/home/report/ReportAttachmentsContext.tsx
@@ -1,17 +1,16 @@
-import PropTypes from 'prop-types';
 import React, {useEffect, useMemo, useRef} from 'react';
 import useCurrentReportID from '@hooks/useCurrentReportID';
+import ChildrenProps from '@src/types/utils/ChildrenProps';
 
-const ReportAttachmentsContext = React.createContext();
-
-const propTypes = {
-    /** Rendered child component */
-    children: PropTypes.node.isRequired,
+type ReportAttachmentsContextValue = {
+    isAttachmentHidden: (reportActionID: string) => boolean;
+    updateHiddenAttachments: (reportActionID: string, value: boolean) => void;
 };
+const ReportAttachmentsContext = React.createContext<ReportAttachmentsContextValue>({} as ReportAttachmentsContextValue);
 
-function ReportAttachmentsProvider(props) {
+function ReportAttachmentsProvider(props: ChildrenProps) {
     const currentReportID = useCurrentReportID();
-    const hiddenAttachments = useRef({});
+    const hiddenAttachments = useRef<Record<string, boolean>>({});
 
     useEffect(() => {
         // We only want to store the attachment visibility for the current report.
@@ -21,11 +20,11 @@ function ReportAttachmentsProvider(props) {
 
     const contextValue = useMemo(
         () => ({
-            isAttachmentHidden: (reportActionID) => hiddenAttachments.current[reportActionID],
-            updateHiddenAttachments: (reportActionID, value) => {
+            isAttachmentHidden: (reportActionID: string) => hiddenAttachments.current[reportActionID],
+            updateHiddenAttachments: (reportActionID: string, value: boolean) => {
                 hiddenAttachments.current = {
                     ...hiddenAttachments.current,
-                    [reportActionID]: value,
+                    [reportActionID ?? '']: value ?? false,
                 };
             },
         }),
@@ -35,7 +34,6 @@ function ReportAttachmentsProvider(props) {
     return <ReportAttachmentsContext.Provider value={contextValue}>{props.children}</ReportAttachmentsContext.Provider>;
 }
 
-ReportAttachmentsProvider.propTypes = propTypes;
 ReportAttachmentsProvider.displayName = 'ReportAttachmentsProvider';
 
 export default ReportAttachmentsContext;