Skip to content

[Bug] React Native app fails to classify messages due to string/number type mismatch #32

@Mohammad-Hassan027

Description

@Mohammad-Hassan027

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;

Metadata

Metadata

Labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions