Using new text component

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

src/components/Parse/Emojis.tsx

@@ -1,10 +1,11 @@
+import CustomText from '@components/Text'
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { getSettingsFontsize } from '@utils/slices/settingsSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { adaptiveScale } from '@utils/styles/scaling'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useMemo } from 'react'
-import { StyleSheet, Text } from 'react-native'
+import { StyleSheet } from 'react-native'
 import FastImage from 'react-native-fast-image'
 import { useSelector } from 'react-redux'
 import validUrl from 'valid-url'
@@ -57,7 +58,7 @@ const ParseEmojis = React.memo(
     }, [theme, adaptiveFontsize])
 
     return (
-      <Text style={styles.text}>
+      <CustomText style={styles.text}>
         {emojis ? (
           content
             .split(regexEmoji)
@@ -69,30 +70,34 @@ const ParseEmojis = React.memo(
                   return emojiShortcode === `:${emoji.shortcode}:`
                 })
                 if (emojiIndex === -1) {
-                  return <Text key={emojiShortcode + i}>{emojiShortcode}</Text>
+                  return (
+                    <CustomText key={emojiShortcode + i}>
+                      {emojiShortcode}
+                    </CustomText>
+                  )
                 } else {
                   const uri = reduceMotionEnabled
                     ? emojis[emojiIndex].static_url
                     : emojis[emojiIndex].url
                   if (validUrl.isHttpsUri(uri)) {
                     return (
-                      <Text key={emojiShortcode + i}>
+                      <CustomText key={emojiShortcode + i}>
                         {i === 0 ? ' ' : undefined}
                         <FastImage source={{ uri }} style={styles.image} />
-                      </Text>
+                      </CustomText>
                     )
                   } else {
                     return null
                   }
                 }
               } else {
-                return <Text key={i}>{str}</Text>
+                return <CustomText key={i}>{str}</CustomText>
               }
             })
         ) : (
-          <Text>{content}</Text>
+          <CustomText>{content}</CustomText>
         )}
-      </Text>
+      </CustomText>
     )
   },
   (prev, next) => prev.content === next.content

src/components/Parse/HTML.tsx

@@ -2,6 +2,7 @@ import analytics from '@components/analytics'
 import Icon from '@components/Icon'
 import openLink from '@components/openLink'
 import ParseEmojis from '@components/Parse/Emojis'
+import CustomText from '@components/Text'
 import { useNavigation, useRoute } from '@react-navigation/native'
 import { StackNavigationProp } from '@react-navigation/stack'
 import { TabLocalStackParamList } from '@utils/navigation/navigators'
@@ -12,7 +13,7 @@ import { adaptiveScale } from '@utils/styles/scaling'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Pressable, Text, View } from 'react-native'
+import { Pressable, View } from 'react-native'
 import HTMLView from 'react-native-htmlview'
 import { useSelector } from 'react-redux'
 
@@ -53,7 +54,7 @@ const renderNode = ({
             ? routeParams.hashtag !== tag[1] && routeParams.hashtag !== tag[2]
             : true
           return (
-            <Text
+            <CustomText
               accessible
               key={index}
               style={{
@@ -72,7 +73,7 @@ const renderNode = ({
             >
               {node.children[0].data}
               {node.children[1]?.children[0].data}
-            </Text>
+            </CustomText>
           )
         } else if (classes.includes('mention') && mentions) {
           const accountIndex = mentions.findIndex(
@@ -82,7 +83,7 @@ const renderNode = ({
             ? routeParams.account.id !== mentions[accountIndex]?.id
             : true
           return (
-            <Text
+            <CustomText
               key={index}
               style={{
                 color:
@@ -102,7 +103,7 @@ const renderNode = ({
             >
               {node.children[0].data}
               {node.children[1]?.children[0].data}
-            </Text>
+            </CustomText>
           )
         }
       } else {
@@ -113,7 +114,7 @@ const renderNode = ({
         const shouldBeTag =
           tags && tags.filter(tag => `#${tag.name}` === content).length > 0
         return (
-          <Text
+          <CustomText
             key={index}
             style={{
               color: colors.blue,
@@ -142,7 +143,7 @@ const renderNode = ({
                 }}
               />
             ) : null}
-          </Text>
+          </CustomText>
         )
       }
       break
@@ -252,7 +253,7 @@ const ParseHTML = React.memo(
 
         return (
           <View style={{ overflow: 'hidden' }}>
-            <Text
+            <CustomText
               children={children}
               onTextLayout={onTextLayout}
               numberOfLines={
@@ -275,7 +276,7 @@ const ParseHTML = React.memo(
                   backgroundColor: colors.backgroundDefault
                 }}
               >
-                <Text
+                <CustomText
                   style={{
                     textAlign: 'center',
                     ...StyleConstants.FontStyle.S,