[fix] Use MediaQuery event listener fallback

'addEventListener' is not supported by Safari <= 13, needs to fallback to 'addListener'

Close #1823

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;
   }
 };