diff --git a/packages/react-native-web/src/exports/AccessibilityInfo/index.js b/packages/react-native-web/src/exports/AccessibilityInfo/index.js index ac7bb125..c3a564a8 100644 --- a/packages/react-native-web/src/exports/AccessibilityInfo/index.js +++ b/packages/react-native-web/src/exports/AccessibilityInfo/index.js @@ -15,9 +15,10 @@ function isScreenReaderEnabled(): Promise<*> { }); } -const prefersReducedMotionMedia = canUseDOM - ? typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)') - : null; +const prefersReducedMotionMedia = + canUseDOM && typeof window.matchMedia === 'function' + ? window.matchMedia('(prefers-reduced-motion: reduce)') + : null; function isReduceMotionEnabled(): Promise<*> { return new Promise((resolve, reject) => { @@ -25,6 +26,22 @@ function isReduceMotionEnabled(): Promise<*> { }); } +function addChangeListener(fn) { + if (prefersReducedMotionMedia != null) { + prefersReducedMotionMedia.addEventListener != null + ? prefersReducedMotionMedia.addEventListener('change', fn) + : prefersReducedMotionMedia.addListener(fn); + } +} + +function removeChangeListener(fn) { + if (prefersReducedMotionMedia != null) { + prefersReducedMotionMedia.removeEventListener != null + ? prefersReducedMotionMedia.removeEventListener('change', fn) + : prefersReducedMotionMedia.removeListener(fn); + } +} + const handlers = {}; const AccessibilityInfo = { @@ -57,11 +74,10 @@ const AccessibilityInfo = { if (!prefersReducedMotionMedia) { return; } - const listener = event => { handler(event.matches); }; - prefersReducedMotionMedia.addEventListener('change', listener); + addChangeListener(listener); handlers[handler] = listener; } @@ -89,10 +105,8 @@ const AccessibilityInfo = { if (!listener || !prefersReducedMotionMedia) { return; } - - prefersReducedMotionMedia.removeEventListener('change', listener); + removeChangeListener(listener); } - return; } };