diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx
index d389ac4b92f0..da8e3694a7d2 100644
--- a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx
+++ b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx
@@ -59,7 +59,6 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', dow
                     role={CONST.ROLE.BUTTON}
                 >
                     <AttachmentView
-                        // @ts-expect-error TODO: Remove this once AttachmentView (https://github.com/Expensify/App/issues/25150) is migrated to TypeScript.
                         source={sourceURLWithAuth}
                         file={{name: displayName}}
                         shouldShowDownloadIcon={!isOffline}
diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx
index 442b3cd864d6..667c84432684 100755
--- a/src/components/AttachmentModal.tsx
+++ b/src/components/AttachmentModal.tsx
@@ -31,6 +31,7 @@ import type ModalType from '@src/types/utils/ModalType';
 import AttachmentCarousel from './Attachments/AttachmentCarousel';
 import AttachmentCarouselPagerContext from './Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
 import AttachmentView from './Attachments/AttachmentView';
+import type {Attachment} from './Attachments/types';
 import BlockingView from './BlockingViews/BlockingView';
 import Button from './Button';
 import ConfirmModal from './ConfirmModal';
@@ -61,15 +62,6 @@ type AttachmentModalOnyxProps = {
     parentReportActions: OnyxEntry<OnyxTypes.ReportActions>;
 };
 
