Using new text component

Need to use global accessibility checks rather than per text component which is not efficient

src/components/Menu/Header.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
+import { View } from 'react-native'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
+import CustomText from '@components/Text'
 
 export interface Props {
   heading: string
@@ -11,20 +12,16 @@ const MenuHeader: React.FC<Props> = ({ heading }) => {
   const { colors } = useTheme()
 
   return (
-    <View style={styles.base}>
-      <Text style={[styles.text, { color: colors.secondary }]}>{heading}</Text>
+    <View style={{ paddingBottom: StyleConstants.Spacing.S }}>
+      <CustomText
+        fontStyle='S'
+        fontWeight='Bold'
+        style={{ color: colors.secondary }}
+      >
+        {heading}
+      </CustomText>
     </View>
   )
 }
 
-const styles = StyleSheet.create({
-  base: {
-    paddingBottom: StyleConstants.Spacing.S
-  },
-  text: {
-    ...StyleConstants.FontStyle.S,
-    fontWeight: StyleConstants.Font.Weight.Bold
-  }
-})
-
 export default MenuHeader