I am working on an Android application using React-native and Expo, I built my AAB using Expo and published it on Google Play Store for android internal testing, everything is working fine except my socketio. but when I set my local/development react-native to fetch data from backend/api in production(local frontend making a request to production backend) the socketio works perfectly fine, but when I publish the frontend on Google for internal testing the socketio doesn't work properly when I make a request instead of to show data on my screen it shows blank white screen.

my app.json

  "expo": {
    "name": "isioma3",
    "slug": "isioma3",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "newArchEnabled": true,
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.kingsola",
      "permissions": ["INTERNET", "ACCESS_NETWORK_STATE"],
      "softwareKeyboardLayoutMode": "pan",
      "allowBackup": true,
      "config": {
        "useCleartextTraffic": true
      }
    },
    "ios": {
      "supportsTablet": true
    },
    "plugins": [
      [
        "expo-splash-screen",
        {
          "backgroundColor": "#2D3A44",
          "image": "./assets/icon.png",
          "imageWidth": 200
        }
      ]
    ],
    "extra": {
      "development": {
        "apiBaseUrl": ";,
        "REACT_APP_GOOGLE_MAPS_API_KEY": "",
        "APP_ENV": "development",
        "easBuildProfile": "development"
      },
      "preview": {
        "apiBaseUrl": ";,
        "REACT_APP_GOOGLE_MAPS_API_KEY": "",
        "APP_ENV": "preview",
        "easBuildProfile": "preview"
      },
      "production": {
        "apiBaseUrl": ";,
        "REACT_APP_GOOGLE_MAPS_API_KEY": "",
        "APP_ENV": "production",
        "easBuildProfile": "production"
      },
      "eas": {
        "projectId": ""
      }
    },
    "owner": "kings"
  }
}

my eas.json

  "cli": {
    "version": ">= 13.2.3",
    "appVersionSource": "remote"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "android": {
        "buildType": "apk",
        "gradleCommand": ":app:assembleDebug"
      }
    },
    "preview": {
      "distribution": "internal",
      "android": {
        "buildType": "apk",
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "production": {
      "autoIncrement": true,
      "android": {
        "buildType": "app-bundle",
        "gradleCommand": ":app:bundleRelease"
      }
    }
  },
  "submit": {
    "production": {
      "android": {
        "track": "internal",
        "releaseStatus": "completed"
      }
    }
  }
}

socketio frontend setup in my app

    if (!visible || !booking?.bookingId || !userId) {
      return;
    }

    isMounted.current = true; // Set isMounted to true when the modal is visible

    console.log("UserBookingModal useEffect triggered with:", {
      visible,
      bookingId: booking?.bookingId,
      userId: userId,
    });

    console.log("\n-----INITIALIZING SOCKET IN USERBOOKINGMODAL-----");
    console.log("Booking details:", {
      bookingId: booking.bookingId,
      userId: userId,
      status: booking.status,
    });

    // Clean up existing socket if any
    if (socketRef.current) {
      console.log("Cleaning up existing socket connection");
      socketRef.current.disconnect();
    }

    socketRef.current = io(apiBaseUrl, {
      transports: ["websocket"],
      reconnection: true,
      reconnectionDelay: 1000,
      reconnectionDelayMax: 5000,
      reconnectionAttempts: 5,
      extraHeaders: {
        "x-mobile-app": "true",
      },
    });

    socketRef.current.on("connect", () => {
      console.log(
        "Socket connected successfully with ID:",
        socketRef.current.id
      );

      // Authenticate and join rooms
      socketRef.current.emit("authenticate", {
        userId: userId,
        userType: "customer",
      });

      socketRef.current.emit("joinBookingRoom", booking.bookingId);

      console.log("In the user: Joined rooms for:", {
        userRoom: `user_${userId}`,
        bookingRoom: `booking_${booking.bookingId}`,
      });
    });

    const handleSocketErrors = () => {
      socketRef.current.on("connect_error", (error) => {
        console.error("Socket connection error:", error);
        showNotification("Connection error. Please try again.", "error");
      });

      socketRef.current.on("error", (error) => {
        console.error("Socket error:", error);
        showNotification("An error occurred. Please try again.", "error");
      });

      socketRef.current.on("reconnect", (attempt) => {
        console.log("Socket reconnected on attempt:", attempt);
        if (booking?.bookingId) {
          socketRef.current.emit("joinBookingRoom", booking.bookingId);
        }
      });
    };

whenever I make the booking instead of the data to display on the screen it shows white blank screen, it works perfectly well on local and if the local frontend makes a request to the production backend it also works fine, the problem only occurs when the android app on google internal testing is making requesting to the production backend.

is there something that I am doing wrong here.