Socketio funktioniert nicht bei Android-Tests, die mit React-native Expo erstellt wurden ⇐ Android

[Guest]

Ich arbeite an einer Android-Anwendung mit React-native und Expo. Ich habe mein AAB mit Expo erstellt und es für interne Android-Tests im Google Play Store veröffentlicht. Bis auf mein Socketio funktioniert alles einwandfrei. Aber wenn ich mein lokales/Entwicklungs-React-Native so einstelle, dass es Daten vom Backend/API in der Produktion abruft (lokales Frontend stellt eine Anfrage an das Produktions-Backend), funktioniert das Socketio einwandfrei, aber wenn ich das Frontend für interne Tests auf Google veröffentliche, funktioniert das Socketio nicht Funktioniert nicht richtig, wenn ich eine Anfrage stelle, anstatt Daten auf meinem Bildschirm anzuzeigen, wird ein leerer weißer Bildschirm angezeigt.
meine app.json

Code: Select all

  "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": "https://myapp.fly.dev",
"REACT_APP_GOOGLE_MAPS_API_KEY": "",
"APP_ENV": "development",
"easBuildProfile": "development"
},
"preview": {
"apiBaseUrl": "https://myapp.fly.dev",
"REACT_APP_GOOGLE_MAPS_API_KEY": "",
"APP_ENV": "preview",
"easBuildProfile": "preview"
},
"production": {
"apiBaseUrl": "https://myapp.fly.dev",
"REACT_APP_GOOGLE_MAPS_API_KEY": "",
"APP_ENV": "production",
"easBuildProfile": "production"
},
"eas": {
"projectId": ""
}
},
"owner": "kings"
}
}

meine eas.json

Code: Select all

  "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-Einrichtung in meiner App

Code: Select all

    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);
}
});
};

Immer wenn ich die Buchung vornehme, wird anstelle der auf dem Bildschirm anzuzeigenden Daten ein weißer, leerer Bildschirm angezeigt. Auf der lokalen Ebene funktioniert es einwandfrei, und wenn das lokale Frontend eine Anfrage an das Produktions-Backend stellt, wird es angezeigt Funktioniert auch einwandfrei, das Problem tritt nur auf, wenn die Android-App bei internen Google-Tests Anfragen an das Produktions-Backend stellt.
Mache ich hier etwas falsch?