The React Native mobile app (spamdetection/app/index.tsx) and the web frontend (frontend/src/App.jsx) are expecting different data types from the backend, causing the mobile app to fail when displaying predictions.
In api.py, the Flask API returns a string label by applying inverse_transform:
final_output = label_encoder.inverse_transform(prediction)[0]
return jsonify({"input": text, "prediction": final_output}) # Returns string like "ham" or "spam"
While the React Web App correctly expects strings (result === "ham"), the React Native app expects a number:
const resultInfo = typeof result === "number" ? LABEL_MAP[result] ?? null : null;
Actual Behavior:
Because result is a string, typeof result === "number" evaluates to false, causing the mobile app to fall back to the error state: "Error: could not classify message.".
Expected Behavior:
The mobile app should successfully map the response to the corresponding UI colors and emojis.
Suggested Fix:
Update LABEL_MAP and the type check in spamdetection/app/index.tsx to handle string keys instead of numbers to match App.jsx:
const LABEL_MAP: Record<string, { label: string; emoji: string; color: string }> = {
"ham": { label: "Safe Message", emoji: "✅", color: "#15803d" },
"spam": { label: "Spam Detected", emoji: "❌", color: "#dc2626" },
"smishing": { label: "Fraud Alert", emoji: "⚠️", color: "#ea580c" },
};
// Update the check
const resultInfo = typeof result === "string" ? LABEL_MAP[result] ?? null : null;
The React Native mobile app (
spamdetection/app/index.tsx) and the web frontend (frontend/src/App.jsx) are expecting different data types from the backend, causing the mobile app to fail when displaying predictions.In
api.py, the Flask API returns a string label by applyinginverse_transform:While the React Web App correctly expects strings (
result === "ham"), the React Native app expects a number:Actual Behavior:
Because
resultis a string,typeof result === "number"evaluates tofalse, causing the mobile app to fall back to the error state:"Error: could not classify message.".Expected Behavior:
The mobile app should successfully map the response to the corresponding UI colors and emojis.
Suggested Fix:
Update
LABEL_MAPand the type check inspamdetection/app/index.tsxto handle string keys instead of numbers to matchApp.jsx: