1
0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00

Use global detection

This commit is contained in:
Zhiyuan Zheng
2022-05-07 13:23:08 +02:00
parent 7c48c61c99
commit ea0b85365e
2 changed files with 21 additions and 24 deletions

View File

@ -4,11 +4,13 @@ import { AccessibilityInfo } from 'react-native'
type ContextType = {
reduceMotionEnabled: boolean
screenReaderEnabled: boolean
boldTextEnabled: boolean
}
const AccessibilityContext = createContext<ContextType>({
reduceMotionEnabled: false,
screenReaderEnabled: false
screenReaderEnabled: false,
boldTextEnabled: false
})
export const useAccessibility = () => useContext(AccessibilityContext)
@ -16,6 +18,7 @@ export const useAccessibility = () => useContext(AccessibilityContext)
const AccessibilityManager: React.FC = ({ children }) => {
const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false)
const [screenReaderEnabled, setScreenReaderEnabled] = useState(false)
const [boldTextEnabled, setBoldTextEnabled] = useState(false)
const handleReduceMotionChanged = (reduceMotionEnabled: boolean) =>
setReduceMotionEnabled(reduceMotionEnabled)
@ -23,11 +26,16 @@ const AccessibilityManager: React.FC = ({ children }) => {
const handleScreenReaderEnabled = (screenReaderEnabled: boolean) =>
setScreenReaderEnabled(screenReaderEnabled)
const handleBoldTextEnabled = (boldTextEnabled: boolean) =>
setBoldTextEnabled(boldTextEnabled)
const loadAccessibilityInfo = async () => {
const reduceMotion = await AccessibilityInfo.isReduceMotionEnabled()
const screenReader = await AccessibilityInfo.isScreenReaderEnabled()
const boldText = await AccessibilityInfo.isBoldTextEnabled()
setReduceMotionEnabled(reduceMotion)
setScreenReaderEnabled(screenReader)
setBoldTextEnabled(boldText)
}
useEffect(() => {
@ -41,16 +49,21 @@ const AccessibilityManager: React.FC = ({ children }) => {
'screenReaderChanged',
handleScreenReaderEnabled
)
const boldTextSubscription = AccessibilityInfo.addEventListener(
'boldTextChanged',
handleBoldTextEnabled
)
return () => {
reduceMotionSubscription.remove()
screenReaderSubscription.remove()
boldTextSubscription.remove()
}
}, [])
return (
<AccessibilityContext.Provider
value={{ reduceMotionEnabled, screenReaderEnabled }}
value={{ reduceMotionEnabled, screenReaderEnabled, boldTextEnabled }}
>
{children}
</AccessibilityContext.Provider>