diff --git a/src/components/ConfirmContent.js b/src/components/ConfirmContent.js
deleted file mode 100644
index 13685c7392bb..000000000000
--- a/src/components/ConfirmContent.js
+++ /dev/null
@@ -1,173 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {View} from 'react-native';
-import _ from 'underscore';
-import useLocalize from '@hooks/useLocalize';
-import useNetwork from '@hooks/useNetwork';
-import useTheme from '@hooks/useTheme';
-import useThemeStyles from '@hooks/useThemeStyles';
-import variables from '@styles/variables';
-import Button from './Button';
-import Header from './Header';
-import Icon from './Icon';
-import sourcePropTypes from './Image/sourcePropTypes';
-import Text from './Text';
-
-const propTypes = {
-    /** Title of the modal */
-    title: PropTypes.string.isRequired,
-
-    /** A callback to call when the form has been submitted */
-    onConfirm: PropTypes.func.isRequired,
-
-    /** A callback to call when the form has been closed */
-    onCancel: PropTypes.func,
-
-    /** Confirm button text */
-    confirmText: PropTypes.string,
-
-    /** Cancel button text */
-    cancelText: PropTypes.string,
-
-    /** Modal content text/element */
-    prompt: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-
-    /** Whether we should use the success button color */
-    success: PropTypes.bool,
-
-    /** Whether we should use the danger button color. Use if the action is destructive */
-    danger: PropTypes.bool,
-
-    /** Whether we should disable the confirm button when offline */
-    shouldDisableConfirmButtonWhenOffline: PropTypes.bool,
-
-    /** Whether we should show the cancel button */
-    shouldShowCancelButton: PropTypes.bool,
-
-    /** Icon to display above the title */
-    iconSource: PropTypes.oneOfType([PropTypes.string, sourcePropTypes]),
-
-    /** Whether to center the icon / text content */
-    shouldCenterContent: PropTypes.bool,
-
-    /** Whether to stack the buttons */
-    shouldStackButtons: PropTypes.bool,
-
-    /** Styles for title */
-    // eslint-disable-next-line react/forbid-prop-types
-    titleStyles: PropTypes.arrayOf(PropTypes.object),
-
-    /** Styles for prompt */
-    // eslint-disable-next-line react/forbid-prop-types
-    promptStyles: PropTypes.arrayOf(PropTypes.object),
-
-    /** Styles for view */
-    // eslint-disable-next-line react/forbid-prop-types
-    contentStyles: PropTypes.arrayOf(PropTypes.object),
-
-    /** Styles for icon */
-    // eslint-disable-next-line react/forbid-prop-types
-    iconAdditionalStyles: PropTypes.arrayOf(PropTypes.object),
-};
-
-const defaultProps = {
-    confirmText: '',
-    cancelText: '',
-    prompt: '',
-    success: true,
-    danger: false,
-    onCancel: () => {},
-    shouldDisableConfirmButtonWhenOffline: false,
-    shouldShowCancelButton: true,
-    contentStyles: [],
-    iconSource: null,
-    shouldCenterContent: false,
-    shouldStackButtons: true,
-    titleStyles: [],
-    promptStyles: [],
-    iconAdditionalStyles: [],
-};
-
-function ConfirmContent(props) {
-    const styles = useThemeStyles();
-    const theme = useTheme();
-    const {translate} = useLocalize();
-    const {isOffline} = useNetwork();
-
-    const isCentered = props.shouldCenterContent;
-
-    return (
-        <View style={[styles.m5, ...props.contentStyles]}>
-            <View style={isCentered ? [styles.alignItemsCenter, styles.mb6] : []}>
-                {!_.isEmpty(props.iconSource) ||
-                    (_.isFunction(props.iconSource) && (
-                        <View style={[styles.flexRow, styles.mb3]}>
-                            <Icon
-                                src={props.iconSource}
-                                fill={theme.icon}
-                                width={variables.appModalAppIconSize}
-                                height={variables.appModalAppIconSize}
-                                additionalStyles={[...props.iconAdditionalStyles]}
-                            />
-                        </View>
-                    ))}
-
-                <View style={[styles.flexRow, isCentered ? {} : styles.mb4]}>
-                    <Header
-                        title={props.title}
-                        textStyles={[...props.titleStyles]}
-                    />
-                </View>
-
-                {_.isString(props.prompt) ? <Text style={[...props.promptStyles, isCentered ? styles.textAlignCenter : {}]}>{props.prompt}</Text> : props.prompt}
-            </View>
-
-            {props.shouldStackButtons ? (
-                <>
-                    <Button
-                        success={props.success}
-                        danger={props.danger}
-                        style={[styles.mt4]}
-                        onPress={props.onConfirm}
-                        pressOnEnter
-                        text={props.confirmText || translate('common.yes')}
-                        isDisabled={isOffline && props.shouldDisableConfirmButtonWhenOffline}
-                    />
-                    {props.shouldShowCancelButton && (
-                        <Button
-                            style={[styles.mt3, styles.noSelect]}
-                            onPress={props.onCancel}
-                            text={props.cancelText || translate('common.no')}
-                        />
-                    )}
-                </>
-            ) : (
-                <View style={[styles.flexRow, styles.gap4]}>
-                    {props.shouldShowCancelButton && (
-                        <Button
-                            style={[styles.noSelect, styles.flex1]}
-                            onPress={props.onCancel}
-                            text={props.cancelText || translate('common.no')}
-                            medium
-                        />
-                    )}
-                    <Button
-                        success={props.success}
-                        danger={props.danger}
-                        style={[styles.flex1]}
-                        onPress={props.onConfirm}
-                        pressOnEnter
-                        text={props.confirmText || translate('common.yes')}
-                        isDisabled={isOffline && props.shouldDisableConfirmButtonWhenOffline}
-                        medium
-                    />
-                </View>
-            )}
-        </View>
-    );
-}
-
-ConfirmContent.propTypes = propTypes;
-ConfirmContent.defaultProps = defaultProps;
-ConfirmContent.displayName = 'ConfirmContent';
-export default ConfirmContent;
diff --git a/src/components/ConfirmContent.tsx b/src/components/ConfirmContent.tsx
new file mode 100644
index 000000000000..9e4ffa8720da
--- /dev/null
+++ b/src/components/ConfirmContent.tsx
@@ -0,0 +1,163 @@
+import React, {ReactNode} from 'react';
+import {StyleProp, TextStyle, View, ViewStyle} from 'react-native';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+import IconAsset from '@src/types/utils/IconAsset';
+import Button from './Button';
+import Header from './Header';
+import Icon from './Icon';
+import Text from './Text';
+
+type ConfirmContentProps = {
+    /** Title of the modal */
+    title: string;
+
+    /** A callback to call when the form has been submitted */
+    onConfirm: () => void;
+
+    /** A callback to call when the form has been closed */
+    onCancel?: () => void;
+
+    /** Confirm button text */
+    confirmText?: string;
+
+    /** Cancel button text */
+    cancelText?: string;
+
+    /** Modal content text/element */
+    prompt?: string | ReactNode;
+
+    /** Whether we should use the success button color */
+    success?: boolean;
+
+    /** Whether we should use the danger button color. Use if the action is destructive */
+    danger?: boolean;
+
+    /** Whether we should disable the confirm button when offline */
+    shouldDisableConfirmButtonWhenOffline?: boolean;
+
+    /** Whether we should show the cancel button */
+    shouldShowCancelButton?: boolean;
+
+    /** Icon to display above the title */
+    iconSource?: IconAsset;
+
+    /** Whether to center the icon / text content */
+    shouldCenterContent?: boolean;
+
+    /** Whether to stack the buttons */
+    shouldStackButtons?: boolean;
+
+    /** Styles for title */
+    titleStyles?: StyleProp<TextStyle>;
+
+    /** Styles for prompt */
+    promptStyles?: StyleProp<TextStyle>;
+
+    /** Styles for view */
+    contentStyles?: StyleProp<ViewStyle>;
+
+    /** Styles for icon */
+    iconAdditionalStyles?: StyleProp<ViewStyle>;
+};
+
+function ConfirmContent({
+    title,
+    onConfirm,
+    onCancel = () => {},
+    confirmText = '',
+    cancelText = '',
+    prompt = '',
+    success = true,
+    danger = false,
+    shouldDisableConfirmButtonWhenOffline = false,
+    shouldShowCancelButton = false,
+    iconSource,
+    shouldCenterContent = false,
+    shouldStackButtons = true,
+    titleStyles,
+    promptStyles,
+    contentStyles,
+    iconAdditionalStyles,
+}: ConfirmContentProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const theme = useTheme();
+    const {isOffline} = useNetwork();
+
+    const isCentered = shouldCenterContent;
+
+    return (
+        <View style={[styles.m5, contentStyles]}>
+            <View style={isCentered ? [styles.alignItemsCenter, styles.mb6] : []}>
+                {typeof iconSource === 'function' && (
+                    <View style={[styles.flexRow, styles.mb3]}>
+                        <Icon
+                            src={iconSource}
+                            fill={theme.icon}
+                            width={variables.appModalAppIconSize}
+                            height={variables.appModalAppIconSize}
+                            additionalStyles={iconAdditionalStyles}
+                        />
+                    </View>
+                )}
+                <View style={[styles.flexRow, isCentered ? {} : styles.mb4]}>
+                    <Header
+                        title={title}
+                        textStyles={titleStyles}
+                    />
+                </View>
+                {typeof prompt === 'string' ? <Text style={[promptStyles, isCentered ? styles.textAlignCenter : {}]}>{prompt}</Text> : prompt}
+            </View>
+
+            {shouldStackButtons ? (
+                <>
+                    <Button
+                        success={success}
+                        danger={danger}
+                        style={[styles.mt4]}
+                        onPress={onConfirm}
+                        pressOnEnter
+                        text={confirmText || translate('common.yes')}
+                        isDisabled={isOffline && shouldDisableConfirmButtonWhenOffline}
+                    />
+                    {shouldShowCancelButton && (
+                        <Button
+                            style={[styles.mt3, styles.noSelect]}
+                            onPress={onCancel}
+                            text={cancelText || translate('common.no')}
+                        />
+                    )}
+                </>
+            ) : (
+                <View style={[styles.flexRow, styles.gap4]}>
+                    {shouldShowCancelButton && (
+                        <Button
+                            style={[styles.noSelect, styles.flex1]}
+                            onPress={onCancel}
+                            text={cancelText || translate('common.no')}
+                            medium
+                        />
+                    )}
+                    <Button
+                        success={success}
+                        danger={danger}
+                        style={[styles.flex1]}
+                        onPress={onConfirm}
+                        pressOnEnter
+                        text={confirmText || translate('common.yes')}
+                        isDisabled={isOffline && shouldDisableConfirmButtonWhenOffline}
+                        medium
+                    />
+                </View>
+            )}
+        </View>
+    );
+}
+
+ConfirmContent.displayName = 'ConfirmContent';
+
+export default ConfirmContent;