IoT With React Native: Build Cross‑Platform Apps That Talk to Devices

Smart home sensors that ping your phone. Fitness trackers that sync steps. Factory monitors that alert when a line stops. That is the Internet of Things in action. It links small devices to apps and cloud services so people can see data and control stuff in real time.

If you want one mobile app for iOS and Android, you want speed, and you want a strong UI, React Native is a great fit. You write one codebase, tap a deep ecosystem, and ship faster. In this guide, you will learn the pieces you need for IoT React Native projects, from device links to cloud sync, with a sample plan you can ship.

You will learn core IoT flows, React Native libraries, a sample ESP32 project, performance basics, security best practices, and production tips. This guide is for mobile devs new to hardware, web devs moving to mobile, and product teams that need a rapid prototype. Jargon stays light, and each new term gets a plain definition.

How IoT works with React Native, in plain English

Think of four parts: the device, the phone, the cloud, and the user. A device has sensors, like temperature, and actuators, like a relay. The phone connects to the device nearby, or via the internet. The cloud stores data, sends alerts, and handles rules. The app shows live status and lets users control safe actions.

A simple mental model:

• The device makes data and accepts commands.
• The phone connects by BLE (Bluetooth Low Energy), local Wi‑Fi, or over the internet with MQTT, WebSockets, or HTTP.
• The cloud stores data, triggers alerts, and pushes updates.
• The app renders live views, graphs, and controls with guardrails.

Why React Native helps:

• One codebase for iOS and Android, with fast iteration.
• A strong ecosystem for BLE, MQTT, charts, and storage.
• The new architecture improves speed. Fabric boosts UI updates, TurboModules enable faster native calls, Hermes trims app size and startup, and JSI lowers bridge overhead. That means smoother graphs and quicker device controls.

Limits to note:

• iOS has strict background rules. BLE in the background needs proper modes.
• Some radio features require native modules.
• Radios have power and range limits. Design around them.

React Native fits best for consumer apps, dashboards, and control panels where you need rich UI, frequent updates, and shared code.

Device to app connection options: BLE, Wi‑Fi, and Matter explained

Different links suit different jobs. Pick based on range, power, setup, and bandwidth.

OptionBest forProsConsBLEWearables, sensors, toysLow power, easy pairing, nearby useShort range, small payloadsLocal Wi‑Fi/LANCameras, hubs, high data devicesHigher bandwidth, local controlNetwork setup, security complexityMatter (Wi‑Fi/Thread)Smart home lights, plugs, sensorsEasier onboarding, shared standardThread often needs a hub, evolving APIs

Rules of thumb:

• Use BLE when battery life matters and the phone is nearby.
• Use local Wi‑Fi when you need video, higher rates, or a hub model.
• Use Matter when you target home platforms and want smoother onboarding.

Power, range, and setup:

• BLE sips power, ranges a room or two, and pairs in-app.
• Wi‑Fi uses more power, covers the home, and needs credentials.
• Thread (with Matter) balances power and range, but may need a border router.

Protocols you will use: MQTT, WebSockets, HTTP, and CoAP

You will likely mix more than one protocol across device, app, and cloud.

• MQTT: A pub/sub protocol with topics, quality of service (QoS), and retained messages. Great for telemetry and commands. Use QoS 1 for important commands. Use retained messages for last known state.
• WebSockets: A full duplex socket over HTTP(S). Good for direct app to cloud updates when you control the backend.
• HTTP: Simple for setup flows, firmware checks, and REST APIs. Not ideal for live streams.
• CoAP: A light request/response protocol for constrained devices. Often used behind a gateway that talks MQTT or HTTP to the cloud.

A quick MQTT topic plan:

• devices/{deviceId}/telemetry (QoS 0 or 1, retained off)
• devices/{deviceId}/state (retained on for last known state)
• devices/{deviceId}/commands (QoS 1 for critical commands)
• devices/{deviceId}/events (errors, warnings)

Offline handling:

• Retain last state on the broker.
• Queue commands on the app when offline. Flush with backoff on reconnect.
• Set clean session false for MQTT clients that need persistent subscriptions.

React Native architecture you should know in 2025

React Native’s new architecture matters for IoT because your app updates fast and often.