-type Attachment = {
-    source: AvatarSource;
-    isAuthTokenRequired: boolean;
-    file: FileObject;
-    isReceipt: boolean;
-    hasBeenFlagged?: boolean;
-    reportActionID?: string;
-};
-
 type ImagePickerResponse = {
     height: number;
     name: string;
@@ -79,7 +71,7 @@ type ImagePickerResponse = {
     width: number;
 };
 
-type FileObject = File | ImagePickerResponse;
+type FileObject = Partial<File | ImagePickerResponse>;
 
 type ChildrenProps = {
     displayFileInModal: (data: FileObject) => void;
@@ -181,7 +173,7 @@ function AttachmentModal({
     const [isAuthTokenRequiredState, setIsAuthTokenRequiredState] = useState(isAuthTokenRequired);
     const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState<TranslationPaths | null>(null);
     const [attachmentInvalidReason, setAttachmentInvalidReason] = useState<TranslationPaths | null>(null);
-    const [sourceState, setSourceState] = useState(() => source);
+    const [sourceState, setSourceState] = useState<AvatarSource>(() => source);
     const [modalType, setModalType] = useState<ModalType>(CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE);
     const [isConfirmButtonDisabled, setIsConfirmButtonDisabled] = useState(false);
     const [confirmButtonFadeAnimation] = useState(() => new Animated.Value(1));
@@ -190,7 +182,7 @@ function AttachmentModal({
     const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
     const isOverlayModalVisible = (isReceiptAttachment && isDeleteReceiptConfirmModalVisible) || (!isReceiptAttachment && isAttachmentInvalid);
 
-    const [file, setFile] = useState<Partial<FileObject> | undefined>(
+    const [file, setFile] = useState<FileObject | undefined>(
         originalFileName
             ? {
                   name: originalFileName,
@@ -211,7 +203,7 @@ function AttachmentModal({
         (attachment: Attachment) => {
             setSourceState(attachment.source);
             setFile(attachment.file);
-            setIsAuthTokenRequiredState(attachment.isAuthTokenRequired);
+            setIsAuthTokenRequiredState(attachment.isAuthTokenRequired ?? false);
             onCarouselAttachmentChange(attachment);
         },
         [onCarouselAttachmentChange],
@@ -222,7 +214,7 @@ function AttachmentModal({
      */
     const getModalType = useCallback(
         (sourceURL: string, fileObject: FileObject) =>
-            sourceURL && (Str.isPDF(sourceURL) || (fileObject && Str.isPDF(fileObject.name || translate('attachmentView.unknownFilename'))))
+            sourceURL && (Str.isPDF(sourceURL) || (fileObject && Str.isPDF(fileObject.name ?? translate('attachmentView.unknownFilename'))))
                 ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE
                 : CONST.MODAL.MODAL_TYPE.CENTERED,
         [translate],
@@ -292,14 +284,14 @@ function AttachmentModal({
     }, [transaction, report]);
 
     const isValidFile = useCallback((fileObject: FileObject) => {
-        if (fileObject.size > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) {
+        if (fileObject.size !== undefined && fileObject.size > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) {
             setIsAttachmentInvalid(true);
             setAttachmentInvalidReasonTitle('attachmentPicker.attachmentTooLarge');
             setAttachmentInvalidReason('attachmentPicker.sizeExceeded');
             return false;
         }
 
-        if (fileObject.size < CONST.API_ATTACHMENT_VALIDATIONS.MIN_SIZE) {
+        if (fileObject.size !== undefined && fileObject.size < CONST.API_ATTACHMENT_VALIDATIONS.MIN_SIZE) {
             setIsAttachmentInvalid(true);
             setAttachmentInvalidReasonTitle('attachmentPicker.attachmentTooSmall');
             setAttachmentInvalidReason('attachmentPicker.sizeNotMet');
@@ -352,7 +344,7 @@ function AttachmentModal({
                 setSourceState(inputSource);
                 setFile(updatedFile);
                 setModalType(inputModalType);
-            } else {
+            } else if (fileObject.uri) {
                 const inputModalType = getModalType(fileObject.uri, fileObject);
                 setIsModalOpen(true);
                 setSourceState(fileObject.uri);
@@ -536,7 +528,6 @@ function AttachmentModal({
                                 onNavigate={onNavigate}
                                 onClose={closeModal}
                                 source={source}
-                                onToggleKeyboard={updateConfirmButtonVisibility}
                                 setDownloadButtonVisibility={setDownloadButtonVisibility}
                             />
                         ) : (
@@ -546,7 +537,6 @@ function AttachmentModal({
                             !shouldShowNotFoundPage && (
                                 <AttachmentCarouselPagerContext.Provider value={context}>
                                     <AttachmentView
-                                        // @ts-expect-error TODO: Remove this once Attachments (https://github.com/Expensify/App/issues/24969) is migrated to TypeScript.
                                         containerStyles={[styles.mh5]}
                                         source={sourceForAttachmentView}
                                         isAuthTokenRequired={isAuthTokenRequiredState}
@@ -637,4 +627,4 @@ export default withOnyx<AttachmentModalProps, AttachmentModalOnyxProps>({
     },
 })(memo(AttachmentModal));
 
-export type {Attachment, FileObject};
+export type {FileObject};
diff --git a/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js b/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.tsx
similarity index 71%
rename from src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js
rename to src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.tsx
index f4cbffc0e1e4..839e05c419df 100644
--- a/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js
+++ b/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.tsx
@@ -1,19 +1,15 @@
-import PropTypes from 'prop-types';
 import React from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 import {PixelRatio, View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 
-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 +24,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.tsx
similarity index 73%
rename from src/components/Attachments/AttachmentCarousel/CarouselActions.js
rename to src/components/Attachments/AttachmentCarousel/CarouselActions.tsx
index cf5309222c4e..6138f07809c5 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselActions.js
+++ b/src/components/Attachments/AttachmentCarousel/CarouselActions.tsx
@@ -1,25 +1,22 @@
-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 = {
+type CarouselActionsProps = {
     /** Callback to cycle through attachments */
-    onCycleThroughAttachments: PropTypes.func.isRequired,
+    onCycleThroughAttachments: (deltaSlide: number) => void;
 };
 
-function CarouselActions({onCycleThroughAttachments}) {
+function CarouselActions({onCycleThroughAttachments}: CarouselActionsProps) {
     useEffect(() => {
         const shortcutLeftConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_LEFT;
         const unsubscribeLeftKey = KeyboardShortcut.subscribe(
             shortcutLeftConfig.shortcutKey,
-            (e) => {
-                if (lodashGet(e, 'target.blur')) {
+            (event) => {
+                if (event?.target instanceof HTMLElement) {
                     // prevents focus from highlighting around the modal
-                    e.target.blur();
+                    event.target.blur();
                 }
-
                 onCycleThroughAttachments(-1);
             },
             shortcutLeftConfig.descriptionKey,
@@ -29,12 +26,11 @@ function CarouselActions({onCycleThroughAttachments}) {
         const shortcutRightConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_RIGHT;
         const unsubscribeRightKey = KeyboardShortcut.subscribe(
             shortcutRightConfig.shortcutKey,
-            (e) => {
-                if (lodashGet(e, 'target.blur')) {
+            (event) => {
+                if (event?.target instanceof HTMLElement) {
                     // prevents focus from highlighting around the modal
-                    e.target.blur();
+                    event.target.blur();
                 }
-
                 onCycleThroughAttachments(1);
             },
             shortcutRightConfig.descriptionKey,
@@ -50,6 +46,4 @@ function CarouselActions({onCycleThroughAttachments}) {
     return null;
 }
 
-CarouselActions.propTypes = propTypes;
-
 export default CarouselActions;
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js b/src/components/Attachments/AttachmentCarousel/CarouselButtons.tsx
similarity index 75%
rename from src/components/Attachments/AttachmentCarousel/CarouselButtons.js
rename to src/components/Attachments/AttachmentCarousel/CarouselButtons.tsx
index a2c5dadb101d..2037ebdab086 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
+++ b/src/components/Attachments/AttachmentCarousel/CarouselButtons.tsx
@@ -1,8 +1,6 @@
-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 type {Attachment} from '@components/Attachments/types';
 import Button from '@components/Button';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Tooltip from '@components/Tooltip';
@@ -11,36 +9,34 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 
-const propTypes = {
+type CarouselButtonsProps = {
     /** Where the arrows should be visible */
-    shouldShowArrows: PropTypes.bool.isRequired,
+    shouldShowArrows: boolean;
 
     /** The current page index */
-    page: PropTypes.number.isRequired,
+    page: number;
 
     /** The attachments from the carousel */
-    attachments: AttachmentCarouselViewPropTypes.attachmentsPropType.isRequired,
+    attachments: Attachment[];
 
     /** Callback to go one page back */
-    onBack: PropTypes.func.isRequired,
+    onBack: () => void;
+
     /** Callback to go one page forward */
-    onForward: PropTypes.func.isRequired,
+    onForward: () => void;
 
-    autoHideArrow: PropTypes.func,
-    cancelAutoHideArrow: PropTypes.func,
-};
+    /** Callback for autohiding carousel button arrows */
+    autoHideArrow?: () => void;
 
-const defaultProps = {
-    autoHideArrow: () => {},
-    cancelAutoHideArrow: () => {},
+    /** Callback for cancelling autohiding of carousel button arrows */
+    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();
 
@@ -80,8 +76,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 b2c9fed64467..4988110538fe 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselItem.js
+++ b/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx
@@ -1,8 +1,8 @@
-import PropTypes from 'prop-types';
 import React, {useContext, useState} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import AttachmentView from '@components/Attachments/AttachmentView';
-import * as AttachmentsPropTypes from '@components/Attachments/propTypes';
+import type {Attachment} from '@components/Attachments/types';
 import Button from '@components/Button';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
@@ -12,55 +12,27 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import ReportAttachmentsContext from '@pages/home/report/ReportAttachmentsContext';
 import CONST from '@src/CONST';
 
-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.isRequired,
-        }).isRequired,
-
-        /** Whether the attachment has been flagged */
-        hasBeenFlagged: PropTypes.bool,
-
-        /** The id of the transaction related to the attachment */
-        transactionID: PropTypes.string,
-
-        duration: PropTypes.number,
-    }).isRequired,
+    item: Attachment;
 
     /** onPress callback */
-    onPress: PropTypes.func,
+    onPress?: () => void;
 
-    isModalHovered: PropTypes.bool,
+    /** Whether attachment carousel modal is hovered over */
+    isModalHovered?: boolean;
 
     /** Whether the attachment is currently being viewed in the carousel */
-    isFocused: PropTypes.bool.isRequired,
-};
-
-const defaultProps = {
-    onPress: undefined,
-    isModalHovered: false,
+    isFocused: boolean;
 };
 
-function CarouselItem({item, onPress, isFocused, isModalHovered}) {
+function CarouselItem({item, onPress, isFocused, isModalHovered}: 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 [isHidden, setIsHidden] = useState(() => (item.reportActionID ? isAttachmentHidden(item.reportActionID) : item.hasBeenFlagged));
 
-    const renderButton = (style) => (
+    const renderButton = (style: StyleProp<ViewStyle>) => (
         <Button
             small
             style={style}
@@ -87,7 +59,8 @@ function CarouselItem({item, onPress, isFocused, isModalHovered}) {
                 style={[styles.attachmentRevealButtonContainer]}
                 onPress={onPress}
                 accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
-                accessibilityLabel={item.file.name || translate('attachmentView.unknownFilename')}
+                // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                accessibilityLabel={item.file?.name || translate('attachmentView.unknownFilename')}
             >
                 {children}
             </PressableWithoutFeedback>
@@ -108,7 +81,7 @@ function CarouselItem({item, onPress, isFocused, isModalHovered}) {
                     reportActionID={item.reportActionID}
                     isHovered={isModalHovered}
                     isFocused={isFocused}
-                    optionalVideoDuration={item.duration}
+                    duration={item.duration}
                 />
             </View>
 
@@ -121,8 +94,6 @@ function CarouselItem({item, onPress, isFocused, isModalHovered}) {
     );
 }
 
-CarouselItem.propTypes = propTypes;
-CarouselItem.defaultProps = defaultProps;
 CarouselItem.displayName = 'CarouselItem';
 
 export default CarouselItem;
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.ts b/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.ts
index 87cabecc5878..87a9108d5f2e 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.ts
+++ b/src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.ts
@@ -2,11 +2,12 @@ import type {ForwardedRef} from 'react';
 import {createContext} from 'react';
 import type PagerView from 'react-native-pager-view';
 import type {SharedValue} from 'react-native-reanimated';
+import type {AttachmentSource} from '@components/Attachments/types';
 
 /** The pager items array is used within the pager to render and navigate between the images */
 type AttachmentCarouselPagerItems = {
     /** The source of the image is used to identify each attachment/page in the pager */
-    source: string;
+    source: AttachmentSource;
 
     /** The index of the pager item determines the order of the images in the pager */
     index: number;
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
index 33d9f20b5e57..b7ef9309eb10 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/Pager/index.tsx
@@ -1,5 +1,6 @@
 import type {ForwardedRef} from 'react';
 import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
+import type {NativeSyntheticEvent} from 'react-native';
 import {View} from 'react-native';
 import type {NativeViewGestureHandlerProps} from 'react-native-gesture-handler';
 import {createNativeWrapper} from 'react-native-gesture-handler';
@@ -7,6 +8,7 @@ import type {PagerViewProps} from 'react-native-pager-view';
 import PagerView from 'react-native-pager-view';
 import Animated, {useAnimatedProps, useSharedValue} from 'react-native-reanimated';
 import CarouselItem from '@components/Attachments/AttachmentCarousel/CarouselItem';
+import type {Attachment, AttachmentSource} from '@components/Attachments/types';
 import useThemeStyles from '@hooks/useThemeStyles';
 import AttachmentCarouselPagerContext from './AttachmentCarouselPagerContext';
 import usePageScrollHandler from './usePageScrollHandler';
@@ -20,22 +22,24 @@ type AttachmentCarouselPagerHandle = {
     setPage: (selectedPage: number) => void;
 };
 
-type Attachment = {
-    source: string;
-};
-
 type AttachmentCarouselPagerProps = {
     /** The attachments to be rendered in the pager. */
     items: Attachment[];
 
     /** The source (URL) of the currently active attachment. */
-    activeSource: string;
+    activeSource: AttachmentSource;
 
     /** The index of the initial page to be rendered. */
     initialPage: number;
 
     /** A callback to be called when the page is changed. */
-    onPageSelected: () => void;
+    onPageSelected: (
+        event: NativeSyntheticEvent<
+            Readonly<{
+                position: number;
+            }>
+        >,
+    ) => void;
 
     /**
      * A callback that can be used to toggle the attachment carousel arrows, when the scale of the image changes.
@@ -112,6 +116,12 @@ function AttachmentCarouselPager(
         onRequestToggleArrows();
     }, [isScrollEnabled.value, onRequestToggleArrows]);
 
+    const extractItemKey = useCallback(
+        (item: Attachment, index: number) =>
+            typeof item.source === 'string' || typeof item.source === 'number' ? `source-${item.source}` : `reportActionID-${item.reportActionID}` ?? `index-${index}`,
+        [],
+    );
+
     const contextValue = useMemo(
         () => ({
             pagerItems,
@@ -146,14 +156,11 @@ function AttachmentCarouselPager(
 
     const carouselItems = items.map((item, index) => (
         <View
-            key={item.source}
+            key={extractItemKey(item, index)}
             style={styles.flex1}
         >
             <CarouselItem
-                // @ts-expect-error TODO: Remove this once AttachmentView (https://github.com/Expensify/App/issues/25150) is migrated to TypeScript.
                 item={item}
-                isSingleItem={items.length === 1}
-                index={index}
                 isFocused={index === activePageIndex && activeSource === item.source}
             />
         </View>
@@ -179,3 +186,4 @@ function AttachmentCarouselPager(
 AttachmentCarouselPager.displayName = 'AttachmentCarouselPager';
 
 export default React.forwardRef(AttachmentCarouselPager);
+export type {AttachmentCarouselPagerHandle};
diff --git a/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js b/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js
deleted file mode 100644
index 5aa665683162..000000000000
--- a/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js
+++ /dev/null
@@ -1,42 +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.oneOfType([PropTypes.string, PropTypes.number]),
-
-    /** Callback to update the parent modal's state with a source and name from the attachments array */
-    onNavigate: 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: () => {},
-    setDownloadButtonVisibility: () => {},
-};
-
-export {propTypes, defaultProps};
diff --git a/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js b/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.ts
similarity index 82%
rename from src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js
rename to src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.ts
index 9524c5203110..342afa1d5366 100644
--- a/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js
+++ b/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.ts
@@ -1,20 +1,19 @@
 import {Parser as HtmlParser} from 'htmlparser2';
-import _ from 'underscore';
+import type {OnyxEntry} from 'react-native-onyx';
+import type {Attachment} from '@components/Attachments/types';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 import CONST from '@src/CONST';
+import type {ReportAction, ReportActions} from '@src/types/onyx';
 
 /**
  * Constructs the initial component state from report actions
- * @param {Object} parentReportAction
- * @param {Object} reportActions
- * @param {Object} transaction
- * @returns {Array}
  */
-function extractAttachmentsFromReport(parentReportAction, reportActions) {
-    const actions = [parentReportAction, ...ReportActionsUtils.getSortedReportActions(_.values(reportActions))];
-    const attachments = [];
+function extractAttachmentsFromReport(parentReportAction?: OnyxEntry<ReportAction>, reportActions?: OnyxEntry<ReportActions>) {
+    const actions = [...(parentReportAction ? [parentReportAction] : []), ...ReportActionsUtils.getSortedReportActions(Object.values(reportActions ?? {}))];
+    const attachments: Attachment[] = [];
+
     // We handle duplicate image sources by considering the first instance as original. Selecting any duplicate
     // and navigating back (<) shows the image preceding the first instance, not the selected duplicate's position.
     const uniqueSources = new Set();
@@ -30,7 +29,6 @@ function extractAttachmentsFromReport(parentReportAction, reportActions) {
                 uniqueSources.add(source);
                 const splittedUrl = attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE].split('/');
                 attachments.unshift({
-                    reportActionID: null,
                     source: tryResolveUrlFromApiRoot(attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE]),
                     isAuthTokenRequired: Boolean(attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE]),
                     file: {name: splittedUrl[splittedUrl.length - 1]},
@@ -73,14 +71,14 @@ function extractAttachmentsFromReport(parentReportAction, reportActions) {
         },
     });
 
-    _.forEach(actions, (action, key) => {
+    actions.forEach((action, key) => {
         if (!ReportActionsUtils.shouldReportActionBeVisible(action, key) || ReportActionsUtils.isMoneyRequestAction(action)) {
             return;
         }
 
-        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 67%
rename from src/components/Attachments/AttachmentCarousel/index.native.js
rename to src/components/Attachments/AttachmentCarousel/index.native.tsx
index f02b6690ae8e..f6d63fc9307d 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.js
+++ b/src/components/Attachments/AttachmentCarousel/index.native.tsx
@@ -1,63 +1,62 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {Keyboard, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
+import type {Attachment, AttachmentSource} from '@components/Attachments/types';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import * as Illustrations from '@components/Icon/Illustrations';
-import withLocalize from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import variables from '@styles/variables';
 import ONYXKEYS from '@src/ONYXKEYS';
-import {defaultProps, propTypes} from './attachmentCarouselPropTypes';
 import CarouselButtons from './CarouselButtons';
 import extractAttachmentsFromReport from './extractAttachmentsFromReport';
+import type {AttachmentCarouselPagerHandle} from './Pager';
 import AttachmentCarouselPager from './Pager';
+import type {AttachmentCaraouselOnyxProps, AttachmentCarouselProps} from './types';
 import useCarouselArrows from './useCarouselArrows';
 
-function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, translate, onClose}) {
+function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, onClose}: AttachmentCarouselProps) {
     const styles = useThemeStyles();
-    const pagerRef = useRef(null);
-    const [page, setPage] = useState();
-    const [attachments, setAttachments] = useState([]);
-    const [shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows] = useCarouselArrows();
-    const [activeSource, setActiveSource] = useState(source);
+    const {translate} = useLocalize();
+    const pagerRef = useRef<AttachmentCarouselPagerHandle>(null);
+    const [page, setPage] = useState<number>();
+    const [attachments, setAttachments] = useState<Attachment[]>([]);
+    const {shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows} = useCarouselArrows();
+    const [activeSource, setActiveSource] = useState<AttachmentSource>(source);
 
-    const compareImage = useCallback((attachment) => attachment.source === source, [source]);
+    const compareImage = useCallback((attachment: Attachment) => attachment.source === source, [source]);
 
     useEffect(() => {
-        const parentReportAction = parentReportActions[report.parentReportActionID];
+        const parentReportAction = report.parentReportActionID && parentReportActions ? parentReportActions[report.parentReportActionID] : undefined;
         const attachmentsFromReport = extractAttachmentsFromReport(parentReportAction, reportActions);
 
-        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)) {
+        if (initialPage === -1 && attachments.find(compareImage)) {
             Navigation.dismissModal();
         } else {
             setPage(initialPage);
             setAttachments(attachmentsFromReport);
 
             // Update the download button visibility in the parent modal
-            setDownloadButtonVisibility(initialPage !== -1);
+            if (setDownloadButtonVisibility) {
+                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] !== undefined && onNavigate) {
                 onNavigate(attachmentsFromReport[initialPage]);
             }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [reportActions, compareImage]);
 
-    /**
-     * Updates the page state when the user navigates between attachments
-     * @param {Object} item
-     * @param {number} index
-     */
+    /** Updates the page state when the user navigates between attachments */
     const updatePage = useCallback(
-        (newPageIndex) => {
+        (newPageIndex: number) => {
             Keyboard.dismiss();
             setShouldShowArrows(true);
 
@@ -66,7 +65,9 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
             setPage(newPageIndex);
             setActiveSource(item.source);
 
-            onNavigate(item);
+            if (onNavigate) {
+                onNavigate(item);
+            }
         },
         [setShouldShowArrows, attachments, onNavigate],
     );
@@ -76,10 +77,13 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
      * @param {Number} deltaSlide
      */
     const cycleThroughAttachments = useCallback(
-        (deltaSlide) => {
+        (deltaSlide: number) => {
+            if (page === undefined) {
+                return;
+            }
             const nextPageIndex = page + deltaSlide;
             updatePage(nextPageIndex);
-            pagerRef.current.setPage(nextPageIndex);
+            pagerRef.current?.setPage(nextPageIndex);
 
             autoHideArrows();
         },
@@ -91,7 +95,7 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
      * @param {Boolean} showArrows if showArrows is passed, it will set the visibility to the passed value
      */
     const toggleArrows = useCallback(
-        (showArrows) => {
+        (showArrows?: boolean) => {
             if (showArrows === undefined) {
                 setShouldShowArrows((prevShouldShowArrows) => !prevShouldShowArrows);
                 return;
@@ -148,23 +152,15 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
     );
 }
 
-AttachmentCarousel.propTypes = propTypes;
-AttachmentCarousel.defaultProps = defaultProps;
 AttachmentCarousel.displayName = 'AttachmentCarousel';
 
-export default compose(
-    withOnyx({
-        reportActions: {
-            key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`,
-            canEvict: false,
-        },
-        parentReport: {
-            key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report ? report.parentReportID : '0'}`,
-        },
-        parentReportActions: {
-            key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report ? report.parentReportID : '0'}`,
-            canEvict: false,
-        },
-    }),
-    withLocalize,
-)(AttachmentCarousel);
+export default withOnyx<AttachmentCarouselProps, AttachmentCaraouselOnyxProps>({
+    parentReportActions: {
+        key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.parentReportID}`,
+        canEvict: false,
+    },
+    reportActions: {
+        key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`,
+        canEvict: false,
+    },
+})(AttachmentCarousel);
diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.tsx
similarity index 65%
rename from src/components/Attachments/AttachmentCarousel/index.js
rename to src/components/Attachments/AttachmentCarousel/index.tsx
index ef6a11f6e67c..f05abfd6a0de 100644
--- a/src/components/Attachments/AttachmentCarousel/index.js
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -1,25 +1,25 @@
+import isEqual from 'lodash/isEqual';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
+import type {ListRenderItemInfo} from 'react-native';
 import {FlatList, Keyboard, PixelRatio, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
+import type {Attachment, AttachmentSource} from '@components/Attachments/types';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import * as Illustrations from '@components/Icon/Illustrations';
-import withLocalize from '@components/withLocalize';
-import withWindowDimensions from '@components/withWindowDimensions';
+import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import compose from '@libs/compose';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import Navigation from '@libs/Navigation/Navigation';
 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 type {AttachmentCaraouselOnyxProps, AttachmentCarouselProps, UpdatePageProps} from './types';
 import useCarouselArrows from './useCarouselArrows';
 
 const viewabilityConfig = {
@@ -28,79 +28,79 @@ const viewabilityConfig = {
     itemVisiblePercentThreshold: 95,
 };
 
-function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, translate}) {
+function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility}: AttachmentCarouselProps) {
     const theme = useTheme();
+    const {translate} = useLocalize();
     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 [shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows] = useCarouselArrows();
+    const [attachments, setAttachments] = useState<Attachment[]>([]);
+    const [activeSource, setActiveSource] = useState<AttachmentSource | null>(source);
+    const {shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows} = useCarouselArrows();
 
-    const compareImage = useCallback((attachment) => attachment.source === source, [source]);
+    const compareImage = useCallback((attachment: Attachment) => attachment.source === source, [source]);
 
     useEffect(() => {
-        const parentReportAction = parentReportActions[report.parentReportActionID];
-        const attachmentsFromReport = extractAttachmentsFromReport(parentReportAction, reportActions);
+        const parentReportAction = report.parentReportActionID && parentReportActions ? parentReportActions[report.parentReportActionID] : undefined;
+        const attachmentsFromReport = extractAttachmentsFromReport(parentReportAction, reportActions ?? undefined);
 
-        const initialPage = _.findIndex(attachmentsFromReport, compareImage);
-
-        if (_.isEqual(attachments, attachmentsFromReport)) {
+        if (isEqual(attachments, attachmentsFromReport)) {
             return;
         }
 
+        const initialPage = attachmentsFromReport.findIndex(compareImage);
+
         // Dismiss the modal when deleting an attachment during its display in preview.
-        if (initialPage === -1 && _.find(attachments, compareImage)) {
+        if (initialPage === -1 && attachments.find(compareImage)) {
             Navigation.dismissModal();
         } else {
             setPage(initialPage);
             setAttachments(attachmentsFromReport);
 
             // Update the download button visibility in the parent modal
-            setDownloadButtonVisibility(initialPage !== -1);
+            if (setDownloadButtonVisibility) {
+                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] !== undefined && onNavigate) {
                 onNavigate(attachmentsFromReport[initialPage]);
             }
         }
-    }, [attachments, reportActions, parentReportActions, compareImage, report.parentReportActionID, setDownloadButtonVisibility, onNavigate]);
+    }, [reportActions, parentReportActions, compareImage, report.parentReportActionID, attachments, setDownloadButtonVisibility, onNavigate]);
 
-    /**
-     * Updates the page state when the user navigates between attachments
-     * @param {Object} item
-     * @param {number} index
-     */
+    /** Updates the page state when the user navigates between attachments */
     const updatePage = useCallback(
-        ({viewableItems}) => {
+        ({viewableItems}: UpdatePageProps) => {
             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) {
                 setActiveSource(null);
                 return;
             }
 
-            setPage(entry.index);
-            setActiveSource(entry.item.source);
+            if (entry.index !== null) {
+                setPage(entry.index);
+                setActiveSource(entry.item.source);
+            }
 
-            onNavigate(entry.item);
+            if (onNavigate) {
+                onNavigate(entry.item);
+            }
         },
         [onNavigate],
     );
 
-    /**
-     * Increments or decrements the index to get another selected item
-     * @param {Number} deltaSlide
-     */
+    /** Increments or decrements the index to get another selected item */
     const cycleThroughAttachments = useCallback(
-        (deltaSlide) => {
+        (deltaSlide: number) => {
             const nextIndex = page + deltaSlide;
             const nextItem = attachments[nextIndex];
 
@@ -113,14 +113,15 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
         [attachments, canUseTouchScreen, page],
     );
 
-    /**
-     * Calculate items layout information to optimize scrolling performance
-     * @param {*} data
-     * @param {Number} index
-     * @returns {{offset: Number, length: Number, index: Number}}
-     */
+    const extractItemKey = useCallback(
+        (item: Attachment, index: number) =>
+            typeof item.source === 'string' || typeof item.source === 'number' ? `source-${item.source}` : `reportActionID-${item.reportActionID}` ?? `index-${index}`,
+        [],
+    );
+
+    /** Calculate items layout information to optimize scrolling performance */
     const getItemLayout = useCallback(
-        (_data, index) => ({
+        (data: ArrayLike<Attachment> | null | undefined, index: number) => ({
             length: containerWidth,
             offset: containerWidth * index,
             index,
@@ -128,30 +129,17 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
         [containerWidth],
     );
 
-    /**
-     * 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}
-     */
+    /** Defines how a single attachment should be rendered */
     const renderItem = useCallback(
-        ({item, index}) => (
+        ({item}: ListRenderItemInfo<Attachment>) => (
             <CarouselItem
                 item={item}
                 isFocused={activeSource === item.source}
-                isSingleItem={attachments.length === 1}
-                onPress={canUseTouchScreen ? () => setShouldShowArrows((oldState) => !oldState) : undefined}
+                onPress={canUseTouchScreen ? () => setShouldShowArrows((oldState: boolean) => !oldState) : undefined}
                 isModalHovered={shouldShowArrows}
-                index={index}
-                activeIndex={page}
             />
         ),
-        [activeSource, attachments.length, canUseTouchScreen, page, setShouldShowArrows, shouldShowArrows],
+        [activeSource, canUseTouchScreen, setShouldShowArrows, shouldShowArrows],
     );
 
     return (
@@ -184,7 +172,6 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
                     {containerWidth > 0 && (
                         <FlatList
                             keyboardShouldPersistTaps="handled"
-                            listKey="AttachmentCarousel"
                             horizontal
                             decelerationRate="fast"
                             showsHorizontalScrollIndicator={false}
@@ -207,7 +194,7 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
                             CellRendererComponent={AttachmentCarouselCellRenderer}
                             renderItem={renderItem}
                             getItemLayout={getItemLayout}
-                            keyExtractor={(item) => item.source}
+                            keyExtractor={extractItemKey}
                             viewabilityConfig={viewabilityConfig}
                             onViewableItemsChanged={updatePage}
                         />
@@ -220,24 +207,15 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
     );
 }
 
-AttachmentCarousel.propTypes = propTypes;
-AttachmentCarousel.defaultProps = defaultProps;
 AttachmentCarousel.displayName = 'AttachmentCarousel';
 
-export default compose(
-    withOnyx({
-        reportActions: {
-            key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`,
-            canEvict: false,
-        },
-        parentReport: {
-            key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report ? report.parentReportID : '0'}`,
-        },
-        parentReportActions: {
-            key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report ? report.parentReportID : '0'}`,
-            canEvict: false,
-        },
-    }),
-    withLocalize,
-    withWindowDimensions,
-)(AttachmentCarousel);
+export default withOnyx<AttachmentCarouselProps, AttachmentCaraouselOnyxProps>({
+    parentReportActions: {
+        key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.parentReportID}`,
+        canEvict: false,
+    },
+    reportActions: {
+        key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`,
+        canEvict: false,
+    },
+})(AttachmentCarousel);
diff --git a/src/components/Attachments/AttachmentCarousel/types.ts b/src/components/Attachments/AttachmentCarousel/types.ts
new file mode 100644
index 000000000000..8ba3489a5fcf
--- /dev/null
+++ b/src/components/Attachments/AttachmentCarousel/types.ts
@@ -0,0 +1,35 @@
+import type {ViewToken} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
+import type {Attachment, AttachmentSource} from '@components/Attachments/types';
+import type {Report, ReportActions} from '@src/types/onyx';
+
+type UpdatePageProps = {
+    viewableItems: ViewToken[];
+};
+
+type AttachmentCaraouselOnyxProps = {
+    /** Object of report actions for this report */
+    reportActions: OnyxEntry<ReportActions>;
+
+    /** The report actions of the parent report */
+    parentReportActions: OnyxEntry<ReportActions>;
+};
+
+type AttachmentCarouselProps = AttachmentCaraouselOnyxProps & {
+    /** Source is used to determine the starting index in the array of attachments */
+    source: AttachmentSource;
+
+    /** Callback to update the parent modal's state with a source and name from the attachments array */
+    onNavigate?: (attachment: Attachment) => void;
+
+    /** Function to change the download button Visibility */
+    setDownloadButtonVisibility?: (isButtonVisible: boolean) => void;
+
+    /** The report currently being looked at */
+    report: Report;
+
+    /** A callback that is called when swipe-down-to-close gesture happens */
+    onClose: () => void;
+};
+
+export type {AttachmentCarouselProps, UpdatePageProps, AttachmentCaraouselOnyxProps};
diff --git a/src/components/Attachments/AttachmentCarousel/useCarouselArrows.js b/src/components/Attachments/AttachmentCarousel/useCarouselArrows.ts
similarity index 72%
rename from src/components/Attachments/AttachmentCarousel/useCarouselArrows.js
rename to src/components/Attachments/AttachmentCarousel/useCarouselArrows.ts
index 0c55c3ae519d..12ca3db4e2ff 100644
--- a/src/components/Attachments/AttachmentCarousel/useCarouselArrows.js
+++ b/src/components/Attachments/AttachmentCarousel/useCarouselArrows.ts
@@ -1,3 +1,4 @@
+import type {SetStateAction} from 'react';
 import {useCallback, useEffect, useRef, useState} from 'react';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import CONST from '@src/CONST';
@@ -5,12 +6,17 @@ import CONST from '@src/CONST';
 function useCarouselArrows() {
     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(() => {
+        if (!autoHideArrowTimeout.current) {
+            return;
+        }
+        clearTimeout(autoHideArrowTimeout.current);
+    }, []);
 
     /**
      * Automatically hide the arrows if there is no interaction for 3 seconds.
@@ -27,7 +33,7 @@ function useCarouselArrows() {
     }, [canUseTouchScreen, cancelAutoHideArrows]);
 
     const setShouldShowArrows = useCallback(
-        (show = true) => {
+        (show: SetStateAction<boolean> = true) => {
             setShouldShowArrowsInternal(show);
             autoHideArrows();
         },
@@ -39,7 +45,7 @@ function useCarouselArrows() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    return [shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows];
+    return {shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows};
 }
 
 export default useCarouselArrows;
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.tsx
old mode 100755
new mode 100644
similarity index 54%
rename from src/components/Attachments/AttachmentView/AttachmentViewImage/index.js
rename to src/components/Attachments/AttachmentView/AttachmentViewImage/index.tsx
index 67f87b1733d3..c195c1e34554
--- a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.tsx
@@ -1,26 +1,31 @@
 import React, {memo} from 'react';
 import ImageView from '@components/ImageView';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import compose from '@libs/compose';
 import CONST from '@src/CONST';
-import {attachmentViewImageDefaultProps, attachmentViewImagePropTypes} from './propTypes';
+import type {AttachmentViewProps} from '..';
 
-const propTypes = {
-    ...attachmentViewImagePropTypes,
-    ...withLocalizePropTypes,
+type AttachmentViewImageProps = Pick<AttachmentViewProps, 'isAuthTokenRequired' | 'file' | 'onPress'> & {
+    url: string;
+
+    loadComplete: boolean;
+
+    isImage: boolean;
+
+    /** Function for handle on error */
+    onError?: () => void;
 };
 
-function AttachmentViewImage({url, file, isAuthTokenRequired, isFocused, loadComplete, onPress, onError, isImage, translate}) {
+function AttachmentViewImage({url, file, isAuthTokenRequired, loadComplete, onPress, onError, isImage}: AttachmentViewImageProps) {
+    const {translate} = useLocalize();
     const styles = useThemeStyles();
     const children = (
         <ImageView
             onError={onError}
             url={url}
-            fileName={file.name}
+            fileName={file?.name ?? ''}
             isAuthTokenRequired={isImage && isAuthTokenRequired}
-            isFocused={isFocused}
         />
     );
 
@@ -30,7 +35,8 @@ function AttachmentViewImage({url, file, isAuthTokenRequired, isFocused, loadCom
             disabled={loadComplete}
             style={[styles.flex1, styles.flexRow, styles.alignSelfStretch]}
             accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
-            accessibilityLabel={file.name || translate('attachmentView.unknownFilename')}
+            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+            accessibilityLabel={file?.name || translate('attachmentView.unknownFilename')}
         >
             {children}
         </PressableWithoutFeedback>
@@ -39,8 +45,6 @@ function AttachmentViewImage({url, file, isAuthTokenRequired, isFocused, loadCom
     );
 }
 
-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 f2a275fc9a21..000000000000
--- a/src/components/Attachments/AttachmentView/AttachmentViewImage/propTypes.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import PropTypes from 'prop-types';
-import {attachmentViewDefaultProps, attachmentViewPropTypes} from '@components/Attachments/AttachmentView/propTypes';
-
-const attachmentViewImagePropTypes = {
-    ...attachmentViewPropTypes,
-
-    url: PropTypes.string.isRequired,
-
-    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/AttachmentViewPdf/BaseAttachmentViewPdf.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx
similarity index 79%
rename from src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js
rename to src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx
index 2f16b63aacc6..44aeb2a58b81 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx
@@ -1,21 +1,8 @@
-import PropTypes from 'prop-types';
 import React, {memo, useCallback, useContext, useEffect} from 'react';
+import type {GestureResponderEvent} from 'react-native';
 import AttachmentCarouselPagerContext from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
 import PDFView from '@components/PDFView';
-import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes';
-
-const baseAttachmentViewPdfPropTypes = {
-    ...attachmentViewPdfPropTypes,
-
-    /** Triggered when the PDF's onScaleChanged event is triggered */
-    onScaleChanged: PropTypes.func,
-};
-
-const baseAttachmentViewPdfDefaultProps = {
-    ...attachmentViewPdfDefaultProps,
-
-    onScaleChanged: undefined,
-};
+import type AttachmentViewPdfProps from './types';
 
 function BaseAttachmentViewPdf({
     file,
@@ -28,7 +15,7 @@ function BaseAttachmentViewPdf({
     onLoadComplete,
     errorLabelStyles,
     style,
-}) {
+}: AttachmentViewPdfProps) {
     const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);
     const isScrollEnabled = attachmentCarouselPagerContext === null ? undefined : attachmentCarouselPagerContext.isScrollEnabled;
 
@@ -46,7 +33,7 @@ function BaseAttachmentViewPdf({
      * as well as call the onScaleChanged prop of the AttachmentViewPdf component if defined.
      */
     const onScaleChanged = useCallback(
-        (newScale) => {
+        (newScale: number) => {
             if (onScaleChangedProp !== undefined) {
                 onScaleChangedProp(newScale);
             }
@@ -66,13 +53,13 @@ function BaseAttachmentViewPdf({
      * Otherwise it means that the PDF is currently zoomed in, therefore the onTap callback should be ignored
      */
     const onPress = useCallback(
-        (e) => {
+        (event?: GestureResponderEvent | KeyboardEvent) => {
             if (onPressProp !== undefined) {
-                onPressProp(e);
+                onPressProp(event);
             }
 
-            if (attachmentCarouselPagerContext !== null && isScrollEnabled.value) {
-                attachmentCarouselPagerContext.onTap(e);
+            if (attachmentCarouselPagerContext !== null && isScrollEnabled?.value) {
+                attachmentCarouselPagerContext.onTap();
             }
         },
         [attachmentCarouselPagerContext, isScrollEnabled, onPressProp],
@@ -80,10 +67,11 @@ function BaseAttachmentViewPdf({
 
     return (
         <PDFView
+            // @ts-expect-error waiting for https://github.com/Expensify/App/issues/16186 merge
             onPress={onPress}
             isFocused={isFocused}
             sourceURL={encryptedSourceUrl}
-            fileName={file.name}
+            fileName={file?.name}
             style={style}
             onToggleKeyboard={onToggleKeyboard}
             onScaleChanged={onScaleChanged}
@@ -93,8 +81,6 @@ function BaseAttachmentViewPdf({
     );
 }
 
-BaseAttachmentViewPdf.propTypes = baseAttachmentViewPdfPropTypes;
-BaseAttachmentViewPdf.defaultProps = baseAttachmentViewPdfDefaultProps;
 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 94%
rename from src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js
rename to src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.tsx
index 07cd8ecf61e7..9f74b5c7bfe8 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.tsx
@@ -5,13 +5,13 @@ import Animated, {useSharedValue} from 'react-native-reanimated';
 import AttachmentCarouselPagerContext from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
 import useThemeStyles from '@hooks/useThemeStyles';
 import BaseAttachmentViewPdf from './BaseAttachmentViewPdf';
-import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes';
+import type AttachmentViewPdfProps from './types';
 
 // If the user pans less than this threshold, we'll not enable/disable the pager scroll, since the thouch will most probably be a tap.
 // If the user moves their finger more than this threshold in the X direction, we'll enable the pager scroll. Otherwise if in the Y direction, we'll disable it.
 const SCROLL_THRESHOLD = 10;
 
-function AttachmentViewPdf(props) {
+function AttachmentViewPdf(props: AttachmentViewPdfProps) {
     const styles = useThemeStyles();
     const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);
     const scale = useSharedValue(1);
@@ -53,6 +53,9 @@ function AttachmentViewPdf(props) {
         })
         .onTouchesUp(() => {
             isPanGestureActive.value = false;
+            if (!isScrollEnabled) {
+                return;
+            }
             isScrollEnabled.value = true;
         });
 
@@ -93,7 +96,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 54%
rename from src/components/Attachments/AttachmentView/AttachmentViewPdf/index.ios.js
rename to src/components/Attachments/AttachmentView/AttachmentViewPdf/index.ios.tsx
index 103ff292760f..4ee60e9dfff5 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.ios.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.ios.tsx
@@ -1,8 +1,8 @@
 import React, {memo} from 'react';
 import BaseAttachmentViewPdf from './BaseAttachmentViewPdf';
-import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes';
+import type AttachmentViewPdfProps from './types';
 
-function AttachmentViewPdf(props) {
+function AttachmentViewPdf(props: AttachmentViewPdfProps) {
     return (
         <BaseAttachmentViewPdf
             // eslint-disable-next-line react/jsx-props-no-spreading
@@ -11,7 +11,4 @@ function AttachmentViewPdf(props) {
     );
 }
 
-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 69%
rename from src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js
rename to src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx
index d6a402613c34..7578bcef2654 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.tsx
@@ -1,14 +1,15 @@
 import React, {memo} from 'react';
 import PDFView from '@components/PDFView';
-import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes';
+import type AttachmentViewPdfProps from './types';
 
-function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onToggleKeyboard, onLoadComplete, errorLabelStyles, style}) {
+function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onToggleKeyboard, onLoadComplete, errorLabelStyles, style}: AttachmentViewPdfProps) {
     return (
         <PDFView
+            // @ts-expect-error waiting for https://github.com/Expensify/App/issues/16186 merge
             onPress={onPress}
             isFocused={isFocused}
             sourceURL={encryptedSourceUrl}
-            fileName={file.name}
+            fileName={file?.name}
             style={style}
             onToggleKeyboard={onToggleKeyboard}
             onLoadComplete={onLoadComplete}
@@ -17,7 +18,4 @@ function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onTogg
     );
 }
 
-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..f1f141a625db
--- /dev/null
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/types.ts
@@ -0,0 +1,18 @@
+import type {StyleProp, ViewStyle} from 'react-native';
+import type {AttachmentViewProps} from '..';
+
+type AttachmentViewPdfProps = Pick<AttachmentViewProps, 'file' | 'onPress' | 'isUsedInCarousel' | 'isFocused' | 'onToggleKeyboard'> & {
+    encryptedSourceUrl: string;
+    onLoadComplete: (path: string) => void;
+
+    /** Additional style props */
+    style?: StyleProp<ViewStyle>;
+
+    /** Styles for the error label */
+    errorLabelStyles?: StyleProp<ViewStyle>;
+
+    /** Triggered when the PDF's onScaleChanged event is triggered */
+    onScaleChanged?: (scale: number) => void;
+};
+
+export default AttachmentViewPdfProps;
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewVideo/index.js b/src/components/Attachments/AttachmentView/AttachmentViewVideo/index.tsx
similarity index 52%
rename from src/components/Attachments/AttachmentView/AttachmentViewVideo/index.js
rename to src/components/Attachments/AttachmentView/AttachmentViewVideo/index.tsx
index 2b71e799beed..03e0c0252a66 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewVideo/index.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewVideo/index.tsx
@@ -1,28 +1,17 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import VideoPlayer from '@components/VideoPlayer';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
+import type {AttachmentViewProps} from '..';
 
-const propTypes = {
+type AttachmentViewVideoProps = Pick<AttachmentViewProps, 'duration' | 'isHovered'> & {
     /** Video file source URL */
-    source: PropTypes.string.isRequired,
+    source: string;
 
-    /** Whether the video is currently being hovered over */
-    isHovered: PropTypes.bool,
-
-    shouldUseSharedVideoElement: PropTypes.bool,
-
-    videoDuration: PropTypes.number,
-};
-
-const defaultProps = {
-    isHovered: false,
-    shouldUseSharedVideoElement: false,
-    videoDuration: 0,
+    shouldUseSharedVideoElement?: boolean;
 };
 
-function AttachmentViewVideo({source, isHovered, shouldUseSharedVideoElement, videoDuration}) {
+function AttachmentViewVideo({source, isHovered = false, shouldUseSharedVideoElement = false, duration = 0}: AttachmentViewVideoProps) {
     const {isSmallScreen} = useWindowDimensions();
     const styles = useThemeStyles();
 
@@ -31,14 +20,12 @@ function AttachmentViewVideo({source, isHovered, shouldUseSharedVideoElement, vi
             url={source}
             shouldUseSharedVideoElement={shouldUseSharedVideoElement && !isSmallScreen}
             isVideoHovered={isHovered}
-            videoDuration={videoDuration}
+            videoDuration={duration}
             style={[styles.w100, styles.h100]}
         />
     );
 }
 
-AttachmentViewVideo.propTypes = propTypes;
-AttachmentViewVideo.defaultProps = defaultProps;
 AttachmentViewVideo.displayName = 'AttachmentViewVideo';
 
 export default React.memo(AttachmentViewVideo);
diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.tsx
old mode 100755
new mode 100644
similarity index 66%
rename from src/components/Attachments/AttachmentView/index.js
rename to src/components/Attachments/AttachmentView/index.tsx
index 9fe37734e8ee..2685a5cef407
--- a/src/components/Attachments/AttachmentView/index.js
+++ b/src/components/Attachments/AttachmentView/index.tsx
@@ -1,10 +1,10 @@
 import Str from 'expensify-common/lib/str';
-import PropTypes from 'prop-types';
 import React, {memo, useEffect, useState} from 'react';
+import type {GestureResponderEvent, StyleProp, ViewStyle} from 'react-native';
 import {ActivityIndicator, View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
-import * as AttachmentsPropTypes from '@components/Attachments/propTypes';
+import type {Attachment, AttachmentSource} from '@components/Attachments/types';
 import DistanceEReceipt from '@components/DistanceEReceipt';
 import EReceipt from '@components/EReceipt';
 import Icon from '@components/Icon';
@@ -13,74 +13,61 @@ import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import {usePlaybackContext} from '@components/VideoPlayerContexts/PlaybackContext';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as CachedPDFPaths from '@libs/actions/CachedPDFPaths';
 import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
-import compose from '@libs/compose';
 import * as TransactionUtils from '@libs/TransactionUtils';
+import type {ColorValue} from '@styles/utils/types';
 import variables from '@styles/variables';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {Transaction} from '@src/types/onyx';
 import AttachmentViewImage from './AttachmentViewImage';
 import AttachmentViewPdf from './AttachmentViewPdf';
 import AttachmentViewVideo from './AttachmentViewVideo';
-import {attachmentViewDefaultProps, attachmentViewPropTypes} from './propTypes';
 
-const propTypes = {
-    ...attachmentViewPropTypes,
-    ...withLocalizePropTypes,
+type AttachmentViewOnyxProps = {
+    transaction: OnyxEntry<Transaction>;
+};
 
-    /** URL to full-sized attachment, SVG function, or numeric static image on native platforms */
-    source: AttachmentsPropTypes.attachmentSourcePropType.isRequired,
+type AttachmentViewProps = AttachmentViewOnyxProps &
+    Attachment & {
+        /** Whether this view is the active screen  */
+        isFocused?: boolean;
 
-    /** Flag to show/hide download icon */
-    shouldShowDownloadIcon: PropTypes.bool,
+        /** Function for handle on press */
+        onPress?: (e?: GestureResponderEvent | KeyboardEvent) => void;
 
-    /** Flag to show the loading indicator */
-    shouldShowLoadingSpinnerIcon: PropTypes.bool,
+        /** Whether this AttachmentView is shown as part of a AttachmentCarousel */
+        isUsedInCarousel?: boolean;
 
-    /** Notify parent that the UI should be modified to accommodate keyboard */
-    onToggleKeyboard: PropTypes.func,
+        isUsedInAttachmentModal?: boolean;
 
-    /** Extra styles to pass to View wrapper */
-    // eslint-disable-next-line react/forbid-prop-types
-    containerStyles: PropTypes.arrayOf(PropTypes.object),
+        /** Flag to show/hide download icon */
+        shouldShowDownloadIcon?: boolean;
 
-    /** Denotes whether it is a workspace avatar or not */
-    isWorkspaceAvatar: PropTypes.bool,
+        /** Flag to show the loading indicator */
+        shouldShowLoadingSpinnerIcon?: boolean;
 
-    /** Denotes whether it is an icon (ex: SVG) */
-    maybeIcon: PropTypes.bool,
+        /** Notify parent that the UI should be modified to accommodate keyboard */
+        onToggleKeyboard?: (shouldFadeOut: boolean) => void;
 
-    /** The id of the transaction related to the attachment */
-    // eslint-disable-next-line react/no-unused-prop-types
-    transactionID: PropTypes.string,
+        /** Extra styles to pass to View wrapper */
+        containerStyles?: StyleProp<ViewStyle>;
 
-    /** The id of the report action related to the attachment */
-    reportActionID: PropTypes.string,
+        /** Denotes whether it is a workspace avatar or not */
+        isWorkspaceAvatar?: boolean;
 
-    isHovered: PropTypes.bool,
+        /** Denotes whether it is an icon (ex: SVG) */
+        maybeIcon?: boolean;
 
-    optionalVideoDuration: PropTypes.number,
-};
+        fallbackSource?: AttachmentSource;
 
-const defaultProps = {
-    ...attachmentViewDefaultProps,
-    shouldShowDownloadIcon: false,
-    shouldShowLoadingSpinnerIcon: false,
-    onToggleKeyboard: () => {},
-    containerStyles: [],
-    isWorkspaceAvatar: false,
-    maybeIcon: false,
-    transactionID: '',
-    reportActionID: '',
-    isHovered: false,
-    optionalVideoDuration: 0,
-    fallbackSource: Expensicons.Gallery,
-};
+        isHovered?: boolean;
+    };
 
 function AttachmentView({
     source,
@@ -91,7 +78,6 @@ function AttachmentView({
     shouldShowDownloadIcon,
     containerStyles,
     onToggleKeyboard,
-    translate,
     isFocused,
     isUsedInCarousel,
     isUsedInAttachmentModal,
@@ -101,21 +87,22 @@ function AttachmentView({
     transaction,
     reportActionID,
     isHovered,
-    optionalVideoDuration,
-}) {
+    duration,
+}: AttachmentViewProps) {
+    const {translate} = useLocalize();
     const {updateCurrentlyPlayingURL} = usePlaybackContext();
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const [loadComplete, setLoadComplete] = useState(false);
-    const isVideo = (typeof source === 'string' && Str.isVideo(source)) || (file && Str.isVideo(file.name));
+    const isVideo = (typeof source === 'string' && Str.isVideo(source)) || (file?.name && Str.isVideo(file.name));
 
     useEffect(() => {
         if (!isFocused && !(file && isUsedInAttachmentModal)) {
             return;
         }
-        updateCurrentlyPlayingURL(isVideo ? source : null);
-    }, [isFocused, isVideo, source, updateCurrentlyPlayingURL, file, isUsedInAttachmentModal]);
+        updateCurrentlyPlayingURL(isVideo && typeof source === 'string' ? source : null);
+    }, [file, isFocused, isUsedInAttachmentModal, isVideo, source, updateCurrentlyPlayingURL]);
 
     const [imageError, setImageError] = useState(false);
 
@@ -123,11 +110,11 @@ function AttachmentView({
 
     // Handles case where source is a component (ex: SVG) or a number
     // Number may represent a SVG or an image
-    if ((maybeIcon && typeof source === 'number') || _.isFunction(source)) {
-        let iconFillColor = '';
-        let additionalStyles = [];
-        if (isWorkspaceAvatar) {
-            const defaultWorkspaceAvatarColor = StyleUtils.getDefaultWorkspaceAvatarColor(file.name);
+    if (typeof source === 'function' || (maybeIcon && typeof source === 'number')) {
+        let iconFillColor: ColorValue | undefined = '';
+        let additionalStyles: ViewStyle[] = [];
+        if (isWorkspaceAvatar && file) {
+            const defaultWorkspaceAvatarColor = StyleUtils.getDefaultWorkspaceAvatarColor(file.name ?? '');
             iconFillColor = defaultWorkspaceAvatarColor.fill;
             additionalStyles = [defaultWorkspaceAvatarColor];
         }
@@ -143,7 +130,7 @@ function AttachmentView({
         );
     }
 
-    if (TransactionUtils.hasEReceipt(transaction)) {
+    if (TransactionUtils.hasEReceipt(transaction) && transaction) {
         return (
             <View style={[styles.flex1, styles.alignItemsCenter]}>
                 <ScrollView
@@ -158,11 +145,11 @@ 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')))) {
-        const encryptedSourceUrl = isAuthTokenRequired ? addEncryptedAuthTokenToURL(source) : source;
+    if ((typeof source === 'string' && Str.isPDF(source)) || (file && Str.isPDF(file.name ?? translate('attachmentView.unknownFilename')))) {
+        const encryptedSourceUrl = isAuthTokenRequired ? addEncryptedAuthTokenToURL(source as string) : (source as string);
 
-        const onPDFLoadComplete = (path) => {
-            const id = (transaction && transaction.transactionID) || reportActionID;
+        const onPDFLoadComplete = (path: string) => {
+            const id = (transaction && transaction.transactionID) ?? reportActionID;
             if (path && id) {
                 CachedPDFPaths.add(id, path);
             }
@@ -177,34 +164,31 @@ function AttachmentView({
         return (
             <View style={[styles.flex1, styles.attachmentCarouselContainer]}>
                 <AttachmentViewPdf
-                    source={source}
                     file={file}
                     isFocused={isFocused}
-                    isAuthTokenRequired={isAuthTokenRequired}
                     encryptedSourceUrl={encryptedSourceUrl}
                     onPress={onPress}
                     onToggleKeyboard={onToggleKeyboard}
                     onLoadComplete={onPDFLoadComplete}
                     errorLabelStyles={isUsedInAttachmentModal ? [styles.textLabel, styles.textLarge] : [styles.cursorAuto]}
                     style={isUsedInAttachmentModal ? styles.imageModalPDF : styles.flex1}
-                    isUsedInCarousel={isUsedInCarousel}
                 />
             </View>
         );
     }
 
-    if (TransactionUtils.isDistanceRequest(transaction)) {
+    if (TransactionUtils.isDistanceRequest(transaction) && transaction) {
         return <DistanceEReceipt transaction={transaction} />;
     }
 
     // For this check we use both source and file.name since temporary file source is a blob
     // both PDFs and images will appear as images when pasted into the text field.
     // We also check for numeric source since this is how static images (used for preview) are represented in RN.
-    const isImage = typeof source === 'number' || Str.isImage(source);
-    if (isImage || (file && Str.isImage(file.name))) {
+    const isImage = typeof source === 'number' || (typeof source === 'string' && Str.isImage(source));
+    if (isImage || (file?.name && Str.isImage(file.name))) {
         if (imageError) {
             // AttachmentViewImage can't handle icon fallbacks, so we need to handle it here
-            if (typeof fallbackSource === 'number' || _.isFunction(fallbackSource)) {
+            if (typeof fallbackSource === 'number' || typeof fallbackSource === 'function') {
                 return (
                     <Icon
                         src={fallbackSource}
@@ -219,12 +203,10 @@ function AttachmentView({
 
         return (
             <AttachmentViewImage
-                url={imageError ? fallbackSource : source}
+                url={imageError && fallbackSource ? (fallbackSource as string) : (source as string)}
                 file={file}
                 isAuthTokenRequired={isAuthTokenRequired}
                 loadComplete={loadComplete}
-                isFocused={isFocused}
-                isUsedInCarousel={isUsedInCarousel}
                 isImage={isImage}
                 onPress={onPress}
                 onError={() => {
@@ -234,19 +216,19 @@ function AttachmentView({
         );
     }
 
-    if (isVideo) {
+    if ((isVideo ?? (file?.name && Str.isVideo(file.name))) && typeof source === 'string') {
         return (
             <AttachmentViewVideo
                 source={source}
                 shouldUseSharedVideoElement={isUsedInCarousel}
                 isHovered={isHovered}
-                videoDuration={optionalVideoDuration}
+                duration={duration}
             />
         );
     }
 
     return (
-        <View style={[styles.defaultAttachmentView, ...containerStyles]}>
+        <View style={[styles.defaultAttachmentView, containerStyles]}>
             <View style={styles.mr2}>
                 <Icon
                     fill={theme.icon}
@@ -254,7 +236,7 @@ function AttachmentView({
                 />
             </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}>
@@ -279,16 +261,14 @@ function AttachmentView({
     );
 }
 
-AttachmentView.propTypes = propTypes;
-AttachmentView.defaultProps = defaultProps;
 AttachmentView.displayName = 'AttachmentView';
 
-export default compose(
-    memo,
-    withLocalize,
-    withOnyx({
+export default memo(
+    withOnyx<AttachmentViewProps, AttachmentViewOnyxProps>({
         transaction: {
             key: ({transactionID}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
         },
-    }),
-)(AttachmentView);
+    })(AttachmentView),
+);
+
+export type {AttachmentViewProps};
diff --git a/src/components/Attachments/AttachmentView/propTypes.js b/src/components/Attachments/AttachmentView/propTypes.js
deleted file mode 100644
index 0a0d654912d3..000000000000
--- a/src/components/Attachments/AttachmentView/propTypes.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import PropTypes from 'prop-types';
-import * as AttachmentsPropTypes from '@components/Attachments/propTypes';
-
-const attachmentViewPropTypes = {
-    /** Whether source url requires authentication */
-    isAuthTokenRequired: PropTypes.bool,
-
-    /** 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,
-};
-
-const attachmentViewDefaultProps = {
-    isAuthTokenRequired: false,
-    file: {
-        name: '',
-    },
-    isFocused: false,
-    isSingleElement: false,
-    isUsedInCarousel: false,
-    isUsedInAttachmentModal: false,
-    onPress: undefined,
-    onScaleChanged: () => {},
-};
-
-export {attachmentViewPropTypes, attachmentViewDefaultProps};
diff --git a/src/components/Attachments/propTypes.js b/src/components/Attachments/propTypes.js
deleted file mode 100644
index 13adc468ce64..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.isRequired,
-});
-
-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.isRequired,
-});
-
-const attachmentsPropType = PropTypes.arrayOf(attachmentPropType);
-
-export {attachmentSourcePropType, attachmentFilePropType, attachmentPropType, attachmentsPropType};
diff --git a/src/components/Attachments/types.ts b/src/components/Attachments/types.ts
new file mode 100644
index 000000000000..835482ca99d9
--- /dev/null
+++ b/src/components/Attachments/types.ts
@@ -0,0 +1,30 @@
+import type {FileObject} from '@components/AttachmentModal';
+import type IconAsset from '@src/types/utils/IconAsset';
+
+type AttachmentSource = string | IconAsset | number;
+
+type Attachment = {
+    /** Report action ID of the attachment */
+    reportActionID?: string;
+
+    /** Whether source url requires authentication */
+    isAuthTokenRequired?: boolean;
+
+    /** URL to full-sized attachment, SVG function, or numeric static image on native platforms */
+    source: AttachmentSource;
+
+    /** File object can be an instance of File or Object */
+    file?: FileObject;
+
+    /** Whether the attachment has been flagged */
+    hasBeenFlagged?: boolean;
+
+    /** The id of the transaction related to the attachment */
+    transactionID?: string;
+
+    isReceipt?: boolean;
+
+    duration?: number;
+};
+
+export type {AttachmentSource, Attachment};
diff --git a/src/components/VideoPlayerContexts/PlaybackContext.tsx b/src/components/VideoPlayerContexts/PlaybackContext.tsx
index caad4ce5519b..fc07f3d20ea0 100644
--- a/src/components/VideoPlayerContexts/PlaybackContext.tsx
+++ b/src/components/VideoPlayerContexts/PlaybackContext.tsx
@@ -37,7 +37,7 @@ function PlaybackContextProvider({children}: ChildrenProps) {
     }, [currentVideoPlayerRef]);
 
     const updateCurrentlyPlayingURL = useCallback(
-        (url: string) => {
+        (url: string | null) => {
             if (currentlyPlayingURL && url !== currentlyPlayingURL) {
                 pauseVideo();
             }
diff --git a/src/components/VideoPlayerContexts/types.ts b/src/components/VideoPlayerContexts/types.ts
index 4abaaf7debb9..ae46d795f4e7 100644
--- a/src/components/VideoPlayerContexts/types.ts
+++ b/src/components/VideoPlayerContexts/types.ts
@@ -6,7 +6,7 @@ import type {PopoverMenuItem} from '@components/PopoverMenu';
 import type CONST from '@src/CONST';
 
 type PlaybackContext = {
-    updateCurrentlyPlayingURL: (url: string) => void;
+    updateCurrentlyPlayingURL: (url: string | null) => void;
     currentlyPlayingURL: string | null;
     originalParent: View | null;
     sharedElement: View | null;
diff --git a/src/pages/home/report/ReportAttachments.tsx b/src/pages/home/report/ReportAttachments.tsx
index de145d5ef7e6..82b49d1e260c 100644
--- a/src/pages/home/report/ReportAttachments.tsx
+++ b/src/pages/home/report/ReportAttachments.tsx
@@ -1,7 +1,7 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useCallback} from 'react';
-import type {Attachment} from '@components/AttachmentModal';
 import AttachmentModal from '@components/AttachmentModal';
+import type {Attachment} from '@components/Attachments/types';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
 import Navigation from '@libs/Navigation/Navigation';
 import type {AuthScreensParamList} from '@libs/Navigation/types';
diff --git a/src/types/modules/pusher.d.ts b/src/types/modules/pusher.d.ts
index e9aa50085e8d..ffcf7744773a 100644
--- a/src/types/modules/pusher.d.ts
+++ b/src/types/modules/pusher.d.ts
@@ -8,6 +8,7 @@ declare global {
 
     // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
     interface File {
+        name?: string;
         source: string;
         uri?: string;
     }