Real-time React Native with Laravel Reverb and react-native-reverb

React Native teams building on Laravel used to hit a wall: real-time updates and notifications were trivial on web but clumsy on mobile. The react-native-reverb package changes that equation with a native TurboModule client that speaks the Pusher protocol to a self-hosted Laravel Reverb server — no vendor lock-in, no hosted middleman. Below: what it is, the real setup path, channel design guidance, production hardening, and where to temper the marketing language.

What react-native-reverb is and why it mattersCopy Anchor Link

Before Reverb, Laravel real-time on mobile meant compromises: the Pusher web SDK did not work natively on React Native, and the official mobile SDK was glued to Pusher's hosted servers. Laravel Reverb launched as a first-party, self-hosted WebSocket server that speaks the Pusher protocol and authenticates with application credentials — the Laravel Reverb documentation is the authority on the server side. But Reverb's Echo integration targeted the browser, leaving React Native teams out.

react-native-reverb fills that gap with a native TurboModule client for iOS and Android, positioned as an Echo-style API for the core broadcast surface: public and private channels plus notification events, as described in the package announcement walkthrough. What it gives you:

• Talks to your own Reverb server, not a third-party cloud.
• Private channel authentication and event parsing out of the box.
• Promise-based API on TurboModule infra, no legacy bridge wrappers.
• Fully self-hosted: control the infrastructure, no vendor lock-in.
• Echo-style coverage of the core broadcast surface: order updates, live notifications, broadcast events.

Note the scoped wording: Echo-style for the core surface, not literal full API parity. Parity is a strong claim that depends on the package release you pin — verify the README's channel and event coverage before promising it to stakeholders.

The problems it solvesCopy Anchor Link

The pre-existing options were genuinely painful. The Pusher React Native SDK only connects to Pusher's cloud, so teams running Reverb for privacy or cost were excluded. Hand-rolled WebSocket clients meant re-implementing channel multiplexing, the Pusher protocol, Laravel authentication flows, and event-shape conformity — code that drifts from upstream and breaks on minor backend changes in production.

react-native-reverb lands inside the Laravel ecosystem instead: authentication and channel subscriptions mirror what the web app already does with Echo, so event logic stays consistent across platforms. The payoff is less code drift and a single backend mental model. Teams running background delivery alongside real-time should also read our AI production background jobs guide for the queue-and-retry half of the story.

Setting up react-native-reverb with Laravel ReverbCopy Anchor Link

The working path from zero to live events, condensed from the announcement walkthrough:

Prerequisites: a Laravel backend with Reverb enabled, a working React Native toolchain on a TurboModule-compatible version, and an API auth flow (Sanctum or Passport) for private channels.

Step 1: install the package:

npm install react-native-reverb

Because it uses TurboModule infrastructure, confirm your React Native version against the package repo if the install misbehaves.

Step 2: enable and configure Reverb on the backend. In the Laravel .env:

BROADCAST_DRIVER=reverb
REVERB_APP_ID=your-app-id
REVERB_KEY=your-reverb-key
REVERB_SECRET=your-reverb-secret
REVERB_HOST=ws.yourdomain.com
REVERB_PORT=443
REVERB_SCHEME=wss

Then publish the config if needed and start the server:

php artisan vendor:publish --tag="reverb-config"
php artisan reverb:start

Laravel now broadcasts events to the WebSocket server.

Step 3: connect from React Native:

import { Echo } from 'react-native-reverb';

const echo = new Echo({
  host: 'ws.yourdomain.com:443',
  key: 'your-reverb-key',
  auth: {
    headers: {
      Authorization: `Bearer YOUR_API_KEY`,
    },
  },
  scheme: 'wss',
});

This exposes the familiar channel API — .channel(), .private(), .listen() — matching Echo's shape for the core broadcast surface.

Step 4: authenticate private channels. Point the client at the same auth endpoint Echo uses so backend logic stays unified, with the user's token or session attached. Confirm the Reverb host is reachable from mobile networks in dev, staging, and production — the most common gotcha is a host that resolves on the office network but not on device.

Checklist before calling it done: package installed and linked, Reverb server running and reachable, auth endpoint returning correct user state. Result: Laravel-native real-time in minutes instead of days of protocol work.

Designing channels: public, private, and notificationsCopy Anchor Link

Channel choice is the design decision that outlives the setup. Public channels suit broadcast-to-all content such as feature flags, maintenance banners, or global announcements — anything every installed app may receive. Private channels carry user-scoped or team-scoped events: order status, chat messages, collaboration updates. Each subscription hits the auth endpoint, so the backend stays the single source of truth for who may listen.

Notification events deserve their own path. Laravel's notification system can broadcast over Reverb so the same notification reaches web and mobile simultaneously, and the notifyNow-style immediate delivery path suits time-sensitive alerts. The practical pattern: socket for the live moment, persisted notification record for the durable one. If the user was offline, backgrounded, or mid-reconnect when the event fired, the stored record is what the inbox renders — the socket is acceleration, not storage.

Keep channel names namespaced and versioned from day one (orders.v1.{id} rather than bare orders), because renaming a channel later means coordinating a backend deploy with every installed app version in the wild.

Performance and reliability expectationsCopy Anchor Link

Running on TurboModules avoids the legacy bridge overhead, so throughput is bounded by the backend's WebSocket capacity rather than a client-side wall. The direct connection — no proxy, no hosted-cloud hop — keeps end-to-end event latency low. Native-side cleanup of listeners and channels on unmount avoids phantom events in backgrounded apps, and auth follows Echo's protocol so event integrity and user privacy carry over.

Standard reconnect logic handles mobile drops and resumes; for edge cases, hook OS-level network events. For mission-critical flows, pair the socket with backend event replay or a push-notification fallback — sockets alone are not durable delivery. If row-level scoping matters for what each user may receive, our Supabase RLS production checklist covers the authorization mindset that applies regardless of backend. And for teams sharing logic across web and mobile, one codebase across three platforms frames the architecture this integration assumes.

Production hardening before launchCopy Anchor Link

Three checks separate a demo socket from a production one. First, secure the transport: wss everywhere outside local dev, short-lived tokens with refresh, and an auth endpoint that verifies current membership rather than trusting a stale grant. Second, plan for scale on the server: Reverb runs horizontally, so confirm connection counts, memory per connection, and load-balancer stickiness against expected concurrent devices before launch day. Third, instrument the client: log connection state transitions, auth failures, and missed-heartbeat counts to your crash-reporting pipeline so a silent socket outage surfaces like any other regression.

Bottom lineCopy Anchor Link

react-native-reverb gives React Native apps an Echo-style real-time client against a self-hosted Reverb server: public and private channels, notification events, TurboModule performance, and no vendor dependency. Scope the parity claim to the core broadcast surface, pin the package version, verify the README's current channel coverage — then ship it.

Starting a real-time app from scratch? OTF kits give your AI coding agent a production-shaped baseline with auth and data already wired — browse the templates.

SourcesCopy Anchor Link

• Laravel Reverb documentation — first-party WebSocket server, Pusher-protocol compatible, self-hosted, app-credential auth.
• Real-time magic in React Native with Laravel Reverb (Medium, Jun 2026) — package positioning: TurboModule, iOS plus Android, public/private channels, notification support.