[TS migration] Migrate 'HeaderGap' component to TypeScript

.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',
                     {

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);

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;

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};

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;

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]);

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};