[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 HeaderGapProps from './types';
+
+function HeaderGap({styles}: HeaderGapProps) {
+    const themeStyles = useThemeStyles();
+    return <View style={[themeStyles.headerGap, styles]} />;
+}
+
+HeaderGap.displayName = 'HeaderGap';
+
+export default memo(HeaderGap);

src/components/HeaderGap/index.tsx

@@ -0,0 +1,11 @@
+import {ReactNode} from 'react';
+import HeaderGapProps from './types';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function HeaderGap({styles}: HeaderGapProps): ReactNode {
+    return null;
+}
+
+HeaderGap.displayName = 'HeaderGap';
+
+export default HeaderGap;

src/components/HeaderGap/types.ts

@@ -0,0 +1,7 @@
+import {StyleProp, ViewStyle} from 'react-native';
+
+type HeaderGapProps = {
+    styles?: StyleProp<ViewStyle>;
+};
+
+export default HeaderGapProps;