2022-08-07 01:18:10 +02:00
|
|
|
import React, {
|
2022-12-28 23:41:36 +01:00
|
|
|
createContext,
|
|
|
|
PropsWithChildren,
|
|
|
|
useContext,
|
|
|
|
useEffect,
|
|
|
|
useState
|
2022-08-07 01:18:10 +02:00
|
|
|
} from 'react'
|
2021-03-27 00:02:32 +01:00
|
|
|
import { AccessibilityInfo } from 'react-native'
|
|
|
|
|
|
|
|
type ContextType = {
|
|
|
|
reduceMotionEnabled: boolean
|
2021-04-09 21:43:12 +02:00
|
|
|
screenReaderEnabled: boolean
|
2022-05-07 13:23:08 +02:00
|
|
|
boldTextEnabled: boolean
|
2021-03-27 00:02:32 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
const AccessibilityContext = createContext<ContextType>({
|
2021-04-09 21:43:12 +02:00
|
|
|
reduceMotionEnabled: false,
|
2022-05-07 13:23:08 +02:00
|
|
|
screenReaderEnabled: false,
|
|
|
|
boldTextEnabled: false
|
2021-03-27 00:02:32 +01:00
|
|
|
})
|
|
|
|
|
|
|
|
export const useAccessibility = () => useContext(AccessibilityContext)
|
|
|
|
|
2022-08-07 01:18:10 +02:00
|
|
|
const AccessibilityManager: React.FC<PropsWithChildren> = ({ children }) => {
|
2021-03-27 00:02:32 +01:00
|
|
|
const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false)
|
2021-04-09 21:43:12 +02:00
|
|
|
const [screenReaderEnabled, setScreenReaderEnabled] = useState(false)
|
2022-05-07 13:23:08 +02:00
|
|
|
const [boldTextEnabled, setBoldTextEnabled] = useState(false)
|
2021-03-27 00:02:32 +01:00
|
|
|
|
|
|
|
const handleReduceMotionChanged = (reduceMotionEnabled: boolean) =>
|
|
|
|
setReduceMotionEnabled(reduceMotionEnabled)
|
|
|
|
|
2021-04-09 21:43:12 +02:00
|
|
|
const handleScreenReaderEnabled = (screenReaderEnabled: boolean) =>
|
|
|
|
setScreenReaderEnabled(screenReaderEnabled)
|
|
|
|
|
2022-05-07 13:23:08 +02:00
|
|
|
const handleBoldTextEnabled = (boldTextEnabled: boolean) =>
|
|
|
|
setBoldTextEnabled(boldTextEnabled)
|
|
|
|
|
2021-04-09 21:43:12 +02:00
|
|
|
const loadAccessibilityInfo = async () => {
|
2021-03-27 00:02:32 +01:00
|
|
|
const reduceMotion = await AccessibilityInfo.isReduceMotionEnabled()
|
2021-04-09 21:43:12 +02:00
|
|
|
const screenReader = await AccessibilityInfo.isScreenReaderEnabled()
|
2022-05-07 13:23:08 +02:00
|
|
|
const boldText = await AccessibilityInfo.isBoldTextEnabled()
|
2021-03-27 00:02:32 +01:00
|
|
|
setReduceMotionEnabled(reduceMotion)
|
2021-04-09 21:43:12 +02:00
|
|
|
setScreenReaderEnabled(screenReader)
|
2022-05-07 13:23:08 +02:00
|
|
|
setBoldTextEnabled(boldText)
|
2021-03-27 00:02:32 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
useEffect(() => {
|
2021-04-09 21:43:12 +02:00
|
|
|
loadAccessibilityInfo()
|
2021-03-27 00:02:32 +01:00
|
|
|
|
2021-12-18 19:59:38 +01:00
|
|
|
const reduceMotionSubscription = AccessibilityInfo.addEventListener(
|
2021-03-27 00:02:32 +01:00
|
|
|
'reduceMotionChanged',
|
|
|
|
handleReduceMotionChanged
|
|
|
|
)
|
2021-12-18 19:59:38 +01:00
|
|
|
const screenReaderSubscription = AccessibilityInfo.addEventListener(
|
2021-04-09 21:43:12 +02:00
|
|
|
'screenReaderChanged',
|
|
|
|
handleScreenReaderEnabled
|
|
|
|
)
|
2022-05-07 13:23:08 +02:00
|
|
|
const boldTextSubscription = AccessibilityInfo.addEventListener(
|
|
|
|
'boldTextChanged',
|
|
|
|
handleBoldTextEnabled
|
|
|
|
)
|
2021-03-27 00:02:32 +01:00
|
|
|
|
|
|
|
return () => {
|
2021-12-18 19:59:38 +01:00
|
|
|
reduceMotionSubscription.remove()
|
|
|
|
screenReaderSubscription.remove()
|
2022-05-07 13:23:08 +02:00
|
|
|
boldTextSubscription.remove()
|
2021-03-27 00:02:32 +01:00
|
|
|
}
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
return (
|
|
|
|
<AccessibilityContext.Provider
|
2022-05-07 13:23:08 +02:00
|
|
|
value={{ reduceMotionEnabled, screenReaderEnabled, boldTextEnabled }}
|
2021-03-27 00:02:32 +01:00
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</AccessibilityContext.Provider>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default AccessibilityManager
|