diff --git a/README.md b/README.md index 9a76c41b..0483e44f 100644 --- a/README.md +++ b/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` diff --git a/package.json b/package.json index aafc2c18..51a40a24 100644 --- a/package.json +++ b/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", diff --git a/src/useAccessibilityInfo.ts b/src/useAccessibilityInfo.ts index a7234bd2..8b33b061 100644 --- a/src/useAccessibilityInfo.ts +++ b/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(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, + } } diff --git a/yarn.lock b/yarn.lock index 7e30f3fb..cb3c96a2 100644 --- a/yarn.lock +++ b/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"