diff --git a/src/components/TaskHeaderActionButton.js b/src/components/TaskHeaderActionButton.js
deleted file mode 100644
index 09ca427b8e56..000000000000
--- a/src/components/TaskHeaderActionButton.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
-import compose from '@libs/compose';
-import * as ReportUtils from '@libs/ReportUtils';
-import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
-import * as Session from '@userActions/Session';
-import * as Task from '@userActions/Task';
-import ONYXKEYS from '@src/ONYXKEYS';
-import Button from './Button';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-
-const propTypes = {
-    /** The report currently being looked at */
-    report: reportPropTypes.isRequired,
-
-    /** Current user session */
-    session: PropTypes.shape({
-        accountID: PropTypes.number,
-    }),
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    session: {
-        accountID: 0,
-    },
-};
-
-function TaskHeaderActionButton(props) {
-    const styles = useThemeStyles();
-    return (
-        <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentEnd]}>
-            <Button
-                success
-                isDisabled={!Task.canModifyTask(props.report, props.session.accountID)}
-                medium
-                text={props.translate(ReportUtils.isCompletedTaskReport(props.report) ? 'task.markAsIncomplete' : 'task.markAsComplete')}
-                onPress={Session.checkIfActionIsAllowed(() => (ReportUtils.isCompletedTaskReport(props.report) ? Task.reopenTask(props.report) : Task.completeTask(props.report)))}
-                style={[styles.flex1]}
-            />
-        </View>
-    );
-}
-
-TaskHeaderActionButton.propTypes = propTypes;
-TaskHeaderActionButton.defaultProps = defaultProps;
-TaskHeaderActionButton.displayName = 'TaskHeaderActionButton';
-
-export default compose(
-    withLocalize,
-    withOnyx({
-        session: {
-            key: ONYXKEYS.SESSION,
-        },
-    }),
-)(TaskHeaderActionButton);
diff --git a/src/components/TaskHeaderActionButton.tsx b/src/components/TaskHeaderActionButton.tsx
new file mode 100644
index 000000000000..5f8461d8e324
--- /dev/null
+++ b/src/components/TaskHeaderActionButton.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import {View} from 'react-native';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
+import useLocalize from '@hooks/useLocalize';
+import * as ReportUtils from '@libs/ReportUtils';
+import useThemeStyles from '@styles/useThemeStyles';
+import * as Session from '@userActions/Session';
+import * as Task from '@userActions/Task';
+import ONYXKEYS from '@src/ONYXKEYS';
+import * as OnyxTypes from '@src/types/onyx';
+import Button from './Button';
+
+type TaskHeaderActionButtonOnyxProps = {
+    /** Current user session */
+    session: OnyxEntry<OnyxTypes.Session>;
+};
+
+type TaskHeaderActionButtonProps = TaskHeaderActionButtonOnyxProps & {
+    /** The report currently being looked at */
+    report: OnyxTypes.Report;
+};
+
+function TaskHeaderActionButton({report, session}: TaskHeaderActionButtonProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    return (
+        <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentEnd]}>
+            <Button
+                success
+                isDisabled={!Task.canModifyTask(report, session?.accountID ?? 0)}
+                medium
+                text={translate(ReportUtils.isCompletedTaskReport(report) ? 'task.markAsIncomplete' : 'task.markAsComplete')}
+                onPress={Session.checkIfActionIsAllowed(() => (ReportUtils.isCompletedTaskReport(report) ? Task.reopenTask(report) : Task.completeTask(report)))}
+                style={styles.flex1}
+            />
+        </View>
+    );
+}
+
+TaskHeaderActionButton.displayName = 'TaskHeaderActionButton';
+
+export default withOnyx<TaskHeaderActionButtonProps, TaskHeaderActionButtonOnyxProps>({
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+})(TaskHeaderActionButton);