Using new text component

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

src/screens/Compose/Root/Header/PostingAs.tsx

@@ -1,12 +1,11 @@
+import CustomText from '@components/Text'
 import {
   getInstanceAccount,
   getInstanceUri
 } from '@utils/slices/instancesSlice'
-import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { StyleSheet, Text } from 'react-native'
 import { useSelector } from 'react-redux'
 
 const ComposePostingAs = React.memo(
@@ -21,21 +20,15 @@ const ComposePostingAs = React.memo(
     const instanceUri = useSelector(getInstanceUri)
 
     return (
-      <Text style={[styles.text, { color: colors.secondary }]}>
+      <CustomText fontStyle='S' style={{ color: colors.secondary }}>
         {t('content.root.header.postingAs', {
           acct: instanceAccount?.acct,
           domain: instanceUri
         })}
-      </Text>
+      </CustomText>
     )
   },
   () => true
 )
 
-const styles = StyleSheet.create({
-  text: {
-    ...StyleConstants.FontStyle.S
-  }
-})
-
 export default ComposePostingAs