|
1 | 1 | import {useEffect, useState} from 'react' |
2 | | -import { |
3 | | - AccessibilityInfo, |
4 | | - AccessibilityChangeEvent, |
5 | | - AccessibilityEvent, |
6 | | -} from 'react-native' |
| 2 | +import {AccessibilityInfo, AccessibilityChangeEventName} from 'react-native' |
7 | 3 |
|
8 | | -export function useAccessibilityInfo() { |
9 | | - const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false) |
10 | | - const [screenReaderEnabled, setScreenReaderEnabled] = useState(false) |
| 4 | +type AccessibilityInfoStaticInitializers = |
| 5 | + | 'isBoldTextEnabled' |
| 6 | + | 'isScreenReaderEnabled' |
| 7 | + | 'isGrayscaleEnabled' |
| 8 | + | 'isInvertColorsEnabled' |
| 9 | + | 'isReduceMotionEnabled' |
| 10 | + | 'isReduceTransparencyEnabled' |
11 | 11 |
|
12 | | - const handleReduceMotionChanged = (enabled: AccessibilityChangeEvent) => |
13 | | - setReduceMotionEnabled(enabled) |
14 | | - const handleScreenReaderChanged = (enabled: AccessibilityChangeEvent) => |
15 | | - setScreenReaderEnabled(enabled) |
| 12 | +function useAccessibilityStateListener( |
| 13 | + eventName: AccessibilityChangeEventName, |
| 14 | + initializerName: AccessibilityInfoStaticInitializers, |
| 15 | +) { |
| 16 | + const [isEnabled, setIsEnabled] = useState<boolean | undefined>(undefined) |
16 | 17 |
|
17 | 18 | useEffect(() => { |
18 | | - AccessibilityInfo.isReduceMotionEnabled().then(handleReduceMotionChanged) |
19 | | - AccessibilityInfo.isScreenReaderEnabled().then(handleScreenReaderChanged) |
20 | | - |
21 | | - AccessibilityInfo.addEventListener( |
22 | | - 'reduceMotionChanged', |
23 | | - handleReduceMotionChanged as (event: AccessibilityEvent) => void, |
24 | | - ) |
25 | | - AccessibilityInfo.addEventListener( |
26 | | - 'screenReaderChanged', |
27 | | - handleScreenReaderChanged as (event: AccessibilityEvent) => void, |
28 | | - ) |
29 | | - |
30 | | - return () => { |
31 | | - AccessibilityInfo.removeEventListener( |
32 | | - 'reduceMotionChanged', |
33 | | - handleReduceMotionChanged as (event: AccessibilityEvent) => void, |
34 | | - ) |
35 | | - AccessibilityInfo.removeEventListener( |
36 | | - 'screenReaderChanged', |
37 | | - handleScreenReaderChanged as (event: AccessibilityEvent) => void, |
38 | | - ) |
| 19 | + if (!AccessibilityInfo[initializerName]) { |
| 20 | + return |
39 | 21 | } |
40 | | - }, []) |
41 | 22 |
|
42 | | - return {reduceMotionEnabled, screenReaderEnabled} |
| 23 | + AccessibilityInfo[initializerName]().then(setIsEnabled) |
| 24 | + AccessibilityInfo.addEventListener(eventName, setIsEnabled) |
| 25 | + |
| 26 | + return () => AccessibilityInfo.removeEventListener(eventName, setIsEnabled) |
| 27 | + }, [eventName, initializerName]) |
| 28 | + |
| 29 | + return isEnabled |
| 30 | +} |
| 31 | + |
| 32 | +export function useAccessibilityInfo() { |
| 33 | + const boldTextEnabled = useAccessibilityStateListener( |
| 34 | + 'boldTextChanged', |
| 35 | + 'isBoldTextEnabled', |
| 36 | + ) |
| 37 | + const grayscaleEnabled = useAccessibilityStateListener( |
| 38 | + 'grayscaleChanged', |
| 39 | + 'isGrayscaleEnabled', |
| 40 | + ) |
| 41 | + const invertColorsEnabled = useAccessibilityStateListener( |
| 42 | + 'invertColorsChanged', |
| 43 | + 'isInvertColorsEnabled', |
| 44 | + ) |
| 45 | + const reduceMotionEnabled = useAccessibilityStateListener( |
| 46 | + 'reduceMotionChanged', |
| 47 | + 'isReduceMotionEnabled', |
| 48 | + ) |
| 49 | + const reduceTransparencyEnabled = useAccessibilityStateListener( |
| 50 | + 'reduceTransparencyChanged', |
| 51 | + 'isReduceTransparencyEnabled', |
| 52 | + ) |
| 53 | + const screenReaderEnabled = useAccessibilityStateListener( |
| 54 | + 'screenReaderChanged', |
| 55 | + 'isScreenReaderEnabled', |
| 56 | + ) |
| 57 | + |
| 58 | + return { |
| 59 | + screenReaderEnabled, |
| 60 | + grayscaleEnabled, |
| 61 | + invertColorsEnabled, |
| 62 | + reduceMotionEnabled, |
| 63 | + reduceTransparencyEnabled, |
| 64 | + boldTextEnabled, |
| 65 | + } |
43 | 66 | } |
0 commit comments