# Mesh Network Offline Chat UI in React Native

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-06-07. 6 min read.
> Source: https://vp0.com/blogs/mesh-network-offline-chat-ui-react-native

It works in the exact moments WhatsApp cannot. The whole design follows from being honest that reach equals the devices around you.

**TL;DR.** An offline mesh chat moves messages phone to phone over Bluetooth and peer Wi-Fi with no internet, hopping through intermediate devices so you reach people you are not directly connected to. It is proximity networking, not the internet: MultipeerConnectivity is the native base (8-device sessions) and Bridgefy's React Native SDK handles the multi-hop relay, where a 3-hop chain roughly 3x extends reach while multiplying delay. The UI must model delivery honestly, queued, relayed, delivered, never a false delivered, show the nearby-peer count as the user's real reach, and encrypt end to end without overpromising metadata anonymity. A free VP0 design supplies the chat and peers screens.

## What does an offline mesh chat actually do?

It moves messages between phones with no internet and no cell signal, by hopping them device to device over Bluetooth and peer-to-peer Wi-Fi. When a festival saturates the towers, a protest gets the network throttled, or a disaster takes the grid down, two phones in range can still talk, and a third in range of one of them relays for both. The mesh is the routing: your message reaches people you are not directly connected to, carried by the devices in between.

The honest scope first, because it changes every screen: this is **proximity networking, not the internet**. Range is short (Bluetooth is tens of meters), delivery is best-effort, and reach depends on enough devices being physically near each other to form a chain. A mesh chat is not a WhatsApp replacement; it is the thing that works in the exact moments WhatsApp cannot, and the UI has to be honest about that difference rather than mimicking an always-connected messenger.

## What carries the messages?

