diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx
index 667c84432684..c915b2f227aa 100755
--- a/src/components/AttachmentModal.tsx
+++ b/src/components/AttachmentModal.tsx
@@ -63,12 +63,12 @@ type AttachmentModalOnyxProps = {
 };
 
 type ImagePickerResponse = {
-    height: number;
+    height?: number;
     name: string;
-    size: number;
+    size?: number | null;
     type: string;
     uri: string;
-    width: number;
+    width?: number;
 };
 
 type FileObject = Partial<File | ImagePickerResponse>;
@@ -284,14 +284,14 @@ function AttachmentModal({
     }, [transaction, report]);
 
     const isValidFile = useCallback((fileObject: FileObject) => {
-        if (fileObject.size !== undefined && fileObject.size > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) {
+        if (fileObject.size && fileObject.size > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) {
             setIsAttachmentInvalid(true);
             setAttachmentInvalidReasonTitle('attachmentPicker.attachmentTooLarge');
             setAttachmentInvalidReason('attachmentPicker.sizeExceeded');
             return false;
         }
 
-        if (fileObject.size !== undefined && fileObject.size < CONST.API_ATTACHMENT_VALIDATIONS.MIN_SIZE) {
+        if (fileObject.size && fileObject.size < CONST.API_ATTACHMENT_VALIDATIONS.MIN_SIZE) {
             setIsAttachmentInvalid(true);
             setAttachmentInvalidReasonTitle('attachmentPicker.attachmentTooSmall');
             setAttachmentInvalidReason('attachmentPicker.sizeNotMet');
@@ -627,4 +627,4 @@ export default withOnyx<AttachmentModalProps, AttachmentModalOnyxProps>({
     },
 })(memo(AttachmentModal));
 
-export type {FileObject};
+export type {Attachment, FileObject, ImagePickerResponse};
diff --git a/src/components/AttachmentPicker/attachmentPickerPropTypes.js b/src/components/AttachmentPicker/attachmentPickerPropTypes.js
deleted file mode 100644
index a3a346f5ea27..000000000000
--- a/src/components/AttachmentPicker/attachmentPickerPropTypes.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import PropTypes from 'prop-types';
-import CONST from '@src/CONST';
-
-const propTypes = {
-    /**
-     * A renderProp with the following interface
-     *
-     * @example
-     * <AttachmentPicker>
-     * {({openPicker}) => (
-     *     <Button
-     *         onPress={() => {
-     *             openPicker({
-     *                 onPicked: (file) => {
-     *                     // Display or upload File
-     *                 },
-     *             });
-     *         }}
-     *     />
-     * )}
-     * </AttachmentPicker>
-     * */
-    children: PropTypes.func.isRequired,
-
-    /** The types of files that can be selected with this picker. */
-    type: PropTypes.oneOf([CONST.ATTACHMENT_PICKER_TYPE.FILE, CONST.ATTACHMENT_PICKER_TYPE.IMAGE]),
-};
-
-const defaultProps = {
-    type: CONST.ATTACHMENT_PICKER_TYPE.FILE,
-};
-
-export {propTypes, defaultProps};
diff --git a/src/components/AttachmentPicker/index.native.js b/src/components/AttachmentPicker/index.native.tsx
similarity index 65%
rename from src/components/AttachmentPicker/index.native.js
rename to src/components/AttachmentPicker/index.native.tsx
index 0387ee087127..19244913174d 100644
--- a/src/components/AttachmentPicker/index.native.js
+++ b/src/components/AttachmentPicker/index.native.tsx
@@ -1,12 +1,12 @@
 import Str from 'expensify-common/lib/str';
-import lodashCompact from 'lodash/compact';
-import PropTypes from 'prop-types';
 import React, {useCallback, useMemo, useRef, useState} from 'react';
 import {Alert, Image as RNImage, View} from 'react-native';
 import RNFetchBlob from 'react-native-blob-util';
 import RNDocumentPicker from 'react-native-document-picker';
+import type {DocumentPickerOptions, DocumentPickerResponse} from 'react-native-document-picker';
 import {launchImageLibrary} from 'react-native-image-picker';
-import _ from 'underscore';
+import type {Asset, Callback, CameraOptions, ImagePickerResponse} from 'react-native-image-picker';
+import type {FileObject, ImagePickerResponse as FileResponse} from '@components/AttachmentModal';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import Popover from '@components/Popover';
@@ -17,19 +17,23 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import CONST from '@src/CONST';
-import {defaultProps as baseDefaultProps, propTypes as basePropTypes} from './attachmentPickerPropTypes';
-import launchCamera from './launchCamera';
-
-const propTypes = {
-    ...basePropTypes,
+import type {TranslationPaths} from '@src/languages/types';
+import type IconAsset from '@src/types/utils/IconAsset';
+import launchCamera from './launchCamera/launchCamera';
+import type BaseAttachmentPickerProps from './types';
 
+type AttachmentPickerProps = BaseAttachmentPickerProps & {
     /** If this value is true, then we exclude Camera option. */
-    shouldHideCameraOption: PropTypes.bool,
+    shouldHideCameraOption?: boolean;
 };
 
-const defaultProps = {
-    ...baseDefaultProps,
-    shouldHideCameraOption: false,
+type Item = {
+    /** The icon associated with the item. */
+    icon: IconAsset;
+    /** The key in the translations file to use for the title */
+    textTranslationKey: TranslationPaths;
+    /** Function to call when the user clicks the item */
+    pickAttachment: () => Promise<Asset[] | void | DocumentPickerResponse[]>;
 };
 
 /**
@@ -45,10 +49,8 @@ const imagePickerOptions = {
 
 /**
  * Return imagePickerOptions based on the type
- * @param {String} type
- * @returns {Object}
  */
-const getImagePickerOptions = (type) => {
+const getImagePickerOptions = (type: string): CameraOptions => {
     // mediaType property is one of the ImagePicker configuration to restrict types'
     const mediaType = type === CONST.ATTACHMENT_PICKER_TYPE.IMAGE ? 'photo' : 'mixed';
     return {
@@ -63,7 +65,7 @@ const getImagePickerOptions = (type) => {
  * @returns {Object}
  */
 
-const getDocumentPickerOptions = (type) => {
+const getDocumentPickerOptions = (type: string): DocumentPickerOptions<'ios' | 'android'> => {
     if (type === CONST.ATTACHMENT_PICKER_TYPE.IMAGE) {
         return {
             type: [RNDocumentPicker.types.images],
@@ -79,19 +81,16 @@ const getDocumentPickerOptions = (type) => {
 /**
  * The data returned from `show` is different on web and mobile, so use this function to ensure the data we
  * send to the xhr will be handled properly.
- *
- * @param {Object} fileData
- * @return {Promise}
  */
-const getDataForUpload = (fileData) => {
-    const fileName = fileData.fileName || fileData.name || 'chat_attachment';
-    const fileResult = {
+const getDataForUpload = (fileData: FileResponse): Promise<FileObject> => {
+    const fileName = fileData.name || 'chat_attachment';
+    const fileResult: FileObject = {
         name: FileUtils.cleanFileName(fileName),
         type: fileData.type,
         width: fileData.width,
         height: fileData.height,
-        uri: fileData.fileCopyUri || fileData.uri,
-        size: fileData.fileSize || fileData.size,
+        uri: fileData.uri,
+        size: fileData.size,
     };
 
     if (fileResult.size) {
@@ -109,16 +108,15 @@ const getDataForUpload = (fileData) => {
  * returns a "show attachment picker" method that takes
  * a callback. This is the ios/android implementation
  * opening a modal with attachment options
- * @param {propTypes} props
- * @returns {JSX.Element}
  */
-function AttachmentPicker({type, children, shouldHideCameraOption}) {
+function AttachmentPicker({type = CONST.ATTACHMENT_PICKER_TYPE.FILE, children, shouldHideCameraOption = false}: AttachmentPickerProps) {
     const styles = useThemeStyles();
     const [isVisible, setIsVisible] = useState(false);
 
-    const completeAttachmentSelection = useRef();
-    const onModalHide = useRef();
-    const onCanceled = useRef();
+    const completeAttachmentSelection = useRef<(data: FileObject) => void>(() => {});
+    const onModalHide = useRef<() => void>();
+    const onCanceled = useRef<() => void>(() => {});
+    const popoverRef = useRef(null);
 
     const {translate} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -126,20 +124,22 @@ function AttachmentPicker({type, children, shouldHideCameraOption}) {
     /**
      * A generic handling when we don't know the exact reason for an error
      */
-    const showGeneralAlert = useCallback(() => {
-        Alert.alert(translate('attachmentPicker.attachmentError'), translate('attachmentPicker.errorWhileSelectingAttachment'));
-    }, [translate]);
+    const showGeneralAlert = useCallback(
+        (message = translate('attachmentPicker.errorWhileSelectingAttachment')) => {
+            Alert.alert(translate('attachmentPicker.attachmentError'), message);
+        },
+        [translate],
+    );
 
     /**
      * Common image picker handling
      *
      * @param {function} imagePickerFunc - RNImagePicker.launchCamera or RNImagePicker.launchImageLibrary
-     * @returns {Promise<ImagePickerResponse>}
      */
     const showImagePicker = useCallback(
-        (imagePickerFunc) =>
+        (imagePickerFunc: (options: CameraOptions, callback: Callback) => Promise<ImagePickerResponse>): Promise<Asset[] | void> =>
             new Promise((resolve, reject) => {
-                imagePickerFunc(getImagePickerOptions(type), (response) => {
+                imagePickerFunc(getImagePickerOptions(type), (response: ImagePickerResponse) => {
                     if (response.didCancel) {
                         // When the user cancelled resolve with no attachment
                         return resolve();
@@ -166,10 +166,10 @@ function AttachmentPicker({type, children, shouldHideCameraOption}) {
     /**
      * Launch the DocumentPicker. Results are in the same format as ImagePicker
      *
-     * @returns {Promise<DocumentPickerResponse[]>}
+     * @returns {Promise<DocumentPickerResponse[] | void>}
      */
     const showDocumentPicker = useCallback(
-        () =>
+        (): Promise<DocumentPickerResponse[] | void> =>
             RNDocumentPicker.pick(getDocumentPickerOptions(type)).catch((error) => {
                 if (RNDocumentPicker.isCancel(error)) {
                     return;
@@ -181,13 +181,8 @@ function AttachmentPicker({type, children, shouldHideCameraOption}) {
         [showGeneralAlert, type],
     );
 
-    const menuItemData = useMemo(() => {
-        const data = lodashCompact([
-            !shouldHideCameraOption && {
-                icon: Expensicons.Camera,
-                textTranslationKey: 'attachmentPicker.takePhoto',
-                pickAttachment: () => showImagePicker(launchCamera),
-            },
+    const menuItemData: Item[] = useMemo(() => {
+        const data: Item[] = [
             {
                 icon: Expensicons.Gallery,
                 textTranslationKey: 'attachmentPicker.chooseFromGallery',
@@ -198,7 +193,14 @@ function AttachmentPicker({type, children, shouldHideCameraOption}) {
                 textTranslationKey: 'attachmentPicker.chooseDocument',
                 pickAttachment: showDocumentPicker,
             },
-        ]);
+        ];
+        if (!shouldHideCameraOption) {
+            data.unshift({
+                icon: Expensicons.Camera,
+                textTranslationKey: 'attachmentPicker.takePhoto',
+                pickAttachment: () => showImagePicker(launchCamera),
+            });
+        }
 
         return data;
     }, [showDocumentPicker, showImagePicker, shouldHideCameraOption]);
@@ -215,10 +217,10 @@ function AttachmentPicker({type, children, shouldHideCameraOption}) {
     /**
      * Opens the attachment modal
      *
-     * @param {function} onPickedHandler A callback that will be called with the selected attachment
-     * @param {function} onCanceledHandler A callback that will be called without a selected attachment
+     * @param onPickedHandler A callback that will be called with the selected attachment
+     * @param onCanceledHandler A callback that will be called without a selected attachment
      */
-    const open = (onPickedHandler, onCanceledHandler = () => {}) => {
+    const open = (onPickedHandler: (file: FileObject) => void, onCanceledHandler: () => void = () => {}) => {
         completeAttachmentSelection.current = onPickedHandler;
         onCanceled.current = onCanceledHandler;
         setIsVisible(true);
@@ -231,12 +233,8 @@ function AttachmentPicker({type, children, shouldHideCameraOption}) {
         setIsVisible(false);
     };
 
-    /**
-     * @param {Object} fileData
-     * @returns {Promise}
-     */
     const validateAndCompleteAttachmentSelection = useCallback(
-        (fileData) => {
+        (fileData: FileResponse) => {
             if (fileData.width === -1 || fileData.height === -1) {
                 showImageCorruptionAlert();
                 return Promise.resolve();
@@ -256,25 +254,40 @@ function AttachmentPicker({type, children, shouldHideCameraOption}) {
     /**
      * Handles the image/document picker result and
      * sends the selected attachment to the caller (parent component)
-     *
-     * @param {Array<ImagePickerResponse|DocumentPickerResponse>} attachments
-     * @returns {Promise}
      */
     const pickAttachment = useCallback(
-        (attachments = []) => {
-            if (attachments.length === 0) {
+        (attachments: Asset[] | DocumentPickerResponse[] | void = []): Promise<void> | undefined => {
+            if (!attachments || attachments.length === 0) {
                 onCanceled.current();
                 return Promise.resolve();
             }
-            const fileData = _.first(attachments);
-            if (Str.isImage(fileData.fileName || fileData.name)) {
-                RNImage.getSize(fileData.fileCopyUri || fileData.uri, (width, height) => {
-                    fileData.width = width;
-                    fileData.height = height;
-                    return validateAndCompleteAttachmentSelection(fileData);
+            const fileData = attachments[0];
+
+            if (!fileData) {
+                onCanceled.current();
+                return Promise.resolve();
+            }
+            /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
+            const fileDataName = ('fileName' in fileData && fileData.fileName) || ('name' in fileData && fileData.name) || '';
+            const fileDataUri = ('fileCopyUri' in fileData && fileData.fileCopyUri) || ('uri' in fileData && fileData.uri) || '';
+
+            const fileDataObject: FileResponse = {
+                name: fileDataName ?? '',
+                uri: fileDataUri,
+                size: ('size' in fileData && fileData.size) || ('fileSize' in fileData && fileData.fileSize) || null,
+                type: fileData.type ?? '',
+                width: ('width' in fileData && fileData.width) || undefined,
+                height: ('height' in fileData && fileData.height) || undefined,
+            };
+            /* eslint-enable @typescript-eslint/prefer-nullish-coalescing */
+            if (fileDataName && Str.isImage(fileDataName)) {
+                RNImage.getSize(fileDataUri, (width, height) => {
+                    fileDataObject.width = width;
+                    fileDataObject.height = height;
+                    validateAndCompleteAttachmentSelection(fileDataObject);
                 });
             } else {
-                return validateAndCompleteAttachmentSelection(fileData);
+                return validateAndCompleteAttachmentSelection(fileDataObject);
             }
         },
         [validateAndCompleteAttachmentSelection],
@@ -287,20 +300,17 @@ function AttachmentPicker({type, children, shouldHideCameraOption}) {
      * @param {Function} item.pickAttachment
      */
     const selectItem = useCallback(
-        (item) => {
+        (item: Item) => {
             /* setTimeout delays execution to the frame after the modal closes
              * without this on iOS closing the modal closes the gallery/camera as well */
-            onModalHide.current = () =>
-                setTimeout(
-                    () =>
-                        item
-                            .pickAttachment()
-                            .then(pickAttachment)
-                            .catch(console.error)
-                            .finally(() => delete onModalHide.current),
-                    200,
-                );
-
+            onModalHide.current = () => {
+                setTimeout(() => {
+                    item.pickAttachment()
+                        .then((result) => pickAttachment(result))
+                        .catch(console.error)
+                        .finally(() => delete onModalHide.current);
+                }, 200);
+            };
             close();
         },
         [pickAttachment],
@@ -322,10 +332,8 @@ function AttachmentPicker({type, children, shouldHideCameraOption}) {
 
     /**
      * Call the `children` renderProp with the interface defined in propTypes
-     *
-     * @returns {React.ReactNode}
      */
-    const renderChildren = () =>
+    const renderChildren = (): React.ReactNode =>
         children({
             openPicker: ({onPicked, onCanceled: newOnCanceled}) => open(onPicked, newOnCanceled),
         });
@@ -338,11 +346,11 @@ function AttachmentPicker({type, children, shouldHideCameraOption}) {
                     onCanceled.current();
                 }}
                 isVisible={isVisible}
-                anchorPosition={styles.createMenuPosition}
+                anchorRef={popoverRef}
                 onModalHide={onModalHide.current}
             >
                 <View style={!isSmallScreenWidth && styles.createMenuContainer}>
-                    {_.map(menuItemData, (item, menuIndex) => (
+                    {menuItemData.map((item, menuIndex) => (
                         <MenuItem
                             key={item.textTranslationKey}
                             icon={item.icon}
@@ -358,8 +366,6 @@ function AttachmentPicker({type, children, shouldHideCameraOption}) {
     );
 }
 
-AttachmentPicker.propTypes = propTypes;
-AttachmentPicker.defaultProps = defaultProps;
 AttachmentPicker.displayName = 'AttachmentPicker';
 
 export default AttachmentPicker;
diff --git a/src/components/AttachmentPicker/index.js b/src/components/AttachmentPicker/index.tsx
similarity index 78%
rename from src/components/AttachmentPicker/index.js
rename to src/components/AttachmentPicker/index.tsx
index 24024eae6515..a6ff9cb8d27a 100644
--- a/src/components/AttachmentPicker/index.js
+++ b/src/components/AttachmentPicker/index.tsx
@@ -1,14 +1,12 @@
 import React, {useRef} from 'react';
 import Visibility from '@libs/Visibility';
 import CONST from '@src/CONST';
-import {defaultProps, propTypes} from './attachmentPickerPropTypes';
+import type AttachmentPickerProps from './types';
 
 /**
  * Returns acceptable FileTypes based on ATTACHMENT_PICKER_TYPE
- * @param {String} type
- * @returns {String|undefined} Picker will accept all file types when its undefined
  */
-function getAcceptableFileTypes(type) {
+function getAcceptableFileTypes(type: string): string | undefined {
     if (type !== CONST.ATTACHMENT_PICKER_TYPE.IMAGE) {
         return;
     }
@@ -22,13 +20,11 @@ function getAcceptableFileTypes(type) {
  * a callback. This is the web/mWeb/desktop version since
  * on a Browser we must append a hidden input to the DOM
  * and listen to onChange event.
- * @param {propTypes} props
- * @returns {JSX.Element}
  */
-function AttachmentPicker(props) {
-    const fileInput = useRef();
-    const onPicked = useRef();
-    const onCanceled = useRef(() => {});
+function AttachmentPicker({children, type = CONST.ATTACHMENT_PICKER_TYPE.FILE}: AttachmentPickerProps): React.JSX.Element {
+    const fileInput = useRef<HTMLInputElement>(null);
+    const onPicked = useRef<(file: File) => void>(() => {});
+    const onCanceled = useRef<() => void>(() => {});
 
     return (
         <>
@@ -37,6 +33,10 @@ function AttachmentPicker(props) {
                 type="file"
                 ref={fileInput}
                 onChange={(e) => {
+                    if (!e.target.files) {
+                        return;
+                    }
+
                     const file = e.target.files[0];
 
                     if (file) {
@@ -45,7 +45,9 @@ function AttachmentPicker(props) {
                     }
 
                     // Cleanup after selecting a file to start from a fresh state
-                    fileInput.current.value = null;
+                    if (fileInput.current) {
+                        fileInput.current.value = '';
+                    }
                 }}
                 // We are stopping the event propagation because triggering the `click()` on the hidden input
                 // causes the event to unexpectedly bubble up to anything wrapping this component e.g. Pressable
@@ -72,19 +74,18 @@ function AttachmentPicker(props) {
                         {once: true},
                     );
                 }}
-                accept={getAcceptableFileTypes(props.type)}
+                accept={getAcceptableFileTypes(type)}
             />
-            {props.children({
+            {children({
                 openPicker: ({onPicked: newOnPicked, onCanceled: newOnCanceled = () => {}}) => {
                     onPicked.current = newOnPicked;
-                    fileInput.current.click();
+                    fileInput.current?.click();
                     onCanceled.current = newOnCanceled;
                 },
             })}
         </>
     );
 }
+AttachmentPicker.displayName = 'AttachmentPicker';
 
-AttachmentPicker.propTypes = propTypes;
-AttachmentPicker.defaultProps = defaultProps;
 export default AttachmentPicker;
diff --git a/src/components/AttachmentPicker/launchCamera.android.js b/src/components/AttachmentPicker/launchCamera/launchCamera.android.ts
similarity index 69%
rename from src/components/AttachmentPicker/launchCamera.android.js
rename to src/components/AttachmentPicker/launchCamera/launchCamera.android.ts
index b431c55e756d..c4359b06d619 100644
--- a/src/components/AttachmentPicker/launchCamera.android.js
+++ b/src/components/AttachmentPicker/launchCamera/launchCamera.android.ts
@@ -1,25 +1,23 @@
 import {PermissionsAndroid} from 'react-native';
-import {launchCamera} from 'react-native-image-picker';
+import {launchCamera as launchCameraImagePicker} from 'react-native-image-picker';
+import type {LaunchCamera} from './types';
+import {ErrorLaunchCamera} from './types';
 
 /**
  * Launching the camera for Android involves checking for permissions
  * And only then starting the camera
  * If the user deny permission the callback will be called with an error response
  * in the same format as the error returned by react-native-image-picker
- * @param {CameraOptions} options
- * @param {function} callback - callback called with the result
  */
-export default function launchCameraAndroid(options, callback) {
+const launchCamera: LaunchCamera = (options, callback) => {
     // Checks current camera permissions and prompts the user in case they aren't granted
     PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA)
         .then((permission) => {
             if (permission !== PermissionsAndroid.RESULTS.GRANTED) {
-                const error = new Error('User did not grant permissions');
-                error.errorCode = 'permission';
-                throw error;
+                throw new ErrorLaunchCamera('User did not grant permissions', 'permission');
             }
 
-            launchCamera(options, callback);
+            launchCameraImagePicker(options, callback);
         })
         .catch((error) => {
             /* Intercept the permission error as well as any other errors and call the callback
@@ -29,4 +27,6 @@ export default function launchCameraAndroid(options, callback) {
                 errorCode: error.errorCode || 'others',
             });
         });
-}
+};
+
+export default launchCamera;
diff --git a/src/components/AttachmentPicker/launchCamera.ios.js b/src/components/AttachmentPicker/launchCamera/launchCamera.ios.ts
similarity index 69%
rename from src/components/AttachmentPicker/launchCamera.ios.js
rename to src/components/AttachmentPicker/launchCamera/launchCamera.ios.ts
index d6e3518d7188..7015d4d9ed13 100644
--- a/src/components/AttachmentPicker/launchCamera.ios.js
+++ b/src/components/AttachmentPicker/launchCamera/launchCamera.ios.ts
@@ -1,25 +1,23 @@
-import {launchCamera} from 'react-native-image-picker';
+import {launchCamera as launchCameraImagePicker} from 'react-native-image-picker';
 import {PERMISSIONS, request, RESULTS} from 'react-native-permissions';
+import type {LaunchCamera} from './types';
+import {ErrorLaunchCamera} from './types';
 
 /**
  * Launching the camera for iOS involves checking for permissions
  * And only then starting the camera
  * If the user deny permission the callback will be called with an error response
  * in the same format as the error returned by react-native-image-picker
- * @param {CameraOptions} options
- * @param {function} callback - callback called with the result
  */
-export default function launchCameraIOS(options, callback) {
+const launchCamera: LaunchCamera = (options, callback) => {
     // Checks current camera permissions and prompts the user in case they aren't granted
     request(PERMISSIONS.IOS.CAMERA)
         .then((permission) => {
             if (permission !== RESULTS.GRANTED) {
-                const error = new Error('User did not grant permissions');
-                error.errorCode = 'permission';
-                throw error;
+                throw new ErrorLaunchCamera('User did not grant permissions', 'permission');
             }
 
-            launchCamera(options, callback);
+            launchCameraImagePicker(options, callback);
         })
         .catch((error) => {
             /* Intercept the permission error as well as any other errors and call the callback
@@ -29,4 +27,6 @@ export default function launchCameraIOS(options, callback) {
                 errorCode: error.errorCode || 'others',
             });
         });
-}
+};
+
+export default launchCamera;
diff --git a/src/components/AttachmentPicker/launchCamera.js b/src/components/AttachmentPicker/launchCamera/launchCamera.ts
similarity index 100%
rename from src/components/AttachmentPicker/launchCamera.js
rename to src/components/AttachmentPicker/launchCamera/launchCamera.ts
diff --git a/src/components/AttachmentPicker/launchCamera/types.ts b/src/components/AttachmentPicker/launchCamera/types.ts
new file mode 100644
index 000000000000..89617a8f8022
--- /dev/null
+++ b/src/components/AttachmentPicker/launchCamera/types.ts
@@ -0,0 +1,114 @@
+/**
+ * A callback function used to handle the response from the image picker.
+ *
+ * @param response - The response object containing information about the picked images or any errors encountered.
+ */
+type Callback = (response: ImagePickerResponse) => void;
+
+type OptionsCommon = {
+    /** Specifies the type of media to be captured. */
+    mediaType: MediaType;
+    /** Specifies the maximum width of the media to be captured. */
+    maxWidth?: number;
+    /** Specifies the maximum height of the media to be captured. */
+    maxHeight?: number;
+    /** Specifies the quality of the photo to be captured. */
+    quality?: PhotoQuality;
+    /** Specifies the video quality for video capture. */
+    videoQuality?: AndroidVideoOptions | IOSVideoOptions;
+    /** Specifies whether to include the media in base64 format. */
+    includeBase64?: boolean;
+    /** Specifies whether to include extra information about the captured media. */
+    includeExtra?: boolean;
+    /** Specifies the presentation style for the media picker. */
+    presentationStyle?: 'currentContext' | 'fullScreen' | 'pageSheet' | 'formSheet' | 'popover' | 'overFullScreen' | 'overCurrentContext';
+};
+
+type ImageLibraryOptions = OptionsCommon & {
+    /** Specifies the maximum number of images that can be selected from the library. */
+    selectionLimit?: number;
+};
+
+type CameraOptions = OptionsCommon & {
+    /** Specifies the maximum duration limit. */
+    durationLimit?: number;
+    /** Specifies whether to save captured media. */
+    saveToPhotos?: boolean;
+    /** Specifies the type of camera to be used. */
+    cameraType?: CameraType;
+};
+
+type Asset = {
+    /** Base64 representation of the asset. */
+    base64?: string;
+    /** URI pointing to the asset. */
+    uri?: string;
+    /** Width of the asset. */
+    width?: number;
+    /** Height of the asset. */
+    height?: number;
+    /** Size of the asset file in bytes. */
+    fileSize?: number;
+    /** Type of the asset. */
+    type?: string;
+    /** Name of the asset file. */
+    fileName?: string;
+    /** Duration of the asset. */
+    duration?: number;
+    /** Bitrate of the asset. */
+    bitrate?: number;
+    /** Timestamp of when the asset was created or modified. */
+    timestamp?: string;
+    /** ID of the asset. */
+    id?: string;
+};
+
+type ImagePickerResponse = {
+    /** Indicates whether the image picker operation was canceled. */
+    didCancel?: boolean;
+    /** The error code, if an error occurred during the image picking process. */
+    errorCode?: ErrorCode;
+    /** A descriptive error message, if an error occurred during the image picking process. */
+    errorMessage?: string;
+    /** An array of assets representing the picked images. */
+    assets?: Asset[];
+};
+
+/** Represents the quality options. */
+type PhotoQuality = 0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1;
+
+/** Represents the type of camera to be used. */
+type CameraType = 'back' | 'front';
+
+/** Represents the type of media to be captured. */
+type MediaType = 'photo' | 'video' | 'mixed';
+
+/** Represents the quality options for video capture on Android devices. */
+type AndroidVideoOptions = 'low' | 'high';
+
+/** Represents the quality options for video capture on iOS devices. */
+type IOSVideoOptions = 'low' | 'medium' | 'high';
+
+/** Represents various error codes that may occur during camera operations. */
+type ErrorCode = 'camera_unavailable' | 'permission' | 'others';
+
+class ErrorLaunchCamera extends Error {
+    /** The error code associated with the error. */
+    errorCode: ErrorCode;
+
+    constructor(message: string, errorCode: ErrorCode) {
+        super(message);
+        this.errorCode = errorCode;
+    }
+}
+
+/**
+ * A function used to launch the camera with specified options and handle the callback.
+ *
+ * @param options - The options for the camera, specifying various settings.
+ * @param callback - The callback function to handle the response from the camera operation.
+ */
+type LaunchCamera = (options: CameraOptions, callback: Callback) => void;
+
+export {ErrorLaunchCamera};
+export type {CameraOptions, Callback, ErrorCode, ImagePickerResponse, Asset, ImageLibraryOptions, LaunchCamera};
diff --git a/src/components/AttachmentPicker/types.ts b/src/components/AttachmentPicker/types.ts
new file mode 100644
index 000000000000..445d79bce07a
--- /dev/null
+++ b/src/components/AttachmentPicker/types.ts
@@ -0,0 +1,45 @@
+import type {ReactNode} from 'react';
+import type {ValueOf} from 'type-fest';
+import type {FileObject} from '@components/AttachmentModal';
+import type CONST from '@src/CONST';
+
+type PickerOptions = {
+    /** A callback that will be called with the selected attachment. */
+    onPicked: (file: FileObject) => void;
+    /** A callback that will be called without a selected attachment. */
+    onCanceled?: () => void;
+};
+
+/**
+ * A function used to open a picker with specified options.
+ *
+ * @param options - The options for the picker, including callbacks for handling picked file and cancellation.
+ */
+type OpenPickerFunction = (options: PickerOptions) => void;
+
+type AttachmentPickerProps = {
+    /**
+     * A renderProp with the following interface
+     *
+     * @example
+     * <AttachmentPicker>
+     * {({openPicker}) => (
+     *     <Button
+     *         onPress={() => {
+     *             openPicker({
+     *                 onPicked: (file) => {
+     *                     // Display or upload File
+     *                 },
+     *             });
+     *         }}
+     *     />
+     * )}
+     * </AttachmentPicker>
+     * */
+    children: (props: {openPicker: OpenPickerFunction}) => ReactNode;
+
+    /** The types of files that can be selected with this picker. */
+    type?: ValueOf<typeof CONST.ATTACHMENT_PICKER_TYPE>;
+};
+
+export default AttachmentPickerProps;
diff --git a/src/components/AvatarWithImagePicker.tsx b/src/components/AvatarWithImagePicker.tsx
index e39e940ebf5c..d803aa97fd0f 100644
--- a/src/components/AvatarWithImagePicker.tsx
+++ b/src/components/AvatarWithImagePicker.tsx
@@ -16,6 +16,7 @@ import type {TranslationPaths} from '@src/languages/types';
 import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
 import type IconAsset from '@src/types/utils/IconAsset';
 import AttachmentModal from './AttachmentModal';
+import type {FileObject} from './AttachmentModal';
 import AttachmentPicker from './AttachmentPicker';
 import Avatar from './Avatar';
 import AvatarCropModal from './AvatarCropModal/AvatarCropModal';
@@ -34,7 +35,7 @@ type ErrorData = {
 };
 
 type OpenPickerParams = {
-    onPicked: (image: File) => void;
+    onPicked: (image: FileObject) => void;
 };
 type OpenPicker = (args: OpenPickerParams) => void;
 
@@ -178,7 +179,7 @@ function AvatarWithImagePicker({
     /**
      * Check if the attachment extension is allowed.
      */
-    const isValidExtension = (image: File): boolean => {
+    const isValidExtension = (image: FileObject): boolean => {
         const {fileExtension} = FileUtils.splitExtensionFromFileName(image?.name ?? '');
         return CONST.AVATAR_ALLOWED_EXTENSIONS.some((extension) => extension === fileExtension.toLowerCase());
     };
@@ -186,12 +187,12 @@ function AvatarWithImagePicker({
     /**
      * Check if the attachment size is less than allowed size.
      */
-    const isValidSize = (image: File): boolean => (image?.size ?? 0) < CONST.AVATAR_MAX_ATTACHMENT_SIZE;
+    const isValidSize = (image: FileObject): boolean => (image?.size ?? 0) < CONST.AVATAR_MAX_ATTACHMENT_SIZE;
 
     /**
      * Check if the attachment resolution matches constraints.
      */
-    const isValidResolution = (image: File): Promise<boolean> =>
+    const isValidResolution = (image: FileObject): Promise<boolean> =>
         getImageResolution(image).then(
             ({height, width}) => height >= CONST.AVATAR_MIN_HEIGHT_PX && width >= CONST.AVATAR_MIN_WIDTH_PX && height <= CONST.AVATAR_MAX_HEIGHT_PX && width <= CONST.AVATAR_MAX_WIDTH_PX,
         );
@@ -199,7 +200,7 @@ function AvatarWithImagePicker({
     /**
      * Validates if an image has a valid resolution and opens an avatar crop modal
      */
-    const showAvatarCropModal = (image: File) => {
+    const showAvatarCropModal = (image: FileObject) => {
         if (!isValidExtension(image)) {
             setError('avatarWithImagePicker.notAllowedExtension', {allowedExtensions: CONST.AVATAR_ALLOWED_EXTENSIONS});
             return;
@@ -225,8 +226,8 @@ function AvatarWithImagePicker({
             setIsMenuVisible(false);
             setImageData({
                 uri: image.uri ?? '',
-                name: image.name,
-                type: image.type,
+                name: image.name ?? '',
+                type: image.type ?? '',
             });
         });
     };
@@ -349,11 +350,7 @@ function AvatarWithImagePicker({
                     maybeIcon={isUsingDefaultAvatar}
                 >
                     {({show}) => (
-                        <AttachmentPicker
-                            // @ts-expect-error TODO: Remove this once AttachmentPicker (https://github.com/Expensify/App/issues/25134) is migrated to TypeScript.
-                            type={CONST.ATTACHMENT_PICKER_TYPE.IMAGE}
-                        >
-                            {/* @ts-expect-error TODO: Remove this once AttachmentPicker (https://github.com/Expensify/App/issues/25134) is migrated to TypeScript. */}
+                        <AttachmentPicker type={CONST.ATTACHMENT_PICKER_TYPE.IMAGE}>
                             {({openPicker}) => {
                                 const menuItems = createMenuItems(openPicker);
 
diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx
index 95533db02f06..4bef463a3c55 100644
--- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx
+++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx
@@ -192,7 +192,6 @@ function AttachmentPickerWithMenuItems({
 
     return (
         <AttachmentPicker>
-            {/* @ts-expect-error TODO: Remove this once AttachmentPicker (https://github.com/Expensify/App/issues/25134) is migrated to TypeScript. */}
             {({openPicker}) => {
                 const triggerAttachmentPicker = () => {
                     onTriggerAttachmentPicker();