Building Peer-to-Peer Communication in React Native (The Stuff That Actually Breaks)

Image generated using Gemini

Most React Native apps happily talk to servers sitting somewhere in the cloud. Life is simple. APIs respond, bugs are predictable, and everything feels under control.

Then you try peer-to-peer communication.

Suddenly your app isn’t just talking to a server. It’s trying to discover devices, connect locally, verify connections, and survive weird network behaviour. And nothing works the way you expect.

This is a practical breakdown of building a peer-to-peer connection in React Native, what libraries I used, what broke, and what actually worked in the end.

Why Peer-to-Peer?

The idea is simple: two devices on the same network should be able to communicate directly.

No backend. No middleman. Faster, cheaper, and useful for:

• Local file sharing
• Device-to-device communication
• Offline-first apps
• Real-time sync in LAN environments

In reality, you’re dealing with:

• Dynamic IPs
• Network restrictions
• Platform inconsistencies
• Libraries that “kind of work”

Fun.

Step 1: Device Discovery using Zeroconf

To connect devices, you first need to find them.

This is where Zeroconf (mDNS) comes in.

It allows devices on the same network to discover each other without manually entering IP addresses.

Library used:

• react-native-zeroconf

What it does:

• Broadcasts your device as a service
• Scans for other devices
• Returns IP + port

Reality check

Zeroconf is great for discovery. That’s it.

It tells you:

“Hey, there’s a device at this IP.”

It does NOT tell you:

• Whether the device is reachable
• Whether the service is actually alive
• Whether the connection will succeed

So if you rely only on Zeroconf, you’re basically trusting vibes.

Step 2: Establishing Connection (Where Things Get Real)

Once you get the IP, you need to connect.

That’s where sockets come in.

A socket is basically a communication channel between two devices over a network.

Library used:

• react-native-tcp-socket

Why TCP?

• Reliable
• Ordered data
• Better for controlled communication

The First Mistake: Assuming Discovery = Connection

Initially, I did this:

1. Discover device via Zeroconf
2. Grab IP
3. Assume it’s valid
4. Try to use it directly

Result?

Random failures.

Because:

• Device might disconnect after discovery
• IP might change
• Service might not be listening

So yeah, Zeroconf is just a phonebook. Not a guarantee.

The Fix: Adding TCP Verification Layer

Instead of blindly trusting Zeroconf, I added a TCP handshake step.

Flow that actually worked:

1. Discover device via Zeroconf
2. Extract IP + port
3. Attempt TCP connection
4. Send a small verification payload
5. Wait for acknowledgment
6. Only then mark connection as valid

That extra verification step fixed most of the “ghost device” issues.

Example Concept (Simplified)

import TcpSocket from 'react-native-tcp-socket';

const options = {
  host: deviceIp,
  port: 12345,
};

const client = TcpSocket.createConnection(options, () => {
  client.write(JSON.stringify({ type: 'ping' }));
});

client.on('data', (data) => {
  const response = JSON.parse(data.toString());
  if (response.type === 'pong') {
    console.log('Valid peer connection');
  }
});

client.on('error', (err) => {
  console.log('Connection failed', err);
});

client.on('close', () => {
  console.log('Connection closed');
});

Issues I Faced (a.k.a. Things That Made No Sense)

1. TCP Socket randomly stops working

At one point, everything worked for 2 days… then just stopped.

No code changes.

Turns out:

• Environment issues
• OS-level networking quirks
• Simulator vs real device mismatch

This is not uncommon. Even others reported TCP connection failures suddenly appearing without clear causes.

2. Expo Compatibility Problems

If you’re using Expo (managed workflow), good luck.

react-native-tcp-socket:

• Doesn’t work properly
• Requires ejecting

I learned this the hard way after wasting hours debugging “undefined is not an object” errors.

3. Android vs iOS Differences

• Android mDNS discovery can be inconsistent
• iOS is stricter with network permissions
• Background behavior differs

Sometimes one device sees the other, but not vice versa.

Perfectly normal. Totally not frustrating at all.

4. Devices Found But Not Reachable

Zeroconf says:

“Device found!”

TCP says:

“Nope.”

This happens because:

• Device changed network
• Firewall issues
• Service not actually running

This is exactly why TCP verification is mandatory.

5. Timing Issues

If you:

• Start scanning too early
• Or connect too quickly

You’ll hit race conditions.

Solution:

• Add retries
• Add delays
• Accept that networking is chaos

Final Architecture That Worked

Here’s the setup that finally behaved like a sane system:

Discovery Layer

• Zeroconf
• Finds devices

Verification Layer

• TCP Socket
• Confirms connection

Communication Layer

• TCP messaging
• JSON-based protocol

Key Lessons (The Non-Obvious Ones)

• Discovery ≠ Connectivity
• Always verify peers before trusting them
• TCP > UDP for reliability in most app use cases
• React Native networking is heavily platform-dependent
• Expect things to break randomly

And most importantly:

If something works today, don’t celebrate too early. Test it on another device and watch it fall apart.

Alternative implementations can use UDP-based communication, though they sacrifice reliability for speed.

When Should You Use This Approach?

Use peer-to-peer in React Native when:

• Devices are on same network
• You need low latency
• Backend dependency is undesirable

Avoid it when:

• You need internet-wide communication
• NAT traversal is required (that’s a whole different nightmare)
• Reliability is critical

Closing Thoughts

Building peer-to-peer in React Native feels like assembling IKEA furniture without instructions. Everything technically fits, but nothing lines up the first time.

Zeroconf helps you find devices. TCP helps you trust them.

And your debugging skills… help you survive the process.

Credits & References

[react-native-zeroconf](https://www.npmjs.com/package/react-native-zeroconf) for device discovery using Zeroconf/mDNS protocols

[*react-native-tcp-socket](https://www.npmjs.com/package/react-native-tcp-socket)* for establishing TCP-based peer communication

Concepts of Zeroconf (Bonjour/Avahi) for local network service discovery

TCP socket communication principles for reliable data transfer (pdf)

Reference implementations and discussions around peer-to-peer communication in React Native

Expo and native module limitations in networking use cases