feat(platformUtils): add a prop to expecify if it`s a real device

Author: Eliel Calebi Nabas da Silveira

src/react-query-external-sync/platformUtils.ts

@@ -45,13 +45,15 @@ export const isReactNative = (): boolean => {
  */
 export const getPlatformSpecificURL = (
   baseUrl: string,
-  platform: PlatformOS
+  platform: PlatformOS,
+  isDevice: boolean
 ): string => {
   try {
     const url = new URL(baseUrl);
 
     // For Android emulator, replace hostname with 10.0.2.2
     if (
+      !isDevice &&
       platform === "android" &&
       (url.hostname === "localhost" || url.hostname === "127.0.0.1")
     ) {

src/react-query-external-sync/useMySocket.ts

@@ -1,8 +1,8 @@
-import { useEffect, useRef, useState } from 'react';
-import { io as socketIO, Socket } from 'socket.io-client';
+import { useEffect, useRef, useState } from "react";
+import { io as socketIO, Socket } from "socket.io-client";
 
-import { log } from './utils/logger';
-import { getPlatformSpecificURL, PlatformOS } from './platformUtils';
+import { log } from "./utils/logger";
+import { getPlatformSpecificURL, PlatformOS } from "./platformUtils";
 
 interface Props {
   deviceName: string; // Unique name to identify the device
@@ -16,14 +16,20 @@ interface Props {
    * @default false
    */
   enableLogs?: boolean;
+  /**
+   * Whether the app is running on a physical device or an emulator/simulator
+   * This can affect how the socket URL is constructed, especially on Android
+   * @default false
+   */
+  isDevice?: boolean; // Whether the app is running on a physical device
 }
 
 /**
  * Create a singleton socket instance that persists across component renders
  * This way multiple components can share the same socket connection
  */
 let globalSocketInstance: Socket | null = null;
-let currentSocketURL = '';
+let currentSocketURL = "";
 
 /**
  * Hook that handles socket connection for device-dashboard communication
@@ -43,6 +49,7 @@ export function useMySocket({
   envVariables,
   platform,
   enableLogs = false,
+  isDevice = false,
 }: Props) {
   const socketRef = useRef<Socket | null>(null);
   const [socket, setSocket] = useState<Socket | null>(null);
@@ -78,15 +85,19 @@ export function useMySocket({
     };
 
     const onConnectError = (error: Error) => {
-      log(`${logPrefix} Socket connection error: ${error.message}`, enableLogs, 'error');
+      log(
+        `${logPrefix} Socket connection error: ${error.message}`,
+        enableLogs,
+        "error"
+      );
     };
 
     const onConnectTimeout = () => {
-      log(`${logPrefix} Socket connection timeout`, enableLogs, 'error');
+      log(`${logPrefix} Socket connection timeout`, enableLogs, "error");
     };
 
     // Get the platform-specific URL
-    const platformUrl = getPlatformSpecificURL(socketURL, platform);
+    const platformUrl = getPlatformSpecificURL(socketURL, platform, isDevice);
     currentSocketURL = platformUrl;
 
     try {
@@ -102,18 +113,21 @@ export function useMySocket({
             envVariables: JSON.stringify(envVariables),
           },
           reconnection: false,
-          transports: ['websocket'], // Prefer websocket transport for React Native
+          transports: ["websocket"], // Prefer websocket transport for React Native
         });
       } else {
-        log(`${logPrefix} Reusing existing socket instance to ${platformUrl}`, enableLogs);
+        log(
+          `${logPrefix} Reusing existing socket instance to ${platformUrl}`,
+          enableLogs
+        );
       }
 
       socketRef.current = globalSocketInstance;
       setSocket(socketRef.current);
 
       // Setup error event listener
-      socketRef.current.on('connect_error', onConnectError);
-      socketRef.current.on('connect_timeout', onConnectTimeout);
+      socketRef.current.on("connect_error", onConnectError);
+      socketRef.current.on("connect_timeout", onConnectTimeout);
 
       // Check initial connection state
       if (socketRef.current.connected) {
@@ -122,31 +136,39 @@ export function useMySocket({
       }
 
       // Set up event handlers
-      socketRef.current.on('connect', onConnect);
-      socketRef.current.on('disconnect', onDisconnect);
+      socketRef.current.on("connect", onConnect);
+      socketRef.current.on("disconnect", onDisconnect);
 
       // Clean up event listeners on unmount but don't disconnect
       return () => {
         if (socketRef.current) {
           log(`${logPrefix} Cleaning up socket event listeners`, enableLogs);
-          socketRef.current.off('connect', onConnect);
-          socketRef.current.off('disconnect', onDisconnect);
-          socketRef.current.off('connect_error', onConnectError);
-          socketRef.current.off('connect_timeout', onConnectTimeout);
+          socketRef.current.off("connect", onConnect);
+          socketRef.current.off("disconnect", onDisconnect);
+          socketRef.current.off("connect_error", onConnectError);
+          socketRef.current.off("connect_timeout", onConnectTimeout);
           // Don't disconnect socket on component unmount
           // We want it to remain connected for the app's lifetime
         }
       };
     } catch (error) {
-      log(`${logPrefix} Failed to initialize socket: ${error}`, enableLogs, 'error');
+      log(
+        `${logPrefix} Failed to initialize socket: ${error}`,
+        enableLogs,
+        "error"
+      );
     }
     // ## DON'T ADD ANYTHING ELSE TO THE DEPENDENCY ARRAY ###
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [persistentDeviceId]);
 
   // Update the socket query parameters when deviceName changes
   useEffect(() => {
-    if (socketRef.current && socketRef.current.io.opts.query && persistentDeviceId) {
+    if (
+      socketRef.current &&
+      socketRef.current.io.opts.query &&
+      persistentDeviceId
+    ) {
       socketRef.current.io.opts.query = {
         ...socketRef.current.io.opts.query,
         deviceName,
@@ -159,18 +181,28 @@ export function useMySocket({
   // Update the socket URL when socketURL changes
   useEffect(() => {
     // Get platform-specific URL for the new socketURL
-    const platformUrl = getPlatformSpecificURL(socketURL, platform);
+    const platformUrl = getPlatformSpecificURL(socketURL, platform, isDevice);
 
     // Compare with last known URL to avoid direct property access
-    if (socketRef.current && currentSocketURL !== platformUrl && persistentDeviceId) {
-      log(`${logPrefix} Socket URL changed from ${currentSocketURL} to ${platformUrl}`, enableLogs);
+    if (
+      socketRef.current &&
+      currentSocketURL !== platformUrl &&
+      persistentDeviceId
+    ) {
+      log(
+        `${logPrefix} Socket URL changed from ${currentSocketURL} to ${platformUrl}`,
+        enableLogs
+      );
 
       try {
         // Only recreate socket if URL actually changed
         socketRef.current.disconnect();
         currentSocketURL = platformUrl;
 
-        log(`${logPrefix} Creating new socket connection to ${platformUrl}`, enableLogs);
+        log(
+          `${logPrefix} Creating new socket connection to ${platformUrl}`,
+          enableLogs
+        );
         globalSocketInstance = socketIO(platformUrl, {
           autoConnect: true,
           query: {
@@ -181,16 +213,29 @@ export function useMySocket({
             envVariables: JSON.stringify(envVariables),
           },
           reconnection: false,
-          transports: ['websocket'], // Prefer websocket transport for React Native
+          transports: ["websocket"], // Prefer websocket transport for React Native
         });
 
         socketRef.current = globalSocketInstance;
         setSocket(socketRef.current);
       } catch (error) {
-        log(`${logPrefix} Failed to update socket connection: ${error}`, enableLogs, 'error');
+        log(
+          `${logPrefix} Failed to update socket connection: ${error}`,
+          enableLogs,
+          "error"
+        );
       }
     }
-  }, [socketURL, deviceName, logPrefix, persistentDeviceId, platform, enableLogs, extraDeviceInfo, envVariables]);
+  }, [
+    socketURL,
+    deviceName,
+    logPrefix,
+    persistentDeviceId,
+    platform,
+    enableLogs,
+    extraDeviceInfo,
+    envVariables,
+  ]);
 
   /**
    * Manually connect to the socket server

src/react-query-external-sync/useSyncQueriesExternal.ts

@@ -146,6 +146,12 @@ interface useSyncQueriesExternalProps {
    * @default false
    */
   enableLogs?: boolean;
+  /**
+   * Whether the app is running on a physical device or an emulator/simulator
+   * This can affect how the socket URL is constructed, especially on Android
+   * @default false
+   */
+  isDevice?: boolean; // Whether the app is running on a physical device
 
   /**
    * Storage instances for different storage types
@@ -312,6 +318,7 @@ export function useSyncQueriesExternal({
   platform,
   deviceId,
   enableLogs = false,
+  isDevice = false,
   storage,
   mmkvStorage,
   asyncStorage,
@@ -439,6 +446,7 @@ export function useSyncQueriesExternal({
     envVariables: mergedEnvVariables,
     platform,
     enableLogs,
+    isDevice,
   });
 
   useEffect(() => {