Clean up

package.json

@@ -59,7 +59,7 @@
     "eslint": "^6.6.0",
     "eslint-config-universe": "^2.0.0",
     "expo": "^38.0.0",
-    "expo-module-scripts": "^1.1.1",
+    "expo-module-scripts": "^1.2.0",
     "jest-expo": "^35.0.0",
     "prettier": "^1.19.1",
     "react": "^16.11.0",

src/MediaQueryList.ts

@@ -0,0 +1,79 @@
+import { Subscription } from "@unimodules/core";
+import mediaQuery from "css-mediaquery";
+import * as ScreenOrientation from "expo-screen-orientation";
+import { Dimensions } from "react-native";
+
+type Listener = (context: MediaQueryList) => any;
+
+/**
+ * A pseudo implementation of MediaQueryList
+ * https://www.w3.org/TR/css3-mediaqueries/
+ */
+export default class MediaQueryList /* extends MediaQueryList */ {
+  private listeners: Listener[] = [];
+
+  private orientation: ScreenOrientation.Orientation =
+    ScreenOrientation.Orientation.PORTRAIT_UP;
+
+  private unsubscribe: Subscription;
+
+  constructor(private query: string) {
+    (async () => {
+      try {
+        const orientation = await ScreenOrientation.getOrientationAsync();
+        this.updateListeners({ orientation });
+      } catch (_) {}
+    })();
+
+    this.unsubscribe = ScreenOrientation.addOrientationChangeListener(
+      ({ orientationInfo: { orientation } }) => {
+        this.updateListeners({ orientation });
+      }
+    );
+
+    Dimensions.addEventListener("change", this.resize);
+  }
+
+  private resize = () => {
+    this.updateListeners({ orientation: this.orientation });
+  };
+
+  // TODO: find an automatic interface for unmounting
+  _unmount() {
+    if (this.unsubscribe) {
+      this.unsubscribe.remove();
+    }
+    Dimensions.removeEventListener("change", this.resize);
+  }
+
+  public addListener(listener: Listener) {
+    this.listeners.push(listener);
+  }
+
+  public removeListener(listener: Listener) {
+    const index = this.listeners.indexOf(listener);
+    if (index !== -1) this.listeners.splice(index, 1);
+  }
+
+  public get matches(): boolean {
+    const windowDimensions = Dimensions.get("window");
+    return mediaQuery.match(this.query, {
+      type: "screen",
+      orientation:
+        this.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
+        this.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT
+          ? "landscape"
+          : "portrait",
+      ...windowDimensions,
+      "device-width": windowDimensions.width,
+      "device-height": windowDimensions.height
+    });
+  }
+
+  private updateListeners({ orientation }) {
+    this.orientation = orientation;
+    this.listeners.forEach(listener => {
+      listener(this);
+    });
+  }
+}

src/polyfill.native.ts

@@ -1,77 +1,6 @@
-import { Subscription } from "@unimodules/core";
-import mediaQuery from "css-mediaquery";
-import * as ScreenOrientation from "expo-screen-orientation";
-import { Dimensions } from "react-native";
+import MediaQueryList from "./MediaQueryList";
 
-type Listener = (context: MediaQuery) => any;
-
-class MediaQuery {
-  private listeners: Listener[] = [];
-
-  private orientation: ScreenOrientation.Orientation =
-    ScreenOrientation.Orientation.PORTRAIT_UP;
-
-  private unsubscribe: Subscription;
-
-  constructor(private query: string) {
-    // @ts-ignore
-    (async () => {
-      const orientation = await ScreenOrientation.getOrientationAsync();
-      this.updateListeners({ orientation });
-    })();
-
-    this.unsubscribe = ScreenOrientation.addOrientationChangeListener(
-      ({ orientationInfo: { orientation } }) => {
-        this.updateListeners({ orientation });
-      }
-    );
-
-    Dimensions.addEventListener("change", this.resize);
-  }
-
-  private resize = () => {
-    this.updateListeners({ orientation: this.orientation });
-  };
-
-  _unmount() {
-    if (this.unsubscribe) this.unsubscribe.remove();
-    Dimensions.removeEventListener("change", this.resize);
-  }
-
-  public addListener(listener: Listener) {
-    this.listeners.push(listener);
-  }
-
-  public removeListener(listener: Listener) {
-    const index = this.listeners.indexOf(listener);
-    if (index !== -1) this.listeners.splice(index, 1);
-  }
-
-  // @ts-ignore
-  public get matches(): boolean {
-    const windowDimensions = Dimensions.get("window");
-    return mediaQuery.match(this.query, {
-      type: "screen",
-      orientation:
-        this.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
-        this.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT
-          ? "landscape"
-          : "portrait",
-      ...windowDimensions,
-      "device-width": windowDimensions.width,
-      "device-height": windowDimensions.height
-    });
-  }
-
-  private updateListeners({ orientation }) {
-    this.orientation = orientation;
-    this.listeners.forEach(listener => {
-      listener(this);
-    });
-  }
-}
-
-if (window) {
-  // @ts-ignore
-  window.matchMedia = mediaQueryString => new MediaQuery(mediaQueryString);
+if (typeof window !== "undefined") {
+  // @ts-ignore: does not properly extend MediaQueryList
+  window.matchMedia = (query: string) => new MediaQueryList(query);
 }

tsconfig.json

@@ -1,4 +1,3 @@
-// @generated by expo-module-scripts
 {
   "extends": "expo-module-scripts/tsconfig.base",
   "compilerOptions": {