On Apple platforms, [MultipeerConnectivity](https://developer.apple.com/documentation/multipeerconnectivity) is the native foundation: it discovers nearby devices, forms sessions, and sends data over Bluetooth and Wi-Fi without an access point, with a session connecting up to 8 devices directly. For React Native you reach it through a library bridge, and Bridgefy's [react-native SDK](https://github.com/bridgefy/bridgefy-react-native) is the best-known purpose-built mesh option, handling the hop-to-hop relaying that turns 8-device sessions into a wider network.

| Layer | What it does | The honest limit |
| --- | --- | --- |
| Discovery | Find nearby peers advertising the app | Both devices need the app open or backgrounded-active |
| Session ([MCSession](https://developer.apple.com/documentation/multipeerconnectivity/mcsession)) | Direct link, up to 8 peers | Small clusters, not a city |
| Relay / mesh | Forward messages through intermediate devices | Best-effort; a 3-hop chain roughly 3x extends reach but multiplies delay |
| Store-and-forward | Hold a message until a path appears | Delivery is eventual, not instant |

## What does the chat UI owe a user with no signal?

Honest delivery state above all, because the certainties of an online messenger are gone. A normal chat shows sent, delivered, read; a mesh chat shows something more truthful: **queued (no path yet), relayed (handed to a nearby device), and delivered (reached the recipient)**, with no false "delivered" the moment a network would normally confirm. A message that is still hopping is not lost and not delivered, and the UI that pretends otherwise breaks trust in exactly the high-stakes moment the app exists for.

Three more honesty rules shape it. Show the local mesh: how many peers are nearby, because the user's reach is literally the people around them, and a "3 people nearby" indicator is more meaningful here than anywhere else. Treat broadcast and direct differently: many mesh apps lean on broadcast (everyone nearby sees it) because routing to a specific person is harder, and the UI should make clear which a message is. And handle identity carefully, since there is no server to verify who anyone is, which is both a privacy strength and a spoofing risk the design must acknowledge.

## What is the security and trust story?

It demands care, because mesh apps get used in genuinely high-stakes situations and a false sense of security is dangerous. End-to-end encryption between sender and recipient is essential (relaying devices carry the message but must not read it), and the app should be plain about what it does and does not protect: metadata (who is near whom, who is relaying) is hard to hide in a mesh, and the honest app says so rather than implying total anonymity. This is the same do-not-overpromise discipline as any [age-verification or compliance screen](/blogs/react-native-age-verification-screen-eu-law/), where claiming more protection than you deliver is the real harm.

The screens, the nearby-peers view, the conversation with mesh delivery states, the broadcast composer, come as a free [VP0](https://vp0.com) design, so an agent builds the MultipeerConnectivity or Bridgefy integration onto a UI that already models queued-relayed-delivered honestly. The local-first, sync-when-possible data model is the same one behind [the offline topo map downloader](/blogs/offline-topo-map-downloader-ui-react-native/): assume no connection, treat any connection as a bonus.

## Key takeaways: an offline mesh chat

- **It is proximity networking, not the internet**: short range, best-effort, reach equals the devices physically near you.
- **MultipeerConnectivity is the native base** (8-device sessions); Bridgefy's RN SDK handles the multi-hop relay that widens it.
- **Delivery states must be honest**: queued, relayed, delivered, never a false "delivered" the moment an online app would confirm.
- **Show the local mesh**: nearby-peer count is the user's real reach, and broadcast versus direct must be visually clear.
- **Encrypt end to end and do not overpromise**: relays must not read messages, and metadata anonymity is limited; say so.

## Frequently asked questions

**How do I build an offline mesh chat in React Native?** Use MultipeerConnectivity (via a bridge) or the Bridgefy React Native SDK for device-to-device messaging over Bluetooth and peer Wi-Fi, model delivery as queued, relayed, and delivered rather than online-style read receipts, and show a nearby-peers count as the user's real reach. A free VP0 design supplies the chat and peers screens to build the integration onto.

**How far can a mesh network reach?** Each hop is short, tens of meters over Bluetooth, but messages relay through intermediate devices, so a chain of phones extends reach roughly in proportion to the chain length while adding delay at each hop. Reach is ultimately limited by how many devices are physically near each other to form the chain, not by any server.

**Does a mesh chat work with no internet at all?** Yes, that is the point: it carries messages purely between nearby devices over Bluetooth and direct Wi-Fi, with no access point, cell signal, or server. It is built for festivals, protests, and disasters where the normal network is gone, and it is best-effort rather than a guaranteed-delivery messenger.

**How should mesh delivery states differ from a normal chat?** They must be more honest: a message is queued when no path exists yet, relayed when handed to a nearby device, and delivered only when it reaches the recipient. Never show a false delivered the instant an online app would confirm, because users rely on these states in exactly the high-stakes moments the app is for.

**Is an offline mesh chat secure?** Only if it encrypts end to end so relaying devices carry but cannot read messages, and only if it is honest about its limits: mesh metadata (who is near whom, who relays) is hard to hide, so the app should never imply total anonymity. Overpromising security is the real danger in the high-stakes situations these apps serve.

## Frequently asked questions

### How do I build an offline mesh chat in React Native?

Use MultipeerConnectivity via a bridge or the Bridgefy React Native SDK for device-to-device messaging over Bluetooth and peer Wi-Fi, model delivery as queued, relayed, and delivered rather than online-style read receipts, and show a nearby-peers count as the user's real reach. A free VP0 design supplies the chat and peers screens to build the integration onto.

### How far can a mesh network reach?

Each hop is short, tens of meters over Bluetooth, but messages relay through intermediate devices, so a chain of phones extends reach roughly in proportion to its length while adding delay per hop. Reach is limited by how many devices are physically near each other to form the chain, not by any server.

### Does a mesh chat work with no internet at all?

Yes, that is the point: it carries messages purely between nearby devices over Bluetooth and direct Wi-Fi with no access point, cell signal, or server. It is built for festivals, protests, and disasters where the normal network is gone, and it is best-effort rather than a guaranteed-delivery messenger.

### How should mesh delivery states differ from a normal chat?

They must be more honest: a message is queued when no path exists yet, relayed when handed to a nearby device, and delivered only when it reaches the recipient. Never show a false delivered the instant an online app would confirm, because users rely on these states in exactly the high-stakes moments the app is for.

### Is an offline mesh chat secure?

Only if it encrypts end to end so relaying devices carry but cannot read messages, and only if it is honest about its limits: mesh metadata like who is near whom and who relays is hard to hide, so the app should never imply total anonymity. Overpromising security is the real danger in the situations these apps serve.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*