diff --git a/.eslintrc.js b/.eslintrc.js
index b71338d0c1a5..85a4e86797b6 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -174,6 +174,7 @@ module.exports = {
                 'rulesdir/prefer-underscore-method': 'off',
                 'rulesdir/prefer-import-module-contents': 'off',
                 'react/require-default-props': 'off',
+                'react/prop-types': 'off',
                 'no-restricted-syntax': [
                     'error',
                     {
diff --git a/src/components/HeaderGap/index.desktop.js b/src/components/HeaderGap/index.desktop.js
deleted file mode 100644
index 07ea1ea6f48d..000000000000
--- a/src/components/HeaderGap/index.desktop.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import PropTypes from 'prop-types';
-import React, {memo} from 'react';
-import {View} from 'react-native';
-import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles';
-import compose from '@libs/compose';
-
-const propTypes = {
-    /** Styles to apply to the HeaderGap */
-    // eslint-disable-next-line react/forbid-prop-types
-    styles: PropTypes.arrayOf(PropTypes.object),
-    ...withThemeStylesPropTypes,
-};
-
-const defaultProps = {
-    styles: [],
-};
-
-function HeaderGap(props) {
-    return <View style={[props.themeStyles.headerGap, ...props.styles]} />;
-}
-
-HeaderGap.displayName = 'HeaderGap';
-HeaderGap.propTypes = propTypes;
-HeaderGap.defaultProps = defaultProps;
-export default compose(memo, withThemeStyles)(HeaderGap);
diff --git a/src/components/HeaderGap/index.desktop.tsx b/src/components/HeaderGap/index.desktop.tsx
new file mode 100644
index 000000000000..4ee252c0772d
--- /dev/null
+++ b/src/components/HeaderGap/index.desktop.tsx
@@ -0,0 +1,13 @@
+import React, {memo} from 'react';
+import {View} from 'react-native';
+import useThemeStyles from '@styles/useThemeStyles';
+import type {HeaderGapProps, HeaderGapReturnType} from './types';
+
+function HeaderGap({styles}: HeaderGapProps): HeaderGapReturnType {
+    const themeStyles = useThemeStyles();
+    return <View style={[themeStyles.headerGap, styles]} />;
+}
+
+HeaderGap.displayName = 'HeaderGap';
+
+export default memo(HeaderGap);
diff --git a/src/components/HeaderGap/index.js b/src/components/HeaderGap/index.js
deleted file mode 100644
index 35e6bf92fb5d..000000000000
--- a/src/components/HeaderGap/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-function HeaderGap() {
-    return null;
-}
-
-HeaderGap.displayName = 'HeaderGap';
-export default HeaderGap;
diff --git a/src/components/HeaderGap/index.tsx b/src/components/HeaderGap/index.tsx
new file mode 100644
index 000000000000..191923efd7c8
--- /dev/null
+++ b/src/components/HeaderGap/index.tsx
@@ -0,0 +1,10 @@
+import type {HeaderGapProps, HeaderGapReturnType} from './types';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function HeaderGap({styles}: HeaderGapProps): HeaderGapReturnType {
+    return null;
+}
+
+HeaderGap.displayName = 'HeaderGap';
+
+export default HeaderGap;
diff --git a/src/components/HeaderGap/types.ts b/src/components/HeaderGap/types.ts
new file mode 100644
index 000000000000..55a202c2e48c
--- /dev/null
+++ b/src/components/HeaderGap/types.ts
@@ -0,0 +1,10 @@
+import {ReactNode} from 'react';
+import {StyleProp, ViewStyle} from 'react-native';
+
+type HeaderGapProps = {
+    styles?: StyleProp<ViewStyle>;
+};
+
+type HeaderGapReturnType = ReactNode;
+
+export type {HeaderGapProps, HeaderGapReturnType};
diff --git a/src/components/SplashScreenHider/index.native.tsx b/src/components/SplashScreenHider/index.native.tsx
index 29b5ae710dda..fcedbc67dbf9 100644
--- a/src/components/SplashScreenHider/index.native.tsx
+++ b/src/components/SplashScreenHider/index.native.tsx
@@ -4,9 +4,9 @@ import Reanimated, {Easing, runOnJS, useAnimatedStyle, useSharedValue, withTimin
 import Logo from '@assets/images/new-expensify-dark.svg';
 import BootSplash from '@libs/BootSplash';
 import useThemeStyles from '@styles/useThemeStyles';
-import type SplashScreenHiderProps from './types';
+import type {SplashScreenHiderProps, SplashScreenHiderReturnType} from './types';
 
-function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps) {
+function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps): SplashScreenHiderReturnType {
     const styles = useThemeStyles();
     const logoSizeRatio = BootSplash.logoSizeRatio || 1;
     const navigationBarHeight = BootSplash.navigationBarHeight || 0;
diff --git a/src/components/SplashScreenHider/index.tsx b/src/components/SplashScreenHider/index.tsx
index d3f5c52c1e3e..5710055b80ed 100644
--- a/src/components/SplashScreenHider/index.tsx
+++ b/src/components/SplashScreenHider/index.tsx
@@ -1,8 +1,8 @@
 import {useEffect} from 'react';
 import BootSplash from '@libs/BootSplash';
-import type SplashScreenHiderProps from './types';
+import type {SplashScreenHiderProps, SplashScreenHiderReturnType} from './types';
 
-function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps) {
+function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps): SplashScreenHiderReturnType {
     useEffect(() => {
         BootSplash.hide().then(() => onHide());
     }, [onHide]);
diff --git a/src/components/SplashScreenHider/types.ts b/src/components/SplashScreenHider/types.ts
index 4ea25da93290..ff7b2beb1520 100644
--- a/src/components/SplashScreenHider/types.ts
+++ b/src/components/SplashScreenHider/types.ts
@@ -1,6 +1,10 @@
+import {ReactNode} from 'react';
+
 type SplashScreenHiderProps = {
     /** Splash screen has been hidden */
     onHide: () => void;
 };
 
-export default SplashScreenHiderProps;
+type SplashScreenHiderReturnType = ReactNode;
+
+export type {SplashScreenHiderProps, SplashScreenHiderReturnType};