use Heading Component

apps/mobile/src/components/Header/HeaderTitle.js

@@ -1,22 +1,15 @@
 import React from 'react';
 import {Text} from 'react-native';
 import {useTracked} from '../../provider';
-import {SIZE, WEIGHT} from "../../utils/SizeUtils";
+import Heading from '../Typography/Heading';
 
 export const HeaderTitle = () => {
-  const [state,] = useTracked();
+  const [state] = useTracked();
   const {colors, headerTextState} = state;
 
-  const style = {
-    fontSize: SIZE.xl,
-    color: headerTextState.color || colors.heading,
-    fontFamily: WEIGHT.bold,
-    alignSelf: 'center',
-  };
-
   return (
     <>
-      <Text style={style}>
+      <Heading color={headerTextState.color}>
         <Text
           style={{
             color: colors.accent,
@@ -27,7 +20,7 @@ export const HeaderTitle = () => {
         {headerTextState.heading.slice(0, 1) === '#'
           ? headerTextState.heading.slice(1)
           : headerTextState.heading}
-      </Text>
+      </Heading>
     </>
   );
 };

apps/mobile/src/components/Typography/Heading.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {Text} from 'react-native';
+import {useTracked} from '../../provider';
+import {SIZE, WEIGHT} from '../../utils/SizeUtils';
+
+/**
+ *
+ * @typedef {import('react-native').TextProps} TextType
+ * @typedef {Object} restTypes
+ * @property {string} color color
+ * @property {number} size color
+ */
+/**
+ *
+ * @param {TextType | restTypes} props all props
+ */
+const Heading = ({color, size, style, ...restProps}) => {
+  const [state] = useTracked();
+  const {colors} = state;
+
+  return (
+    <Text
+      {...restProps}
+      style={[
+        {
+          fontFamily: WEIGHT.bold,
+          fontSize: size || SIZE.xl,
+          color: color || colors.heading,
+        },
+        style,
+      ]}></Text>
+  );
+};
+
+export default Heading;