Mariera says tooling has ranked among the top React Native pain points in Software Mansion’s State of React Native survey for two years. React Native inherited assumptions from web development, while developers were left to learn parts of both iOS and Android tooling. Radon began as an effort to bring a SwiftUI-style preview into the editor.
Radon IDE: Better Developer Experience for React Native Teams
Speaker
Krzysztof Mariera, co-creator of Software Mansion and a former member of Meta’s React Native for Android founding team, discusses React Native tooling and Radon IDE with the host on Callstack’s React Universe On Air podcast.
Radon combines features such as a simulator preview, element inspection, and debugging within VS Code or Cursor. Right-clicking an element shows its component hierarchy, and app or Metro errors can take developers directly to the relevant file. Mariera says the goal is to open a project and have the tools work without installing packages or changing project configuration, though some customized setups are not supported.
Radon detects changes to native code that may require a rebuild and can prompt developers to rebuild and clear relevant caches. It also supports switching between simulators and adjusting device settings such as font size and appearance. In the iOS simulator, it shows the virtual keyboard while still allowing typing with a physical keyboard.
Mariera describes Radon’s commercial value as improving developer velocity by removing common React Native development friction. At the time of the conversation, it supported standard React Native setups from versions 0.73 to 0.77, including Expo Dev Client, EAS, and Expo Go, with a free trial and compatibility table available. Stability across varied project types, including monorepos, was a major challenge during the beta.
Radon for Windows was limited to Android, while iOS simulator support depended on Mac, and the team had few Windows or Linux users to help test those versions. Mariera sees easier tooling as one way to lower the learning curve for web developers considering React Native. He also recounts his early work on React Native’s Android team at Facebook, based in London.
Takeaways
- Check Radon’s compatibility table and trial it with your project before purchasing a license.
- Bring simulator previews, inspection, and debugging into the editor to reduce context switching.
- Automate detection of native changes that require rebuilding to avoid time lost to stale app binaries.
- Make Android and device-setting checks easy to run so teams test beyond their default setup.
- Treat varied project configurations and monorepos as key compatibility and stability challenges.
Mentioned in this talk
Search inside this talk
What was claimed 15
- runs
“Our company runs the State of React Native survey every year”
YouTube Unverified1 source· Talk
- role atKrzysztof Mariera is member of the founding team for React Native for Android at
Meta“I was on the founding team for React Native for Android at Meta”
YouTube Unverified1 source· Talk
- featureRadon IDE: Previews and streams the app simulator inside the editor
“The first idea was to have preview functionality”
YouTube Unverified1 source· Talk
- builtSoftware Mansion built Radon IDE
“I began building ways to embed the simulator inside the editor”
YouTube Unverified1 source· Talk
- featureRadon IDE: Inspect elements and view their component hierarchy
“right-click an element and see a tiny dropdown with the element hierarchy”
YouTube Unverified1 source· Talk
- featureRadon IDE: Works with projects without requiring configuration changes or package installation
“You don’t need to change your configuration or install any packages”
YouTube Unverified1 source· Talk
- integrates with
“You just need the extension in VS Code or Cursor”
YouTube Unverified1 source· Talk
- integrates with
“Cursor is a fork of VS Code with enhanced AI capabilities, and it supports the same extension format”
YouTube Unverified1 source· Talk
- featureRadon IDE: Connects application and Metro errors to the relevant source file in the editor
“it jumps to the file where the bundler or syntax error occurred”
YouTube Unverified1 source· Talk
- featureRadon IDE: Detects native changes and offers to rebuild the app
“when we detect that something native has changed, you'll get a banner”
YouTube Unverified1 source· Talk
- featureRadon IDE: Supports new and legacy React Native debugger implementations
“We take advantage of the improvements in the new debugger, but we also support the old version”
YouTube Unverified1 source· Talk
- featureRadon IDE: Allows users to adjust device settings such as font size and appearance
“we have a device settings step where you can easily adjust those settings on the fly”
YouTube Unverified1 source· Talk
- featureRadon IDE: Shows the iOS simulator virtual keyboard while allowing typing with a hardware keyboard
“we always show the virtual keyboard as it would appear on a real device”
YouTube Unverified1 source· Talk
- metricRadon IDE: Supports React Native versions 0.73 to 0.77 and Expo setups with Dev Client, EAS, or Expo Go
“different React Native versions from 0.73 to 0.77”
YouTube Unverified1 source· Talk
- builtSoftware Mansion built React NativeReanimated, Gesture Handler, Screens, and SVG libraries
“we build open-source libraries like Reanimated, Gesture Handler, Screens, and SVG”
YouTube Unverified1 source· Talk
