fix: React Native on web should report hardware type as Desktop or Mobile, not Web.

.changeset/clear-flowers-itch.md

@@ -0,0 +1,5 @@
+---
+'posthog-react-native': patch
+---
+
+fix: on react native running on the web should be Desktop or Mobile and not Web since its a hardware type and not platform

examples/example-expo-53/README.md

@@ -32,6 +32,7 @@ Or...
 ```bash
 npx expo run:ios
 npx expo run:android
+npx expo start --web
 ```
 
 If your RN SDK changes are not picked up:

packages/react-native/package.json

@@ -43,6 +43,8 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
+    "@babel/plugin-transform-class-properties": "^7.27.1",
+    "@babel/plugin-transform-private-methods": "^7.27.1",
     "@babel/plugin-transform-private-property-in-object": "^7.27.1",
     "@posthog-tooling/rollup-utils": "workspace:*",
     "@posthog-tooling/tsconfig-base": "workspace:*",

packages/react-native/src/native-deps.tsx

@@ -15,7 +15,35 @@ const getDeviceType = (): string => {
   if (Platform.OS === 'macos' || Platform.OS === 'windows') {
     deviceType = 'Desktop'
   } else if (Platform.OS === 'web') {
-    deviceType = 'Web'
+    // Check user agent to determine if it's desktop or mobile
+    const ua = navigator.userAgent
+
+    // Comprehensive mobile and tablet detection based on browser package logic
+    const isMobileOrTablet =
+      // iOS devices
+      /iPhone|iPod|iPad/i.test(ua) ||
+      // Android devices - check for mobile keyword or specific tablet models
+      (/Android/i.test(ua) &&
+        (/Mobile/i.test(ua) ||
+          // Android tablets that don't have 'Mobile' in UA
+          /(9138B|TB782B|Nexus [97]|pixel c|HUAWEISHT|BTV|noble nook|smart ultra 6)/i.test(ua))) ||
+      // Windows Phone
+      /(Windows Phone|WPDesktop|IEMobile)/i.test(ua) ||
+      // BlackBerry
+      /(BlackBerry|PlayBook|BB10)/i.test(ua) ||
+      // Other mobile browsers and devices
+      /webOS|Opera Mini|UCWEB|UCBrowser/i.test(ua) ||
+      // Kindle devices
+      /(kf[a-z]{2}wi|aeo[c-r]{2})( bui|\))/i.test(ua) ||
+      /(kf[a-z]+)( bui|\)).+silk\//i.test(ua) ||
+      // Generic mobile/tablet keywords
+      /(Mobile|Tablet|pda)/i.test(ua) ||
+      // Nokia
+      /Nokia/i.test(ua) ||
+      // Kobo e-readers
+      /(kobo)\s(ereader|touch)/i.test(ua)
+
+    deviceType = isMobileOrTablet ? 'Mobile' : 'Desktop'
   }
   return deviceType
 }

packages/react-native/src/posthog-rn.ts

@@ -85,7 +85,7 @@ export interface PostHogOptions extends PostHogCoreOptions {
    * - $app_namespace: App bundle identifier / namespace
    * - $os_name: Operating system name
    * - $os_version: Operating system version
-   * - $device_type: Device type (Mobile, Desktop, Web)
+   * - $device_type: Device type (Mobile, Desktop)
    * - $lib: Name of the SDK library
    * - $lib_version: Version of the SDK library
    *

packages/react-native/src/types.ts

@@ -78,7 +78,7 @@ export interface PostHogCustomAppProperties {
   $device_name?: string | null
   /** Model identifier like "iPhone13,2" or "SM-S921B" */
   $device_model?: string | null
-  /** Device type ("Mobile" | "Desktop" | "Web") */
+  /** Device type ("Mobile" | "Desktop") */
   $device_type?: string | null
   /** Operating system name like iOS or Android */
   $os_name?: string | null