feat/support-for-react-native-device-info (#62)

* feat/support-for-react-native-device-info

* fix: separated device info function

* updated lockfile

* requested changes

* formatting

---------

Co-authored-by: Mateusz Turbański <Mateusz.turbanski@swmansion.com>

Author: SikoraKam

README.md

@@ -41,7 +41,11 @@ npm install @swmansion/react-native-detour
 Install required peer dependencies:
 
 ```sh
-npm install expo-localization expo-clipboard expo-constants expo-device @react-native-async-storage/async-storage expo-application
+npm install expo-localization expo-clipboard expo-constants @react-native-async-storage/async-storage expo-application
+# Pick ONE of the device-info providers:
+npm install expo-device
+# – or –
+npm install react-native-device-info
 ```
 
 > You can override the default persistent storage (@react-native-async-storage/async-storage) by providing an alternative storage implementation. Pass your custom storage object via the configuration settings.

packages/react-native-detour/package.json

@@ -93,11 +93,18 @@
     "expo-device": ">=7.0.0",
     "expo-localization": ">=15.0.0",
     "react": ">=18",
-    "react-native": ">=0.72"
+    "react-native": ">=0.72",
+    "react-native-device-info": ">=10.0.0"
   },
   "peerDependenciesMeta": {
     "@react-native-async-storage/async-storage": {
       "optional": true
+    },
+    "expo-device": {
+      "optional": true
+    },
+    "react-native-device-info": {
+      "optional": true
     }
   },
   "jest": {

packages/react-native-detour/src/links/api/sendUniversalLinkClick.ts

@@ -1,10 +1,10 @@
 import { Platform } from "react-native";
 
 import Constants from "expo-constants";
-import * as Device from "expo-device";
 
 import { SDK_HEADER_VALUE } from "../../version";
 import type { RequiredConfig } from "../types";
+import { getSyncDeviceInfo } from "../utils/deviceInfo";
 
 const API_URL = "https://godetour.dev/api/link/universal-link-click";
 
@@ -47,11 +47,14 @@ const extractParams = (url: string): Record<string, string> | undefined => {
 };
 
 const buildMetadata = (): Record<string, string> => {
+  const { model, osVersion } = getSyncDeviceInfo();
+
   const raw: Record<string, string | null | undefined> = {
-    os_version: Device.osVersion,
+    os_version: osVersion,
     app_version: Constants.nativeAppVersion,
-    device_model: Device.modelName,
+    device_model: model,
   };
+
   return Object.fromEntries(
     Object.entries(raw).filter((entry): entry is [string, string] => typeof entry[1] === "string"),
   );

packages/react-native-detour/src/links/utils/deviceInfo.ts

@@ -0,0 +1,130 @@
+type ExpoDeviceModule = {
+  modelName?: string | null;
+  manufacturer?: string | null;
+  osVersion?: string | null;
+};
+
+type ReactNativeDeviceInfoModule = {
+  getModel?: () => string;
+  getSystemVersion?: () => string;
+  getManufacturerSync?: () => string;
+  getManufacturer?: () => Promise<string>;
+};
+
+type DeviceInfo = {
+  model: string;
+  manufacturer: string;
+  osVersion: string;
+};
+
+type SyncDeviceInfo = Pick<DeviceInfo, "model" | "osVersion">;
+
+const UNKNOWN = "unknown";
+
+const normalizeValue = (value: unknown): string => {
+  if (typeof value === "string" && value.trim().length > 0) {
+    return value;
+  }
+  if (typeof value === "number") {
+    return String(value);
+  }
+  return UNKNOWN;
+};
+
+const firstKnown = (...candidates: (() => unknown)[]): string => {
+  for (const fn of candidates) {
+    const value = normalizeValue(fn());
+    if (value !== UNKNOWN) {
+      return value;
+    }
+  }
+
+  return UNKNOWN;
+};
+
+const firstKnownAsync = async (
+  ...candidates: (() => unknown | Promise<unknown>)[]
+): Promise<string> => {
+  for (const fn of candidates) {
+    const value = normalizeValue(await fn());
+    if (value !== UNKNOWN) {
+      return value;
+    }
+  }
+
+  return UNKNOWN;
+};
+
+// Metro needs string literal in require() during bundle time, with previous version it caused errors
+const expoDevice = (() => {
+  try {
+    return require("expo-device") as ExpoDeviceModule;
+  } catch {
+    return null;
+  }
+})();
+
+const reactNativeDeviceInfo = (() => {
+  try {
+    return require("react-native-device-info") as ReactNativeDeviceInfoModule;
+  } catch {
+    return null;
+  }
+})();
+
+const getModel = (): string => {
+  return firstKnown(
+    () => expoDevice?.modelName,
+    () => reactNativeDeviceInfo?.getModel?.(),
+  );
+};
+
+const getOsVersion = (): string => {
+  return firstKnown(
+    () => expoDevice?.osVersion,
+    () => reactNativeDeviceInfo?.getSystemVersion?.(),
+  );
+};
+
+const getManufacturer = async (): Promise<string> => {
+  return firstKnownAsync(
+    () => expoDevice?.manufacturer,
+    async () => {
+      try {
+        return await reactNativeDeviceInfo?.getManufacturer?.();
+      } catch {
+        return UNKNOWN;
+      }
+    },
+    () => reactNativeDeviceInfo?.getManufacturerSync?.(),
+  );
+};
+
+const assertDeviceInfoLibraryAvailable = (): void => {
+  if (!expoDevice && !reactNativeDeviceInfo) {
+    throw new Error(
+      '[react-native-detour] No device info library found. Install either "expo-device" or "react-native-device-info".',
+    );
+  }
+};
+
+export const getSyncDeviceInfo = (): SyncDeviceInfo => {
+  assertDeviceInfoLibraryAvailable();
+
+  return {
+    model: getModel(),
+    osVersion: getOsVersion(),
+  };
+};
+
+export const getDeviceInfo = async (): Promise<DeviceInfo> => {
+  assertDeviceInfoLibraryAvailable();
+
+  const manufacturer = await getManufacturer();
+
+  return {
+    model: getModel(),
+    manufacturer,
+    osVersion: getOsVersion(),
+  };
+};

packages/react-native-detour/src/links/utils/fingerprint.ts

@@ -2,9 +2,10 @@ import { Dimensions, PixelRatio, Platform } from "react-native";
 
 import * as Clipboard from "expo-clipboard";
 import Constants from "expo-constants";
-import * as Device from "expo-device";
 import * as Localization from "expo-localization";
 
+import { getDeviceInfo } from "./deviceInfo";
+
 export type ProbabilisticFingerprint = {
   platform: string;
   model: string;
@@ -40,19 +41,7 @@ export const getProbabilisticFingerprint = async (
     languageTag: locale.languageTag,
   }));
 
-  const normalizeValue = (value: unknown): string => {
-    if (typeof value === "string" && value.trim().length > 0) {
-      return value;
-    }
-    if (typeof value === "number") {
-      return String(value);
-    }
-    return "unknown";
-  };
-
-  const model = normalizeValue(Device.modelName);
-  const manufacturer = normalizeValue(Device.manufacturer);
-  const systemVersion = normalizeValue(Device.osVersion);
+  const { model, manufacturer, osVersion: systemVersion } = await getDeviceInfo();
 
   let userAgent = "unknown";
   if (typeof Constants.getWebViewUserAgentAsync === "function") {