Skip to content
OTFotf
All posts

ReactoRadar: a modern React Native debugger for Hermes and new architecture

D
DaveAuthor
6 min read
ReactoRadar: a modern React Native debugger for Hermes and new architecture

Modern React Native development in 2026 has a debugging gap: the traditional tools aged out just as Hermes and the new architecture became the default. React Native Debugger stalls on Hermes, Flipper's React Native support ended, and Chrome DevTools only covers the console — blind to network, Redux, and device storage. ReactoRadar is a standalone macOS debugger purpose-built for React Native 0.74+ that closes this gap for the Hermes engine and the new architecture. Here is what it does, where it fits, and what to verify before adopting it.

Why legacy React Native debuggers break on Hermes

Developers migrating to Hermes and React Native's new architecture quickly discover the old tools do not fit. React Native Debugger, for years the go-to for Redux and network insight, is fundamentally incompatible with Hermes: console logs may trickle through, but deeper inspection of network traffic and state silently breaks. Hermes is now the default JavaScript engine for React Native, ships bundled per React Native version, and precompiles bytecode ahead of time, so any debugger that predates it is working against the grain (see the Hermes engine docs).

Flipper was the common workaround, but Meta ended React Native support after Flipper v0.239.0 — the last release with React Native support — and the project now points developers toward new dedicated debug tooling being built at Meta (see the Flipper repository). That leaves teams on current React Native versions with frozen integrations and no forthcoming updates for the RN plugin surface.

Most teams fall back to Chrome DevTools, which is an incomplete fallback for native work. Logs are visible, but there is no network tab for fetch, axios, or XHR traffic, no Redux stream, and no AsyncStorage visibility. The result is a stitched workflow: logs in one window, network in a proxy tool, manual state inspection or print-debugging, sometimes a custom inspector patched in. That friction slows development and hides subtle bugs behind guesswork.

The practical rule: once a project runs Hermes on React Native 0.74 or newer, budget for a debugger built for that world rather than patching the old one.

What ReactoRadar is

ReactoRadar is a standalone macOS desktop app built for Hermes, React Native 0.74+, and the new architecture, as described in the original ReactoRadar announcement. There are no shaky legacy plugins, no WebSocket proxies to babysit, and no Chrome tab juggling. It launches from the project root with two terminal commands and unifies the debugging workflow with no config files, native modules, or build plugins required.

What it provides:

  • Console panel: Chrome DevTools-style ergonomics for React Native. Collapsible object trees in logs, copy-on-click values, persistent log-level filters, fast Cmd+F search across thousands of lines, and filters that stick between reruns.
  • Network inspector: resizable and sortable columns, waterfall timelines, detailed request views, cURL export for any call, fetch/XHR/axios coverage including custom axios instances, and device-side network throttling.
  • Redux inspection: a real-time stream of Redux actions with key-by-key diffs and highlighted changes, so state transitions are visible without sifting noisy logs.
  • AsyncStorage inspector: direct key-value inspection and editing tied into the reload cycle.

All of this targets macOS for React Native 0.74+ projects running Hermes, with new-architecture support out of the box.

One codebase. iOS, Android, and web.

The Fitness Kit is a mobile starter with its own API, with sign-in and a database. Live demo at fitness-preview.otf-kit.dev.

See the live demo

Setting up ReactoRadar

Setup is deliberately minimal. There are no build-time hooks, native code patches, or dependency chains to manage. From the React Native project root:

npx reactoradar setup
npx reactoradar

The first command scans and prepares the project without producing config files; the second launches the debugger. Hermes and the new architecture are supported out of the box as long as the project runs React Native 0.74+ on macOS. Once running, the app connects and every console log, network request, Redux action, and AsyncStorage operation becomes visible.

Supported environments:

React Native 0.74+
Hermes engine enabled
New Architecture enabled (auto-detected)
macOS (desktop app only)

No native modules to link, no build plugins, no exotic tweaks — plug-and-play debugging instead of the install-five-plugins, edit-three-configs ritual.

Console and network inspector in practice

Most debuggers split or drop critical features at the Hermes boundary. ReactoRadar's pitch is Chrome DevTools-level ergonomics for the native ecosystem. The console renders nested JavaScript objects as expandable trees with one-click copy, and log-level filtering (info, warn, error) persists across debugger restarts, so noisy categories stay hidden once configured. Global search covers thousands of lines for large projects.

The network inspector is where Hermes-era tools most often fail, and it is the strongest reason to evaluate this one. Columns for name, status, type, size, time, and waterfall are resizable and sortable. Selecting a request reveals raw and parsed headers, the request body, a live preview as an object tree, and the full response. Reproducing an API call is a right-click cURL export away. Type filters cover fetch/XHR, scripts, images, fonts, docs, and websocket connections, and device-side throttling presets (fast 3G, slow 3G, offline) toggle instantly from the panel for latency edge cases.

Compared with last-generation setups where the network tab did not exist or only captured web traffic, this restores the visibility web developers take for granted — adapted to Hermes and React Native rather than shoehorned through legacy bridges.

Where it fits in a production debugging stack

With Flipper's React Native support frozen, teams need a durable baseline rather than workaround scripts that do not scale as the ecosystem evolves. Hermes and the new architecture are the permanent direction for React Native 0.74 and above, and a debugger built for that world from the ground up avoids the fragile-plugin trap. The architecture-agnostic positioning — adapting as the JS engine and storage layers evolve — is what makes it worth evaluating as a shared team tool rather than a solo-dev preference.

That said, keep expectations scoped. A debugger fixes observability, not fragility: it will not pin drifting dependencies, add crash reporting, or replace device-farm testing. Pair it with the production layers that catch what local debugging cannot — crash reporting and dependency hygiene. Our Sentry error tracking guide for React Native production covers the crash-reporting side, and the ship AI MVP to production checklist covers the broader launch baseline. For teams sharing components across web and mobile, one codebase across three platforms frames the architecture this debugger assumes.

One verification note before adopting: the feature claims above (network tab depth, Redux diffing, AsyncStorage editing) are drawn from the author's announcement post. Confirm them against the current release before standardizing, and confirm macOS-only status against your team's OS mix — Windows and Linux developers will still need a separate workflow.

Getting started today

If the project runs Hermes on React Native 0.74+ and the developers are on macOS, evaluation takes minutes:

npx reactoradar setup
npx reactoradar

No config files, no native modules, no plugins. The app connects and surfaces console, network, Redux, and storage in one window.

React Native teams that spent the last two years stitching together half-broken tooling get a genuine upgrade here: a filterable console, Chrome-style network timelines, real-time Redux diffs, and smooth AsyncStorage inspection in a single cohesive app. Set it up in minutes and feel the friction fall away.

Ready to ship the app behind the debugger? OTF kits give your AI coding agent a production-shaped React Native and web baseline to start from — browse the templates.

Sources

react-nativeai-toolscross-platform
OTF Fitness Kit

Stop wiring. Start shipping.

  • Sign-in and a database wired in, with its own API
  • iOS + Android + web from one codebase
  • AI configs pre-tuned + 20+ task prompts per kit included
Need more than components?

Full-stack kits.
Pay once, own the code.

SaaS Dashboard and Fitness include authentication and a database. Arcade is browse-first with a local demo session and no backend sign-in by default. Booking includes Supabase Auth and realtime availability. Marketplace includes sign-in, a database, and a buyer and seller side. The Bundle includes the five live kits.

Everything Bundle — $149See full pricing

Get the free AI configs pack

AI configs in every kit: CLAUDE.md, .cursorrules and task prompts. Drop them in and your AI tool instantly understands your project.

No spam. Unsubscribe any time.

Prefer the free SDK? Star it on GitHub →