diff --git a/packages/react-strict-dom/src/native/modules/usePrefersReducedMotion.js b/packages/react-strict-dom/src/native/modules/usePrefersReducedMotion.js index 74441e31..16886ec9 100644 --- a/packages/react-strict-dom/src/native/modules/usePrefersReducedMotion.js +++ b/packages/react-strict-dom/src/native/modules/usePrefersReducedMotion.js @@ -11,34 +11,32 @@ import * as ReactNative from '../react-native'; import { useEffect, useState } from 'react'; -const hasReducedMotionAPI = - ReactNative?.AccessibilityInfo?.isReduceMotionEnabled; - export function usePrefersReducedMotion(): boolean { const [prefersReducedMotion, setPrefersReducedMotion] = useState(false); useEffect(() => { - if (hasReducedMotionAPI) { - // 1. Get the initial value of reduce motion - ReactNative.AccessibilityInfo.isReduceMotionEnabled().then( + // 1. Get the initial value of reduce motion + ReactNative.AccessibilityInfo.isReduceMotionEnabled().then( + (isReduceMotionEnabled) => { + setPrefersReducedMotion(isReduceMotionEnabled); + }, + () => { + // Silently ignore if the native module is not available (e.g., on VR) + } + ); + + // 2. Subscribe to changes in reduce motion + const reduceMotionChangedSubscription = + ReactNative.AccessibilityInfo.addEventListener( + 'reduceMotionChanged', (isReduceMotionEnabled) => { setPrefersReducedMotion(isReduceMotionEnabled); } ); - // 2. Subscribe to changes in reduce motion - const reduceMotionChangedSubscription = - ReactNative.AccessibilityInfo.addEventListener( - 'reduceMotionChanged', - (isReduceMotionEnabled) => { - setPrefersReducedMotion(isReduceMotionEnabled); - } - ); - - return () => { - reduceMotionChangedSubscription.remove(); - }; - } + return () => { + reduceMotionChangedSubscription.remove(); + }; }, []); return prefersReducedMotion;