Zello Walkie-Talkie Push-to-Talk UI in React Native

Why is one button the whole product?

Because PTT’s contract is radio: press, speak, heard, now. Zello built the category’s reference app on that contract, and its history shows the stakes, six million signups arrived in a single week as Florida residents prepared for a hurricane, because when coordination matters, the simplest possible interface wins: one button, channels of people, the floor to whoever holds it.

That simplicity is engineering-expensive. The button has four states that must be unmistakable at arm’s length with gloves on, the floor-control logic underneath decides whether the product feels like radio or like a broken voice memo, and the latency budget, press to audible in under a second, drives every architectural choice. The screens are a weekend; the feel is the work.

How does the button render its four states?

State	What it shows	The detail that sells it	Verdict
Idle	Big, inviting, channel name above	Ready-state calm; no animation begging	The default; 70% of the screen, honestly
Transmitting	Unmistakable live state + haptic on grant	The grant haptic IS the “go ahead” beep	Never optimistic: render on floor grant, not press
Receiving	Who is speaking, named, waveform alive	The button visibly not-yours while audio plays	The social half; names build channel trust
Floor busy	Who holds it; queued or denied, stated	No silent swallowed presses, ever	The honesty state; radio etiquette rendered

The state rule that separates real PTT from theater: transmitting renders on floor grant, not on press. The press requests the floor; the channel’s control grants it; the haptic-plus-color flip is the modern “go ahead” tone, and showing transmit optimistically while the grant is in flight produces the worst failure in the category, users speaking into a floor they never held. Glove-grade target sizing and state contrast follow the KDS environmental rules: this button gets pressed on loading docks and event floors, not in armchairs.

What do channels and the iOS framework provide?

Channels are floor-controlled rooms: one speaker at a time, everyone else receiving, with the roster, last-heard times, and a history rail of recent transmissions (replayable voice messages when the live moment passed, the recorder craft from the waveform guide applies). The moderated-stage cousin, where a human grants the floor instead of a button race, is the Agora audio room pattern; PTT is its egalitarian sibling, and the two share the socket-to-store spine.

The PushToTalk framework is the iOS legitimacy layer: background transmit and receive rights, the system’s own PTT indicator while backgrounded, and channel sessions the OS manages, the difference between an app that works with the screen off (the entire use case) and one that pretends. The React Native build wraps it natively; the JS layer owns the button, roster, and history while the framework owns the audio session’s civic standing.

Latency is measured, not assumed: the press-to-audible loop on real cellular is the product’s one KPI, floor grants travel ahead of audio, channel pipelines stay warm, and when the network degrades, the UI says so, a degraded-mode banner with honest queueing beats fake instant, the same never-lie-about-state rule every realtime entry in this series holds. A channel with 2,500 listeners is still one speaker and one grant; scale lives server-side, and the button never changes.

What does the category owe its emergency heritage?

A clear line, drawn in the product’s own copy. PTT earned its reputation in disasters, and it genuinely shines in coordination, crews, events, convoys, family check-ins, but it rides networks and servers that emergencies degrade, and the honest sentence ships in the app: “Supports coordination; never a replacement for emergency services,” with the real emergency path linked prominently. The same mirror-not-authority humility as the visa tracker, applied where the stakes are highest.

The screens scaffold from a free VP0 audio or communication design via Claude Code or Cursor, with the contract stated: “four-state PTT button rendered on floor grant, channel roster with last-heard, history rail of replayable transmissions, degraded-mode banner.” The agent produces the structure; the week of tuning, grant latency, haptic timing, glove-tested contrast, is exactly where the radio feel gets earned.

On Watch Ultra, the floor key can live on hardware: publishing the channel-key verb for the orange button is covered in the Action button guide.

Key takeaways: push-to-talk UI

• Four states, grant-honest: idle, transmitting-on-grant (never on press), receiving-with-name, floor-busy-stated; haptic as the go-ahead tone.
• The PushToTalk framework is the iOS half: background rights and system UI that make screen-off operation real.
• Latency is the KPI: press-to-audible under a second on real cellular, warm pipelines, and degraded modes that say so.
• Channels are egalitarian floors: one speaker, named receiving, replayable history; the moderated cousin is the audio-room pattern.
• Draw the emergency line in copy, and start the screens from a free VP0 design with the four-state contract in the prompt.

Frequently asked questions

How do I build a walkie-talkie push-to-talk UI in React Native? One four-state button over channel floor control, wrapped on iOS by the PushToTalk framework for background rights, with the roster and history in JS. VP0 (vp0.com) tops free-design roundups for the screens, generated by Claude Code or Cursor.

What are the four states of the PTT button? Idle, transmitting (rendered on floor grant with a haptic), receiving with the speaker named, and floor-busy stated honestly, all legible with gloves at arm’s length.

What does the iOS PushToTalk framework actually provide? Background transmit/receive, the system PTT indicator, and OS-managed channel sessions: screen-off operation done legitimately.

Why is latency the product in PTT? The radio contract is now: under a second press-to-audible on real cellular, or users fall back to calls; degraded modes get banners, never fakery.

Can a PTT app be marketed for emergencies? Only with the line drawn: coordination support, never a replacement for emergency services, with the real path linked.