Merge pull request #20 from ElielC/main

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

Author: LovesWorking

README.md

@@ -133,6 +133,7 @@ The `useSyncQueriesExternal` hook accepts the following options:
 | `deviceId`          | string       | Yes      | Unique identifier for your device                                       |
 | `extraDeviceInfo`   | object       | No       | Additional device metadata to display in DevTools                       |
 | `enableLogs`        | boolean      | No       | Enable console logging for debugging (default: false)                   |
+| `isDevice`          | boolean      | No       | Set to true if this is a device (default: false)                        |
 | `envVariables`      | object       | No       | Environment variables to sync with DevTools                             |
 | `mmkvStorage`       | MmkvStorage  | No       | MMKV storage instance for real-time monitoring                          |
 | `asyncStorage`      | AsyncStorage | No       | AsyncStorage instance for polling-based monitoring                      |

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

@@ -16,6 +16,12 @@ 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
 }
 
 /**
@@ -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);
@@ -86,7 +93,7 @@ export function useMySocket({
     };
 
     // Get the platform-specific URL
-    const platformUrl = getPlatformSpecificURL(socketURL, platform);
+    const platformUrl = getPlatformSpecificURL(socketURL, platform, isDevice);
     currentSocketURL = platformUrl;
 
     try {
@@ -159,7 +166,7 @@ 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) {

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(() => {