useAccessibilityInfo update

README.md

@@ -37,7 +37,14 @@ yarn add @react-native-community/hooks
 ```js
 import { useAccessibilityInfo } from '@react-native-community/hooks'
 
-const { reduceMotionEnabled, screenReaderEnabled } = useAccessibilityInfo()
+const {
+  boldTextEnabled,
+  screenReaderEnabled,
+  reduceMotionEnabled, // requires RN60 or newer
+  grayscaleEnabled, // requires RN60 or newer
+  invertColorsEnabled, // requires RN60 or newer
+  reduceTransparencyEnabled // requires RN60 or newer
+} = useAccessibilityInfo()
 ```
 
 ### `useAppState`

package.json

@@ -26,7 +26,7 @@
     "@testing-library/react-native": "5.0.3",
     "@types/jest": "25.2.3",
     "@types/react": "16.9.34",
-    "@types/react-native": "0.62.8",
+    "@types/react-native": "0.62.9",
     "all-contributors-cli": "6.15.0",
     "auto": "9.26.8",
     "eslint": "7.0.0",

src/useAccessibilityInfo.ts

@@ -1,43 +1,66 @@
 import {useEffect, useState} from 'react'
-import {
-  AccessibilityInfo,
-  AccessibilityChangeEvent,
-  AccessibilityEvent,
-} from 'react-native'
+import {AccessibilityInfo, AccessibilityChangeEventName} from 'react-native'
 
-export function useAccessibilityInfo() {
-  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false)
-  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false)
+type AccessibilityInfoStaticInitializers =
+  | 'isBoldTextEnabled'
+  | 'isScreenReaderEnabled'
+  | 'isGrayscaleEnabled'
+  | 'isInvertColorsEnabled'
+  | 'isReduceMotionEnabled'
+  | 'isReduceTransparencyEnabled'
 
-  const handleReduceMotionChanged = (enabled: AccessibilityChangeEvent) =>
-    setReduceMotionEnabled(enabled)
-  const handleScreenReaderChanged = (enabled: AccessibilityChangeEvent) =>
-    setScreenReaderEnabled(enabled)
+function useAccessibilityStateListener(
+  eventName: AccessibilityChangeEventName,
+  initializerName: AccessibilityInfoStaticInitializers,
+) {
+  const [isEnabled, setIsEnabled] = useState<boolean | undefined>(undefined)
 
   useEffect(() => {
-    AccessibilityInfo.isReduceMotionEnabled().then(handleReduceMotionChanged)
-    AccessibilityInfo.isScreenReaderEnabled().then(handleScreenReaderChanged)
-
-    AccessibilityInfo.addEventListener(
-      'reduceMotionChanged',
-      handleReduceMotionChanged as (event: AccessibilityEvent) => void,
-    )
-    AccessibilityInfo.addEventListener(
-      'screenReaderChanged',
-      handleScreenReaderChanged as (event: AccessibilityEvent) => void,
-    )
-
-    return () => {
-      AccessibilityInfo.removeEventListener(
-        'reduceMotionChanged',
-        handleReduceMotionChanged as (event: AccessibilityEvent) => void,
-      )
-      AccessibilityInfo.removeEventListener(
-        'screenReaderChanged',
-        handleScreenReaderChanged as (event: AccessibilityEvent) => void,
-      )
+    if (!AccessibilityInfo[initializerName]) {
+      return
     }
-  }, [])
 
-  return {reduceMotionEnabled, screenReaderEnabled}
+    AccessibilityInfo[initializerName]().then(setIsEnabled)
+    AccessibilityInfo.addEventListener(eventName, setIsEnabled)
+
+    return () => AccessibilityInfo.removeEventListener(eventName, setIsEnabled)
+  }, [eventName, initializerName])
+
+  return isEnabled
+}
+
+export function useAccessibilityInfo() {
+  const boldTextEnabled = useAccessibilityStateListener(
+    'boldTextChanged',
+    'isBoldTextEnabled',
+  )
+  const grayscaleEnabled = useAccessibilityStateListener(
+    'grayscaleChanged',
+    'isGrayscaleEnabled',
+  )
+  const invertColorsEnabled = useAccessibilityStateListener(
+    'invertColorsChanged',
+    'isInvertColorsEnabled',
+  )
+  const reduceMotionEnabled = useAccessibilityStateListener(
+    'reduceMotionChanged',
+    'isReduceMotionEnabled',
+  )
+  const reduceTransparencyEnabled = useAccessibilityStateListener(
+    'reduceTransparencyChanged',
+    'isReduceTransparencyEnabled',
+  )
+  const screenReaderEnabled = useAccessibilityStateListener(
+    'screenReaderChanged',
+    'isScreenReaderEnabled',
+  )
+
+  return {
+    screenReaderEnabled,
+    grayscaleEnabled,
+    invertColorsEnabled,
+    reduceMotionEnabled,
+    reduceTransparencyEnabled,
+    boldTextEnabled,
+  }
 }

yarn.lock

@@ -1614,13 +1614,13 @@
 
 "@types/prop-types@*":
   version "15.7.3"
-  resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
   integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
 
-"@types/react-native@0.62.8":
-  version "0.62.8"
-  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.62.8.tgz#224602561f75b838ed6e3b5ea37093bb84cffd74"
-  integrity sha512-YEf0tH3xYJpQB12Vvzoy7cqPY3mvbbulTnG3G7ToKOuJuqigAN3K9NNAaxNAAm1zCj+UtObhzcaJtPRwX1z6Fw==
+"@types/react-native@0.62.9":
+  version "0.62.9"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.62.9.tgz#f75d4a8879e68ed3857d6f2f73dc0752a0505362"
+  integrity sha512-OcoE7SKz1PsvTGJK5fIwJu6kWdDFN+hH1vMI4GVTEBYhV5FAM5vKVUFCaSiEPJScyNyIEWAeQwFvI3a01+Grzg==
   dependencies:
     "@types/react" "*"
 
@@ -1632,9 +1632,9 @@
     "@types/react" "*"
 
 "@types/react@*":
-  version "16.9.25"
-  resolved "https://registry.npmjs.org/@types/react/-/react-16.9.25.tgz#6ae2159b40138c792058a23c3c04fd3db49e929e"
-  integrity sha512-Dlj2V72cfYLPNscIG3/SMUOzhzj7GK3bpSrfefwt2YT9GLynvLCCZjbhyF6VsT0q0+aRACRX03TDJGb7cA0cqg==
+  version "16.9.35"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.35.tgz#a0830d172e8aadd9bd41709ba2281a3124bbd368"
+  integrity sha512-q0n0SsWcGc8nDqH2GJfWQWUOmZSJhXV64CjVN5SvcNti3TdEaA3AH0D8DwNmMdzjMAC/78tB8nAZIlV8yTz+zQ==
   dependencies:
     "@types/prop-types" "*"
     csstype "^2.2.0"
@@ -2823,9 +2823,9 @@ cssstyle@^2.2.0:
     cssom "~0.3.6"
 
 csstype@^2.2.0:
-  version "2.6.9"
-  resolved "https://registry.npmjs.org/csstype/-/csstype-2.6.9.tgz#05141d0cd557a56b8891394c1911c40c8a98d098"
-  integrity sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q==
+  version "2.6.10"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
+  integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==
 
 dashdash@^1.12.0:
   version "1.14.1"