From 9e17d77259637b9a04e9dc4b567c7dbcd1546ede Mon Sep 17 00:00:00 2001 From: Alan Kenyon Date: Tue, 12 May 2020 12:33:21 -0700 Subject: [PATCH 1/9] update implementation --- src/useAccessibilityInfo.ts | 104 +++++++++++++++++++++++++----------- 1 file changed, 74 insertions(+), 30 deletions(-) diff --git a/src/useAccessibilityInfo.ts b/src/useAccessibilityInfo.ts index a7234bd2..89d91725 100644 --- a/src/useAccessibilityInfo.ts +++ b/src/useAccessibilityInfo.ts @@ -1,43 +1,87 @@ import {useEffect, useState} from 'react' -import { - AccessibilityInfo, - AccessibilityChangeEvent, - AccessibilityEvent, -} from 'react-native' +import {AccessibilityInfo, AccessibilityEvent} from 'react-native' -export function useAccessibilityInfo() { - const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false) - const [screenReaderEnabled, setScreenReaderEnabled] = useState(false) +type AccessibilityEventName = + | 'boldTextChanged' // iOS-only Event + | 'grayscaleChanged' // iOS-only Event + | 'invertColorsChanged' // iOS-only Event + | 'reduceMotionChanged' + | 'screenReaderChanged' + | 'reduceTransparencyChanged' // iOS-only Event + +type AccessibilityInfoStaticInitializers = + | 'isBoldTextEnabled' + | 'isScreenReaderEnabled' + | 'isGrayscaleEnabled' + | 'isInvertColorsEnabled' + | 'isReduceMotionEnabled' + | 'isReduceTransparencyEnabled' - const handleReduceMotionChanged = (enabled: AccessibilityChangeEvent) => - setReduceMotionEnabled(enabled) - const handleScreenReaderChanged = (enabled: AccessibilityChangeEvent) => - setScreenReaderEnabled(enabled) +type AccessibilityEventToInfoStaticKeyMap = { + [K in AccessibilityEventName]?: AccessibilityInfoStaticInitializers +} + +const EVENT_NAME_TO_INITIALIZER: AccessibilityEventToInfoStaticKeyMap = { + boldTextChanged: 'isBoldTextEnabled', + screenReaderChanged: 'isScreenReaderEnabled', + grayscaleChanged: 'isGrayscaleEnabled', + invertColorsChanged: 'isInvertColorsEnabled', + reduceMotionChanged: 'isReduceMotionEnabled', + reduceTransparencyChanged: 'isReduceTransparencyEnabled', +} + +type AccessibilityInfoChangeEventHandler = (event: AccessibilityEvent) => void + +function useAccessibilityStateListener( + eventName: AccessibilityEventName, +): boolean { + const [isEnabled, setIsEnabled] = useState(false) useEffect(() => { - AccessibilityInfo.isReduceMotionEnabled().then(handleReduceMotionChanged) - AccessibilityInfo.isScreenReaderEnabled().then(handleScreenReaderChanged) + const initializerKey = EVENT_NAME_TO_INITIALIZER[eventName] + if (!initializerKey) { + return + } + + AccessibilityInfo[initializerKey]().then(setIsEnabled) AccessibilityInfo.addEventListener( - 'reduceMotionChanged', - handleReduceMotionChanged as (event: AccessibilityEvent) => void, - ) - AccessibilityInfo.addEventListener( - 'screenReaderChanged', - handleScreenReaderChanged as (event: AccessibilityEvent) => void, + eventName, + setIsEnabled, ) - return () => { + return () => AccessibilityInfo.removeEventListener( - 'reduceMotionChanged', - handleReduceMotionChanged as (event: AccessibilityEvent) => void, + eventName, + setIsEnabled, ) - AccessibilityInfo.removeEventListener( - 'screenReaderChanged', - handleScreenReaderChanged as (event: AccessibilityEvent) => void, - ) - } - }, []) + }, [eventName]) + + return isEnabled +} + +export function useAccessibilityInfo() { + const screenReaderEnabled = useAccessibilityStateListener( + 'screenReaderChanged', + ) + const greyScaleEnabled = useAccessibilityStateListener('grayscaleChanged') + const boldTextEnabled = useAccessibilityStateListener('boldTextChanged') + const invertColorsEnabled = useAccessibilityStateListener( + 'invertColorsChanged', + ) + const reduceMotionEnabled = useAccessibilityStateListener( + 'reduceMotionChanged', + ) + const reduceTransparencyEnabled = useAccessibilityStateListener( + 'reduceTransparencyChanged', + ) - return {reduceMotionEnabled, screenReaderEnabled} + return { + screenReaderEnabled, + greyScaleEnabled, + invertColorsEnabled, + reduceMotionEnabled, + reduceTransparencyEnabled, + boldTextEnabled, + } } From 0e936aa9e1296ac530f095a6b48632c6d444a204 Mon Sep 17 00:00:00 2001 From: Alan Kenyon Date: Tue, 12 May 2020 12:38:11 -0700 Subject: [PATCH 2/9] readme update --- README.md | 9 ++++++++- src/useAccessibilityInfo.ts | 4 ++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 9a76c41b..675b0c96 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 { + reduceMotionEnabled, + screenReaderEnabled, + grayscaleEnabled, + invertColorsEnabled, + reduceTransparencyEnabled, + boldTextEnabled +} = useAccessibilityInfo() ``` ### `useAppState` diff --git a/src/useAccessibilityInfo.ts b/src/useAccessibilityInfo.ts index 89d91725..76ab47f3 100644 --- a/src/useAccessibilityInfo.ts +++ b/src/useAccessibilityInfo.ts @@ -64,7 +64,7 @@ export function useAccessibilityInfo() { const screenReaderEnabled = useAccessibilityStateListener( 'screenReaderChanged', ) - const greyScaleEnabled = useAccessibilityStateListener('grayscaleChanged') + const grayscaleEnabled = useAccessibilityStateListener('grayscaleChanged') const boldTextEnabled = useAccessibilityStateListener('boldTextChanged') const invertColorsEnabled = useAccessibilityStateListener( 'invertColorsChanged', @@ -78,7 +78,7 @@ export function useAccessibilityInfo() { return { screenReaderEnabled, - greyScaleEnabled, + grayscaleEnabled, invertColorsEnabled, reduceMotionEnabled, reduceTransparencyEnabled, From a8d062bd47c4defa34d960aa782fa62c3d69b571 Mon Sep 17 00:00:00 2001 From: Alan Kenyon Date: Tue, 12 May 2020 12:44:11 -0700 Subject: [PATCH 3/9] peer dep updates --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index aafc2c18..3644b2e6 100644 --- a/package.json +++ b/package.json @@ -15,8 +15,8 @@ "release-canary": "auto canary" }, "peerDependencies": { - "react": ">=16.8.0", - "react-native": ">=0.59" + "react": ">=16.8.6", + "react-native": ">=0.60" }, "devDependencies": { "@auto-it/all-contributors": "9.28.3", From 921a6c0f7b6ad53ec50344ab48c8c485380bb176 Mon Sep 17 00:00:00 2001 From: Alan Kenyon Date: Thu, 14 May 2020 11:42:37 -0700 Subject: [PATCH 4/9] updated types for les type defining --- src/useAccessibilityInfo.ts | 20 +++++--------------- yarn.lock | 22 +++++++++++----------- 2 files changed, 16 insertions(+), 26 deletions(-) diff --git a/src/useAccessibilityInfo.ts b/src/useAccessibilityInfo.ts index 76ab47f3..d95efbb8 100644 --- a/src/useAccessibilityInfo.ts +++ b/src/useAccessibilityInfo.ts @@ -1,13 +1,5 @@ import {useEffect, useState} from 'react' -import {AccessibilityInfo, AccessibilityEvent} from 'react-native' - -type AccessibilityEventName = - | 'boldTextChanged' // iOS-only Event - | 'grayscaleChanged' // iOS-only Event - | 'invertColorsChanged' // iOS-only Event - | 'reduceMotionChanged' - | 'screenReaderChanged' - | 'reduceTransparencyChanged' // iOS-only Event +import {AccessibilityInfo, AccessibilityChangeEventName} from 'react-native' type AccessibilityInfoStaticInitializers = | 'isBoldTextEnabled' @@ -18,7 +10,7 @@ type AccessibilityInfoStaticInitializers = | 'isReduceTransparencyEnabled' type AccessibilityEventToInfoStaticKeyMap = { - [K in AccessibilityEventName]?: AccessibilityInfoStaticInitializers + [K in AccessibilityChangeEventName]?: AccessibilityInfoStaticInitializers } const EVENT_NAME_TO_INITIALIZER: AccessibilityEventToInfoStaticKeyMap = { @@ -30,10 +22,8 @@ const EVENT_NAME_TO_INITIALIZER: AccessibilityEventToInfoStaticKeyMap = { reduceTransparencyChanged: 'isReduceTransparencyEnabled', } -type AccessibilityInfoChangeEventHandler = (event: AccessibilityEvent) => void - function useAccessibilityStateListener( - eventName: AccessibilityEventName, + eventName: AccessibilityChangeEventName, ): boolean { const [isEnabled, setIsEnabled] = useState(false) @@ -47,13 +37,13 @@ function useAccessibilityStateListener( AccessibilityInfo[initializerKey]().then(setIsEnabled) AccessibilityInfo.addEventListener( eventName, - setIsEnabled, + setIsEnabled, ) return () => AccessibilityInfo.removeEventListener( eventName, - setIsEnabled, + setIsEnabled, ) }, [eventName]) diff --git a/yarn.lock b/yarn.lock index 7e30f3fb..ece26c76 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.8": + 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" From b8df9f240fca7fafeabf33a414db557ca9908783 Mon Sep 17 00:00:00 2001 From: Alan Kenyon Date: Thu, 14 May 2020 13:53:15 -0700 Subject: [PATCH 5/9] fix dep --- package.json | 2 +- yarn.lock | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 3644b2e6..ea2c2aa7 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/yarn.lock b/yarn.lock index ece26c76..cb3c96a2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1617,7 +1617,7 @@ 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": +"@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== From 78426108bb93578ff74318cbe310c9e0f7ea3767 Mon Sep 17 00:00:00 2001 From: Alan Kenyon Date: Sun, 17 May 2020 18:20:25 -0700 Subject: [PATCH 6/9] support RN59 --- README.md | 10 +++++----- package.json | 4 ++-- src/useAccessibilityInfo.ts | 39 ++++++++++++++++++++++++++----------- 3 files changed, 35 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 675b0c96..0483e44f 100644 --- a/README.md +++ b/README.md @@ -38,12 +38,12 @@ yarn add @react-native-community/hooks import { useAccessibilityInfo } from '@react-native-community/hooks' const { - reduceMotionEnabled, + boldTextEnabled, screenReaderEnabled, - grayscaleEnabled, - invertColorsEnabled, - reduceTransparencyEnabled, - boldTextEnabled + reduceMotionEnabled, // requires RN60 or newer + grayscaleEnabled, // requires RN60 or newer + invertColorsEnabled, // requires RN60 or newer + reduceTransparencyEnabled // requires RN60 or newer } = useAccessibilityInfo() ``` diff --git a/package.json b/package.json index ea2c2aa7..51a40a24 100644 --- a/package.json +++ b/package.json @@ -15,8 +15,8 @@ "release-canary": "auto canary" }, "peerDependencies": { - "react": ">=16.8.6", - "react-native": ">=0.60" + "react": ">=16.8.0", + "react-native": ">=0.59" }, "devDependencies": { "@auto-it/all-contributors": "9.28.3", diff --git a/src/useAccessibilityInfo.ts b/src/useAccessibilityInfo.ts index d95efbb8..7a838e41 100644 --- a/src/useAccessibilityInfo.ts +++ b/src/useAccessibilityInfo.ts @@ -1,6 +1,13 @@ import {useEffect, useState} from 'react' import {AccessibilityInfo, AccessibilityChangeEventName} from 'react-native' +const SUPPORTS_RN60_ACCESSIBILITY_INFO_API = !!( + AccessibilityInfo.isGrayscaleEnabled && + AccessibilityInfo.isInvertColorsEnabled && + AccessibilityInfo.isReduceMotionEnabled && + AccessibilityInfo.isReduceTransparencyEnabled +) + type AccessibilityInfoStaticInitializers = | 'isBoldTextEnabled' | 'isScreenReaderEnabled' @@ -35,27 +42,36 @@ function useAccessibilityStateListener( } AccessibilityInfo[initializerKey]().then(setIsEnabled) - AccessibilityInfo.addEventListener( - eventName, - setIsEnabled, - ) + AccessibilityInfo.addEventListener(eventName, setIsEnabled) - return () => - AccessibilityInfo.removeEventListener( - eventName, - setIsEnabled, - ) + return () => AccessibilityInfo.removeEventListener(eventName, setIsEnabled) }, [eventName]) return isEnabled } -export function useAccessibilityInfo() { +export function useAccessibilityInfo(): { + screenReaderEnabled: Boolean + boldTextEnabled: Boolean + grayscaleEnabled?: Boolean + invertColorsEnabled?: Boolean + reduceMotionEnabled?: Boolean + reduceTransparencyEnabled?: Boolean +} { const screenReaderEnabled = useAccessibilityStateListener( 'screenReaderChanged', ) - const grayscaleEnabled = useAccessibilityStateListener('grayscaleChanged') const boldTextEnabled = useAccessibilityStateListener('boldTextChanged') + + if (!SUPPORTS_RN60_ACCESSIBILITY_INFO_API) { + return { + screenReaderEnabled, + boldTextEnabled, + } + } + + /* eslint-disable react-hooks/rules-of-hooks */ + const grayscaleEnabled = useAccessibilityStateListener('grayscaleChanged') const invertColorsEnabled = useAccessibilityStateListener( 'invertColorsChanged', ) @@ -65,6 +81,7 @@ export function useAccessibilityInfo() { const reduceTransparencyEnabled = useAccessibilityStateListener( 'reduceTransparencyChanged', ) + /* eslint-enable react-hooks/rules-of-hooks */ return { screenReaderEnabled, From 7b9753291f574e2c15682aa616470ed784d732a5 Mon Sep 17 00:00:00 2001 From: Alan Kenyon Date: Tue, 26 May 2020 10:00:03 -0700 Subject: [PATCH 7/9] Update src/useAccessibilityInfo.ts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Linus Unnebäck --- src/useAccessibilityInfo.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/useAccessibilityInfo.ts b/src/useAccessibilityInfo.ts index 7a838e41..f30808c3 100644 --- a/src/useAccessibilityInfo.ts +++ b/src/useAccessibilityInfo.ts @@ -51,12 +51,12 @@ function useAccessibilityStateListener( } export function useAccessibilityInfo(): { - screenReaderEnabled: Boolean - boldTextEnabled: Boolean - grayscaleEnabled?: Boolean - invertColorsEnabled?: Boolean - reduceMotionEnabled?: Boolean - reduceTransparencyEnabled?: Boolean + screenReaderEnabled: boolean + boldTextEnabled: boolean + grayscaleEnabled?: boolean + invertColorsEnabled?: boolean + reduceMotionEnabled?: boolean + reduceTransparencyEnabled?: boolean } { const screenReaderEnabled = useAccessibilityStateListener( 'screenReaderChanged', From cb452119bec07f3832c6fab15fbb6f9ed8683eb8 Mon Sep 17 00:00:00 2001 From: Alan Kenyon Date: Tue, 26 May 2020 21:32:32 -0700 Subject: [PATCH 8/9] refactor --- src/useAccessibilityInfo.ts | 73 +++++++++++++------------------------ 1 file changed, 26 insertions(+), 47 deletions(-) diff --git a/src/useAccessibilityInfo.ts b/src/useAccessibilityInfo.ts index f30808c3..42db670d 100644 --- a/src/useAccessibilityInfo.ts +++ b/src/useAccessibilityInfo.ts @@ -1,13 +1,6 @@ import {useEffect, useState} from 'react' import {AccessibilityInfo, AccessibilityChangeEventName} from 'react-native' -const SUPPORTS_RN60_ACCESSIBILITY_INFO_API = !!( - AccessibilityInfo.isGrayscaleEnabled && - AccessibilityInfo.isInvertColorsEnabled && - AccessibilityInfo.isReduceMotionEnabled && - AccessibilityInfo.isReduceTransparencyEnabled -) - type AccessibilityInfoStaticInitializers = | 'isBoldTextEnabled' | 'isScreenReaderEnabled' @@ -16,72 +9,58 @@ type AccessibilityInfoStaticInitializers = | 'isReduceMotionEnabled' | 'isReduceTransparencyEnabled' -type AccessibilityEventToInfoStaticKeyMap = { - [K in AccessibilityChangeEventName]?: AccessibilityInfoStaticInitializers -} - -const EVENT_NAME_TO_INITIALIZER: AccessibilityEventToInfoStaticKeyMap = { - boldTextChanged: 'isBoldTextEnabled', - screenReaderChanged: 'isScreenReaderEnabled', - grayscaleChanged: 'isGrayscaleEnabled', - invertColorsChanged: 'isInvertColorsEnabled', - reduceMotionChanged: 'isReduceMotionEnabled', - reduceTransparencyChanged: 'isReduceTransparencyEnabled', -} - function useAccessibilityStateListener( eventName: AccessibilityChangeEventName, -): boolean { - const [isEnabled, setIsEnabled] = useState(false) + initializerName: AccessibilityInfoStaticInitializers, +): boolean | undefined { + const [isEnabled, setIsEnabled] = useState(undefined) useEffect(() => { - const initializerKey = EVENT_NAME_TO_INITIALIZER[eventName] - - if (!initializerKey) { + if (!AccessibilityInfo[initializerName]) { return } - AccessibilityInfo[initializerKey]().then(setIsEnabled) + AccessibilityInfo[initializerName]().then(setIsEnabled) AccessibilityInfo.addEventListener(eventName, setIsEnabled) return () => AccessibilityInfo.removeEventListener(eventName, setIsEnabled) - }, [eventName]) + }, [eventName, initializerName]) return isEnabled } export function useAccessibilityInfo(): { - screenReaderEnabled: boolean - boldTextEnabled: boolean - grayscaleEnabled?: boolean - invertColorsEnabled?: boolean - reduceMotionEnabled?: boolean - reduceTransparencyEnabled?: boolean + screenReaderEnabled: boolean | undefined + boldTextEnabled: boolean | undefined + grayscaleEnabled: boolean | undefined + invertColorsEnabled: boolean | undefined + reduceMotionEnabled: boolean | undefined + reduceTransparencyEnabled: boolean | undefined } { - const screenReaderEnabled = useAccessibilityStateListener( - 'screenReaderChanged', + const boldTextEnabled = useAccessibilityStateListener( + 'boldTextChanged', + 'isBoldTextEnabled', + ) + const grayscaleEnabled = useAccessibilityStateListener( + 'grayscaleChanged', + 'isGrayscaleEnabled', ) - const boldTextEnabled = useAccessibilityStateListener('boldTextChanged') - - if (!SUPPORTS_RN60_ACCESSIBILITY_INFO_API) { - return { - screenReaderEnabled, - boldTextEnabled, - } - } - - /* eslint-disable react-hooks/rules-of-hooks */ - const grayscaleEnabled = useAccessibilityStateListener('grayscaleChanged') const invertColorsEnabled = useAccessibilityStateListener( 'invertColorsChanged', + 'isInvertColorsEnabled', ) const reduceMotionEnabled = useAccessibilityStateListener( 'reduceMotionChanged', + 'isReduceMotionEnabled', ) const reduceTransparencyEnabled = useAccessibilityStateListener( 'reduceTransparencyChanged', + 'isReduceTransparencyEnabled', + ) + const screenReaderEnabled = useAccessibilityStateListener( + 'screenReaderChanged', + 'isScreenReaderEnabled', ) - /* eslint-enable react-hooks/rules-of-hooks */ return { screenReaderEnabled, From b719ae372642d2157233c9d5d8cb04dd29876a67 Mon Sep 17 00:00:00 2001 From: Alan Kenyon Date: Tue, 26 May 2020 23:45:36 -0700 Subject: [PATCH 9/9] further type cleanups --- src/useAccessibilityInfo.ts | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/useAccessibilityInfo.ts b/src/useAccessibilityInfo.ts index 42db670d..8b33b061 100644 --- a/src/useAccessibilityInfo.ts +++ b/src/useAccessibilityInfo.ts @@ -12,7 +12,7 @@ type AccessibilityInfoStaticInitializers = function useAccessibilityStateListener( eventName: AccessibilityChangeEventName, initializerName: AccessibilityInfoStaticInitializers, -): boolean | undefined { +) { const [isEnabled, setIsEnabled] = useState(undefined) useEffect(() => { @@ -29,14 +29,7 @@ function useAccessibilityStateListener( return isEnabled } -export function useAccessibilityInfo(): { - screenReaderEnabled: boolean | undefined - boldTextEnabled: boolean | undefined - grayscaleEnabled: boolean | undefined - invertColorsEnabled: boolean | undefined - reduceMotionEnabled: boolean | undefined - reduceTransparencyEnabled: boolean | undefined -} { +export function useAccessibilityInfo() { const boldTextEnabled = useAccessibilityStateListener( 'boldTextChanged', 'isBoldTextEnabled',