Rozenite: The Missing Part of React Native DevTools

Chmal compares debugging an app without visibility to searching an engine for a fault without a diagnostic scanner. React Native DevTools is stable and useful, but it lacks the custom plugins that Flipper offered, leaving developers to rely on console logs to inspect things like a TanStack Query cache.

Rozenite adds plugins to the existing React Native DevTools experience, without requiring a separate app. It autodiscovers installed plugins, supports installation from npm, and works with React Native CLI, Expo, Metro, and Re.Pack. A setup command detects the project configuration and installs the needed packages.

The available plugins include TanStack Query DevTools for inspecting and manipulating queries, Redux DevTools for viewing actions and state, and a Performance Monitor for viewing and exporting marks and measurements. The Network Activity plugin displays request and response headers and bodies, supports HTTP, WebSockets, and server-sent events, and offers basic filtering.

Chmal explains that React Native DevTools runs in a browser and Metro serves its HTML and JavaScript bundle. Rozenite intercepts that bundle to add plugin code, which can reuse the device's existing DevTools connection; plugins render in iframes so a plugin crash does not bring down the full DevTools experience. A generated plugin can include a React panel, React Native integration, and optional Metro integration.

Chmal says companies use Rozenite for network inspection and to expose internal app state through custom plugins. At the conference, he said the project was using alpha releases and planned to release version 1.0 the following week, after changes were merged. He points developers to rozenite.dev and the Callstack Discord channel for feedback and plugin ideas.