Use global detection

src/components/Text.tsx

@@ -1,6 +1,6 @@
+import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { StyleConstants } from '@utils/styles/constants'
-import { useEffect, useState } from 'react'
+import { Text, TextProps, TextStyle } from 'react-native'
-import { AccessibilityInfo, Text, TextProps, TextStyle } from 'react-native'
 
 type Props =
   | {
@@ -27,23 +27,8 @@ const CustomText: React.FC<Props & TextProps> = ({
   lineHeight,
   ...rest
 }) => {
-  const [isBoldText, setIsBoldText] = useState(false)
+  const { boldTextEnabled } = useAccessibility()
-  useEffect(() => {
-    const boldTextChangedSubscription = AccessibilityInfo.addEventListener(
-      'boldTextChanged',
-      boldTextChanged => {
-        setIsBoldText(boldTextChanged)
-      }
-    )
 
-    AccessibilityInfo.isBoldTextEnabled().then(boldTextEnabled => {
-      setIsBoldText(boldTextEnabled)
-    })
-
-    return () => {
-      boldTextChangedSubscription.remove()
-    }
-  }, [])
   enum BoldMapping {
     'Normal' = '600',
     'Bold' = '800'
@@ -61,15 +46,14 @@ const CustomText: React.FC<Props & TextProps> = ({
           })
         },
         {
-          fontWeight: isBoldText
+          fontWeight: boldTextEnabled
             ? BoldMapping[fontWeight]
             : StyleConstants.Font.Weight[fontWeight]
         }
       ]}
       {...rest}
-    >
+      children={children}
-      {children}
+    />
-    </Text>
   )
 }
 

src/utils/accessibility/AccessibilityManager.tsx

@@ -4,11 +4,13 @@ import { AccessibilityInfo } from 'react-native'
 type ContextType = {
   reduceMotionEnabled: boolean
   screenReaderEnabled: boolean
+  boldTextEnabled: boolean
 }
 
 const AccessibilityContext = createContext<ContextType>({
   reduceMotionEnabled: false,
-  screenReaderEnabled: false
+  screenReaderEnabled: false,
+  boldTextEnabled: false
 })
 
 export const useAccessibility = () => useContext(AccessibilityContext)
@@ -16,6 +18,7 @@ export const useAccessibility = () => useContext(AccessibilityContext)
 const AccessibilityManager: React.FC = ({ children }) => {
   const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false)
   const [screenReaderEnabled, setScreenReaderEnabled] = useState(false)
+  const [boldTextEnabled, setBoldTextEnabled] = useState(false)
 
   const handleReduceMotionChanged = (reduceMotionEnabled: boolean) =>
     setReduceMotionEnabled(reduceMotionEnabled)
@@ -23,11 +26,16 @@ const AccessibilityManager: React.FC = ({ children }) => {
   const handleScreenReaderEnabled = (screenReaderEnabled: boolean) =>
     setScreenReaderEnabled(screenReaderEnabled)
 
+  const handleBoldTextEnabled = (boldTextEnabled: boolean) =>
+    setBoldTextEnabled(boldTextEnabled)
+
   const loadAccessibilityInfo = async () => {
     const reduceMotion = await AccessibilityInfo.isReduceMotionEnabled()
     const screenReader = await AccessibilityInfo.isScreenReaderEnabled()
+    const boldText = await AccessibilityInfo.isBoldTextEnabled()
     setReduceMotionEnabled(reduceMotion)
     setScreenReaderEnabled(screenReader)
+    setBoldTextEnabled(boldText)
   }
 
   useEffect(() => {
@@ -41,16 +49,21 @@ const AccessibilityManager: React.FC = ({ children }) => {
       'screenReaderChanged',
       handleScreenReaderEnabled
     )
+    const boldTextSubscription = AccessibilityInfo.addEventListener(
+      'boldTextChanged',
+      handleBoldTextEnabled
+    )
 
     return () => {
       reduceMotionSubscription.remove()
       screenReaderSubscription.remove()
+      boldTextSubscription.remove()
     }
   }, [])
 
   return (
     <AccessibilityContext.Provider
-      value={{ reduceMotionEnabled, screenReaderEnabled }}
+      value={{ reduceMotionEnabled, screenReaderEnabled, boldTextEnabled }}
     >
       {children}
     </AccessibilityContext.Provider>