React Native + Arduino Portenta C33 UWB: Detecting and Listing Nearby Devices Using Mobile Data

Sep 18, 2025 |

14 minutes read

Real-Time Distance Alerts with MQTT, Arduino Portenta C33, and React Native

MQTT (Message Queuing Telemetry Transport) is a lightweight publish/subscribe protocol designed for fast, reliable messaging across networks.
In this project, I used MQTT to connect an Arduino Portenta C33 with a React Native mobile app, enabling real-time distance alerts—even when the hardware and the phone are on different Wi-Fi or mobile data networks.

The system measures (or simulates) Ultra-Wideband (UWB) distance, sends the data to the cloud, and triggers vibration patterns and Text-to-Speech (TTS) warnings on the phone based on distance thresholds.

Purpose of the Project

Measure distance between a mobile phone and an Arduino Portenta C33 using UWB (Ultra-Wideband) signals.
Provide instant vibration patterns and Text-to-Speech (TTS) voice alerts depending on the distance.
Track GPS coordinates and show both UWB and GPS distance on a map.

Alerts follow these thresholds

Distance (cm)	Vibration	Voice
< 10	Continuous	“Less than ten centimeters from device”
10 – 50	Double beep	“Fifty centimeters from device”
51 – 100	Single beep	“One meter from device”
> 100	None	—

Key Components

Arduino / Portenta C33

Connects to Wi-Fi.
Reads or simulates UWB distance.
Publishes JSON messages to an MQTT broker every second.

// Example JSON published:

{“device”:”portenta_c33″,”distance_cm”:47}

Node.js WebSocket Bridge (server.js)

Subscribes to the MQTT topic portenta/uwb.

Forwards each MQTT message to all connected WebSocket clients (the mobile app).
Handles reconnection automatically.

React Native Mobile App

Opens a WebSocket to the Node bridge.
Receives live UWB distance data.
Calculates GPS distance using the Haversine formula.
Triggers vibration and Text-to-Speech alerts.

How MQTT Makes Cross-Network Communication Possible

MQTT is a lightweight publish/subscribe protocol.

Workflow:

Publisher (Portenta C33)

Publishes sensor data to the topic portenta/uwb on a cloud MQTT broker (HiveMQ).

Broker (HiveMQ Cloud)

Publicly accessible over the internet.
Stores no history—just instantly forwards messages to all subscribers.

Subscriber (Node WebSocket Bridge)

Subscribes to portenta/uwb.
Forwards every message to the React Native app.

Because the broker is in the cloud:

The Portenta and the mobile phone can be on entirely different networks—Wi-Fi, 4G, etc.—and still communicate in real time.

End-to-End Data Flow

Portenta C33

(UWB sensor)

| MQTT Publish (JSON distance data)

HiveMQ Cloud Broker

| MQTT Subscribe

Node.js WebSocket Bridge

| WebSocket Messages

React Native Mobile App

– Vibrates & speaks alerts

– Displays UWB + GPS distance on map

Arduino (Publisher): Publishes distance data to HiveMQ every second.

MQTT Broker (HiveMQ): Cloud service that instantly forwards messages to all subscribers.

Node.js WebSocket Bridge: Subscribes to the MQTT topic and forwards data to the mobile app.

React Native App: Connects via WebSocket, receives updates, and triggers alerts.

Because the broker is cloud-based, the Arduino and phone can be on entirely different networks (Wi-Fi, 4G, etc.) and still communicate instantly.

Setting Up the MQTT Broker

Sign up for HiveMQ Cloud (free tier).
Create a topic, e.g. portenta/uwb.
Note the broker URL and port (1883 for non-TLS or 8883 for TLS).

Arduino Code (Portenta C33)

Use these libraries:

#include <WiFiC3.h>

#include <ArduinoMqttClient.h>

#include <ArduinoJson.h>

Connect to Wi-Fi and publish JSON payloads:

mqttClient.beginMessage(“portenta/uwb”);

mqttClient.print(distanceData);

mqttClient.endMessage();

This sends messages like:

{“device”:”portenta_c33″,”distance_cm”:47}

Node.js WebSocket Bridge (server.js)

Uses mqtt.js to connect to HiveMQ.
Uses ws to create a WebSocket server.
Forwards each MQTT message to connected React Native clients.
Automatically reconnects on failure.

React Native Code

Install dependencies

npm install mqtt react-native-get-random-values react-native-url-polyfill

Connect to the MQTT broker via WebSocket:

const client = mqtt.connect(“wss://broker.hivemq.com:8000/mqtt”);

client.on(“connect”, () => client.subscribe(“portenta/uwb”));

client.on(“message”, (topic, message) => {

const distance = JSON.parse(message.toString());

// Trigger vibration & TTS based on distance thresholds

});

Real-time features include:

Distance-based vibration (continuous, double, single).
Voice alerts using expo-speech.
Haptic feedback via expo-haptics or the React Native Vibration API.
GPS distance calculation with the Haversine formula.

Why This Architecture Works

Real-time: MQTT’s publish/subscribe model keeps latency typically under 100 ms.
Cross-network: Only internet access is needed; no shared LAN required.
Scalable: Additional sensors or apps can subscribe with no extra code.
Cross-platform: React Native runs on both iOS and Android.

Challenges and Solutions

Different Networks: Tested with Arduino on Wi-Fi and the phone on mobile data—works perfectly through the cloud broker.
Low Latency: MQTT’s lightweight protocol ensures near-instant updates.
Reliability: Node.js bridge auto-reconnects to prevent data loss.

Simple Summary for a Demo or Meeting

Our Portenta C33 reads UWB distance and publishes it every second to a public MQTT broker.
A Node.js server subscribes to that topic and forwards the data to our React Native app via WebSocket.
The app vibrates and speaks alerts—continuous, double, or single beeps—based on distance, and also shows GPS distance on a map.
Because everything goes through the cloud MQTT broker, the phone and the Portenta can be on completely different networks and still communicate instantly

React Native + Portenta: Seamless BLE integration

The Way Forward

By combining React Native, Arduino, and MQTT, you can build IoT solutions that are real-time, scalable, and network-independent.
This project shows how a lightweight messaging protocol can seamlessly connect hardware sensors to mobile apps for instant feedback across any network.