Using new text component

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

src/components/Timeline/Shared/HeaderShared/Account.tsx

@@ -1,9 +1,10 @@
+import CustomText from '@components/Text'
 import { ParseEmojis } from '@root/components/Parse'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { StyleSheet, Text, View } from 'react-native'
+import { View } from 'react-native'
 
 export interface Props {
   account: Mastodon.Account
@@ -16,13 +17,13 @@ const HeaderSharedAccount = React.memo(
     const { colors } = useTheme()
 
     return (
-      <View style={styles.base}>
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
         {withoutName ? null : (
-          <Text
+          <CustomText
             accessibilityHint={t(
               'shared.header.shared.account.name.accessibilityHint'
             )}
-            style={styles.name}
+            style={{ marginRight: StyleConstants.Spacing.XS }}
             numberOfLines={1}
           >
             <ParseEmojis
@@ -30,34 +31,21 @@ const HeaderSharedAccount = React.memo(
               emojis={account.emojis}
               fontBold
             />
-          </Text>
+          </CustomText>
         )}
-        <Text
+        <CustomText
           accessibilityHint={t(
             'shared.header.shared.account.account.accessibilityHint'
           )}
-          style={[styles.acct, { color: colors.secondary }]}
+          style={{ flexShrink: 1, color: colors.secondary }}
           numberOfLines={1}
         >
           @{account.acct}
-        </Text>
+        </CustomText>
       </View>
     )
   },
   () => true
 )
 
-const styles = StyleSheet.create({
-  base: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  name: {
-    marginRight: StyleConstants.Spacing.XS
-  },
-  acct: {
-    flexShrink: 1
-  }
-})
-
 export default HeaderSharedAccount

src/components/Timeline/Shared/HeaderShared/Application.tsx

@@ -1,10 +1,10 @@
 import analytics from '@components/analytics'
 import openLink from '@components/openLink'
+import CustomText from '@components/Text'
 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'
 
 export interface Props {
   application?: Mastodon.Application
@@ -16,7 +16,8 @@ const HeaderSharedApplication = React.memo(
     const { t } = useTranslation('componentTimeline')
 
     return application && application.name !== 'Web' ? (
-      <Text
+      <CustomText
+        fontStyle='S'
         accessibilityRole='link'
         onPress={async () => {
           analytics('timeline_shared_header_application_press', {
@@ -24,24 +25,20 @@ const HeaderSharedApplication = React.memo(
           })
           application.website && (await openLink(application.website))
         }}
-        style={[styles.application, { color: colors.secondary }]}
+        style={{
+          flex: 1,
+          marginLeft: StyleConstants.Spacing.S,
+          color: colors.secondary
+        }}
         numberOfLines={1}
       >
         {t('shared.header.shared.application', {
           application: application.name
         })}
-      </Text>
+      </CustomText>
     ) : null
   },
   () => true
 )
 
-const styles = StyleSheet.create({
-  application: {
-    flex: 1,
-    ...StyleConstants.FontStyle.S,
-    marginLeft: StyleConstants.Spacing.S
-  }
-})
-
 export default HeaderSharedApplication

src/components/Timeline/Shared/HeaderShared/Created.tsx

@@ -1,13 +1,13 @@
 import Icon from '@components/Icon'
 import RelativeTime from '@components/RelativeTime'
+import CustomText from '@components/Text'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Text } from 'react-native'
 
 export interface Props {
-  created_at: Mastodon.Status['created_at']
+  created_at: Mastodon.Status['created_at'] | number
   edited_at?: Mastodon.Status['edited_at']
 }
 
@@ -18,11 +18,9 @@ const HeaderSharedCreated = React.memo(
 
     return (
       <>
-        <Text
-          style={{ ...StyleConstants.FontStyle.S, color: colors.secondary }}
-        >
+        <CustomText fontStyle='S' style={{ color: colors.secondary }}>
           <RelativeTime date={edited_at || created_at} />
-        </Text>
+        </CustomText>
         {edited_at ? (
           <Icon
             accessibilityLabel={t(