2021-03-27 00:02:32 +01:00
|
|
|
import React, { createContext, useContext, useEffect, useState } from 'react'
|
|
|
|
import { AccessibilityInfo } from 'react-native'
|
|
|
|
|
|
|
|
type ContextType = {
|
|
|
|
reduceMotionEnabled: boolean
|
2021-04-09 21:43:12 +02:00
|
|
|
screenReaderEnabled: boolean
|
2021-03-27 00:02:32 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
const AccessibilityContext = createContext<ContextType>({
|
2021-04-09 21:43:12 +02:00
|
|
|
reduceMotionEnabled: false,
|
|
|
|
screenReaderEnabled: false
|
2021-03-27 00:02:32 +01:00
|
|
|
})
|
|
|
|
|
|
|
|
export const useAccessibility = () => useContext(AccessibilityContext)
|
|
|
|
|
|
|
|
const AccessibilityManager: React.FC = ({ children }) => {
|
|
|
|
const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false)
|
2021-04-09 21:43:12 +02:00
|
|
|
const [screenReaderEnabled, setScreenReaderEnabled] = 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)
|
|
|
|
|
|
|
|
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()
|
2021-03-27 00:02:32 +01:00
|
|
|
setReduceMotionEnabled(reduceMotion)
|
2021-04-09 21:43:12 +02:00
|
|
|
setScreenReaderEnabled(screenReader)
|
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
|
|
|
|
)
|
2021-03-27 00:02:32 +01:00
|
|
|
|
|
|
|
return () => {
|
2021-12-18 19:59:38 +01:00
|
|
|
reduceMotionSubscription.remove()
|
|
|
|
screenReaderSubscription.remove()
|
2021-03-27 00:02:32 +01:00
|
|
|
}
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
return (
|
|
|
|
<AccessibilityContext.Provider
|
2021-04-09 21:43:12 +02:00
|
|
|
value={{ reduceMotionEnabled, screenReaderEnabled }}
|
2021-03-27 00:02:32 +01:00
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</AccessibilityContext.Provider>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default AccessibilityManager
|