refactor

Author: adkenyon

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<boolean | undefined>(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,