Skip to content

Instantly share code, notes, and snippets.

@khadorkin
Forked from martsie/useReduceMotion.ts
Created February 9, 2022 16:24
Show Gist options
  • Save khadorkin/b1a85bb455e9c8bb288c8c67e733002a to your computer and use it in GitHub Desktop.
Save khadorkin/b1a85bb455e9c8bb288c8c67e733002a to your computer and use it in GitHub Desktop.
useReduceMotion hook for ReactNative
import { useEffect, useState } from 'react'
import { AccessibilityInfo } from 'react-native'
// Adapted from https://github.com/infiniteluke/react-reduce-motion/blob/master/src/targets/native/index.js
export const useReduceMotion = (): boolean => {
const [shouldReduceMotion, setShouldReduceMotion] = useState(false)
useEffect(() => {
const handleChange = (isReduceMotionEnabled: boolean): void => {
setShouldReduceMotion(isReduceMotionEnabled)
}
async function init(): Promise<void> {
handleChange(await AccessibilityInfo.isReduceMotionEnabled())
}
init()
AccessibilityInfo.addEventListener('reduceMotionChanged', handleChange)
return (): void => {
AccessibilityInfo.removeEventListener('reduceMotionChanged', handleChange)
}
}, [])
return shouldReduceMotion
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment