Using new text component

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

src/components/Header/Center.tsx

@@ -1,7 +1,7 @@
+import CustomText from '@components/Text'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
-import { StyleSheet, Text } from 'react-native'
 
 export interface Props {
   content: string
@@ -14,11 +14,12 @@ const HeaderCenter = React.memo(
     const { colors } = useTheme()
 
     return (
-      <Text
-        style={[
-          styles.text,
-          { color: inverted ? colors.primaryOverlay : colors.primaryDefault }
-        ]}
+      <CustomText
+        style={{
+          fontSize: 18,
+          fontWeight: StyleConstants.Font.Weight.Bold,
+          color: inverted ? colors.primaryOverlay : colors.primaryDefault
+        }}
         children={content}
       />
     )
@@ -26,11 +27,4 @@ const HeaderCenter = React.memo(
   (prev, next) => prev.content === next.content
 )
 
-const styles = StyleSheet.create({
-  text: {
-    fontSize: 18,
-    fontWeight: StyleConstants.Font.Weight.Bold
-  }
-})
-
 export default HeaderCenter

src/components/Header/Left.tsx

@@ -1,8 +1,9 @@
 import Icon from '@components/Icon'
+import CustomText from '@components/Text'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useMemo } from 'react'
-import { Pressable, StyleSheet, Text } from 'react-native'
+import { Pressable } from 'react-native'
 
 export interface Props {
   type?: 'icon' | 'text'
@@ -34,8 +35,9 @@ const HeaderLeft: React.FC<Props> = ({
         )
       case 'text':
         return (
-          <Text
-            style={[styles.text, { color: colors.primaryDefault }]}
+          <CustomText
+            fontStyle='M'
+            style={{ color: colors.primaryDefault }}
             children={content}
           />
         )
@@ -46,38 +48,27 @@ const HeaderLeft: React.FC<Props> = ({
     <Pressable
       onPress={onPress}
       children={children}
-      style={[
-        styles.base,
-        {
-          backgroundColor: background
-            ? colors.backgroundOverlayDefault
-            : undefined,
-          minHeight: 44,
-          minWidth: 44,
-          marginLeft: native
-            ? -StyleConstants.Spacing.S
-            : StyleConstants.Spacing.S,
-          ...(type === 'icon' && {
-            borderRadius: 100
-          }),
-          ...(type === 'text' && {
-            paddingHorizontal: StyleConstants.Spacing.S
-          })
-        }
-      ]}
+      style={{
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: background
+          ? colors.backgroundOverlayDefault
+          : undefined,
+        minHeight: 44,
+        minWidth: 44,
+        marginLeft: native
+          ? -StyleConstants.Spacing.S
+          : StyleConstants.Spacing.S,
+        ...(type === 'icon' && {
+          borderRadius: 100
+        }),
+        ...(type === 'text' && {
+          paddingHorizontal: StyleConstants.Spacing.S
+        })
+      }}
     />
   )
 }
 
-const styles = StyleSheet.create({
-  base: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  text: {
-    ...StyleConstants.FontStyle.M
-  }
-})
-
 export default HeaderLeft

src/components/Header/Right.tsx

@@ -1,14 +1,9 @@
 import Icon from '@components/Icon'
+import CustomText from '@components/Text'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useMemo } from 'react'
-import {
-  AccessibilityProps,
-  Pressable,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native'
+import { AccessibilityProps, Pressable, View } from 'react-native'
 import { Flow } from 'react-native-animated-spinkit'
 
 export interface Props {
@@ -72,14 +67,12 @@ const HeaderRight: React.FC<Props> = ({
       case 'text':
         return (
           <>
-            <Text
-              style={[
-                styles.text,
-                {
-                  color: disabled ? colors.secondary : colors.primaryDefault,
-                  opacity: loading ? 0 : 1
-                }
-              ]}
+            <CustomText
+              fontStyle='M'
+              style={{
+                color: disabled ? colors.secondary : colors.primaryDefault,
+                opacity: loading ? 0 : 1
+              }}
               children={content}
             />
             {loading && loadingSpinkit}
@@ -97,38 +90,27 @@ const HeaderRight: React.FC<Props> = ({
       onPress={onPress}
       children={children}
       disabled={disabled || loading}
-      style={[
-        styles.base,
-        {
-          backgroundColor: background
-            ? colors.backgroundOverlayDefault
-            : undefined,
-          minHeight: 44,
-          minWidth: 44,
-          marginRight: native
-            ? -StyleConstants.Spacing.S
-            : StyleConstants.Spacing.S,
-          ...(type === 'icon' && {
-            borderRadius: 100
-          }),
-          ...(type === 'text' && {
-            paddingHorizontal: StyleConstants.Spacing.S
-          })
-        }
-      ]}
+      style={{
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: background
+          ? colors.backgroundOverlayDefault
+          : undefined,
+        minHeight: 44,
+        minWidth: 44,
+        marginRight: native
+          ? -StyleConstants.Spacing.S
+          : StyleConstants.Spacing.S,
+        ...(type === 'icon' && {
+          borderRadius: 100
+        }),
+        ...(type === 'text' && {
+          paddingHorizontal: StyleConstants.Spacing.S
+        })
+      }}
     />
   )
 }
 
-const styles = StyleSheet.create({
-  base: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  text: {
-    ...StyleConstants.FontStyle.M
-  }
-})
-
 export default HeaderRight