• Fabric: New UI layer for faster, more predictable updates.
• TurboModules: Faster native module calls, which helps BLE and sensors.
• Hermes: A JavaScript engine that reduces size and cold start times.
• JSI: A lightweight interface for JS to talk to native without the old bridge cost.

Platform rules:

• iOS 17: Tighter background limits, more granular Bluetooth permissions, and clear user prompts required.
• Android 15: Foreground service types, exact alarms, and new Bluetooth permissions. Ask only what you need.

When to go bare vs Expo:

• Start with Expo for speed. Move to bare if you need custom native modules, advanced BLE pairing flows, or background scans.

Should you choose React Native or build fully native?

Pick React Native when speed matters, you want one codebase, and your UI needs polish, and your needs align with well supported libraries. Choose Swift or Kotlin when you require heavy background processing, strict compliance in medical or automotive, or deeply customized hardware integrations.

Prototype early. Run a proof of concept on both platforms, measure connect time, packet loss, throughput, and battery impact before you lock in your stack.

React Native IoT stack and libraries that actually work

Focus on proven parts with active maintenance.

• Device comms: react-native-ble-plx (BLE), mqtt.js over WebSockets, react-native-udp or TCP sockets for special cases, react-native-permissions for prompts.
• State management: Zustand, Redux Toolkit, or Recoil.
• Storage: SQLite (react-native-sqlite-storage), Realm, WatermelonDB.
• Cloud: AWS IoT Core, EMQX, HiveMQ Cloud, Firebase for auth and push.
• UI: React Native Reanimated, Victory Native or react-native-svg-charts, React Navigation.

Always check platform notes, permissions, and background modes. Radio rules change, and small misses cause big bugs.

Bluetooth Low Energy in React Native with react-native-ble-plx

Core steps:

• Scan and filter by service UUID to find your device.
• Connect, then discover services and characteristics.
• Read and write characteristics.
• Subscribe to notifications for live updates.

Helpful tips:

• Keep payloads small. Chunk larger data across packets.
• Use MTU negotiation where supported to raise throughput.
• Handle bonding and pairing prompts. Retry with calm backoff.
• On iOS, request the correct background modes and provide a clear reason for Bluetooth use in Info.plist.

Alternates or helpers:

• react-native-permissions for permission prompts.
• Write a native module if you need advanced secure pairing or background scanning on both platforms.

MQTT in React Native: WebSockets, brokers, and offline support

Use mqtt.js over secure WebSockets in mobile apps. Plan your topic tree with deviceId. Set clean session based on your offline strategy, and use QoS 1 for important commands.

Broker options:

• EMQX and HiveMQ Cloud for managed MQTT with rules.
• Mosquitto for a simple, self-hosted setup.
• AWS IoT Core for scale, rules to DynamoDB or Lambda, and fine policies.

Security:

• Use TLS. Prefer client certificates with AWS IoT Core and policies scoped to deviceId.
• Pin certificates in the app when possible.
• Rotate credentials and expire tokens.

Offline patterns:

• Queue outgoing messages locally. Flush with exponential backoff and jitter.
• Use retained messages for last known state.
• Store the last N readings to show a stable UI when offline.

Cloud and backend picks for IoT apps

Good choices:

• AWS IoT Core with Lambda and DynamoDB when you need scale and rules engines.
• Firebase for auth, Firestore, FCM pushes, and simple dashboards.
• Azure IoT Hub if your team already runs on Azure.
• EMQX or HiveMQ for managed MQTT with flexible routing.

Watch your API gateway usage, apply strict rate limits, and handle push notifications with FCM on Android and APNs on iOS. Google Cloud IoT Core is sunset, so choose a different device messaging path, such as AWS IoT Core, EMQX, or HiveMQ.

UI patterns that make device control simple

Simple patterns win trust:

• Live tiles and status badges for quick health checks.
• Big, safe controls with confirmation for risky actions.
• Graphs with time ranges, and show gaps when offline.
• Pairing wizards with progress steps, QR codes for onboarding, and plain language errors.

Helpful tools:

• Use Zustand or Redux Toolkit for clear state.
• Use SQLite, Realm, or WatermelonDB for offline-first reads and writes.

Build a sample: ESP32 smart sensor with a React Native app

You will ship a small, real app. Use an ESP32 with a temperature and humidity sensor. Use BLE for local control and MQTT for cloud sync.

Success criteria:

• Read sensor data and update live.
• Send a command to set sample rate.
• Show last known state when offline.
• Reconnect within a few seconds after a drop.

Set up the device firmware and data model

Pick PlatformIO, Arduino IDE, or ESP‑IDF for firmware.

Data model:

• reading: temperature, humidity
• timestamp: ISO or epoch
• battery: percent
• setting: sampleRateSec (writable)

BLE GATT:

• Service: Sensor Service UUID
• Characteristics: readings (notify, read), battery (read), sampleRate (read, write)

MQTT topics:

• devices/{id}/telemetry (QoS 0 or 1)
• devices/{id}/state (retained)
• devices/{id}/commands (QoS 1)

Stretch goal:

• OTA firmware update with version checks and rollback.

Create the React Native app with Expo or bare workflow

Start with Expo for speed. Move to bare if you need advanced BLE background features.

Setup steps:

• Install BLE and MQTT libraries.
• Add Bluetooth and network permissions on iOS and Android.
• Use env files for broker URLs and keys.

Screens to map:

• Device Scan and Connect
• Dashboard with live readings and a simple trend chart
• Settings with sample rate control
• Help with logs, device info, and support links

Manage real-time state, storage, and offline mode

Keep connection state and device state separate. Use a small store like Zustand or Redux Toolkit.

Plan:

• Buffer outgoing commands when offline. Send on reconnect with backoff and limits.
• Save readings locally in SQLite or Realm.
• Sync to cloud when online and mark synced rows.

User trust:

• Show a visible sync status.
• Show last updated time.
• Let users retry with a button.

Test, debug, and simulate the hardware

Practical steps:

• Use a second ESP32 or mock BLE peripheral to test edge cases.
• Add a debug panel to view last packets, RSSI, and connection times.
• Test on real phones, not only emulators.
• Measure connect time, drop rate, and battery impact per session.

Field test checklist:

• Office with heavy Wi‑Fi
• Apartment tower with many BLE devices
• Car or train for moving handoffs
• Low battery on phone and device
• App in background for 30 minutes

Ship with confidence: security, performance, and releases

Focus on the basics that cut risk on day one.

Secure data and devices end to end

• Use TLS 1.2 or higher for MQTT and WebSockets. Prefer mutual TLS with client certs for devices.
• Store keys in iOS Keychain and Android Keystore. Never hardcode secrets in JS.
• Use certificate pinning for APIs and brokers.
• For BLE, pair securely, avoid sending secrets in clear text, and rotate keys.
• Limit data collection, add a clear privacy policy, and support data deletion to align with GDPR and CPRA.

Faster, stable connections on iOS and Android

• Keep BLE packets small. Set sane connection intervals. Use notifications instead of polling.
• Use WebSockets or MQTT to cut HTTP overhead.
• Batch UI updates and throttle renders when streams are fast.
• Reconnect with exponential backoff and jitter.
• Show clear error states and include a manual retry.

CI/CD, OTA updates, and store releases

• Use GitHub Actions with EAS Build or fastlane for iOS and Android.
• Use Expo Updates or Microsoft CodePush for safe over‑the‑air app updates.
• For devices, plan OTA firmware updates with version checks and rollback support.
• Keep release notes clear. List supported device firmware versions. Add an in‑app update prompt.

Monitor health, logs, and support at scale

• Use Sentry or Firebase Crashlytics for crashes. Add Datadog or similar for performance.
• Centralize device logs with topic filters, and avoid personal data.
• Alert on high error rates, offline streaks, and low battery trends.
• Add a Help screen with logs export, device info, and contact options to cut support time.

Conclusion

You have a straightforward plan for IoT with React Native. You outlined device to app flows, selected reliable libraries, scoped an ESP32 build, and saw how to handle security, performance, and releases with confidence.

This week’s action list:

• Choose your link: BLE, Wi-Fi, or Matter.
• Spin up an MQTT broker.
• Scan for a dev board and connect.
• Draft your dashboard layout.
• Track connect time and drop rate.

Keep the pace. Add Matter onboarding next, strengthen offline sync, and automate CI/CD. Save this checklist, start small today, and ship something real.