4 must-have Radon IDE features for convenient Expo development

This is a guest blog post from Kacper Kapuściak - He develops open-source software at Software Mansion and is currently working on Radon IDE.

...

The React Native debugging ecosystem is really fragmented. On one hand Flipper is deprecated, Remote JS debugging is being removed, and React Native DevTools isn’t an integrated solution. There are a lot of libraries, but not a lot of dedicated development tools. At Software Mansion, we saw this gap and decided to fill it. You may know us for creating libraries like Reanimated, Gesture Handler, and Screens. We saw that debugging was the weakest part of React Native development so we built a solution.

Radon IDE is a VSCode extension that simplifies the development of Expo applications. Radon IDE transforms your editor into a powerful IDE for React Native, providing a single, unified experience that makes creating Expo applications a lot easier. The extension supports Expo Go, Prebuild, and Dev Client setups starting from Expo SDK 50 onwards. Let’s jump into the features of Radon IDE.

Radon IDE allows you to debug Expo apps without ever leaving your editor. While it is possible to set up breakpoints in VSCode using separate extensions like React Native Tools or Expo Tools, in my experience they weren’t really reliable. But here’s the exciting part: Radon IDE doesn’t need any configuration for breakpoints to work. You simply open a React Native or Expo project and you can immediately start setting breakpoints that pause the code execution of your app. Also, Radon IDE automatically pauses at runtime exceptions and points you to the exact line of code where the error occurred, saving you a lot of time in the process.

Out-of-the-box, no setup debugging in VSCode. Sweet, isn’t it?

Not only are your logs visible in the Radon IDE’s editor panel, but console.logs() also link back to your source code, allowing you to quickly find where they come from. I think I don’t need to emphasize how convenient it is to have it all in a single place close to your codebase.

Sometimes a navigation structure in a mobile application can feel overwhelming, especially in apps with many screens. This is where Radon IDE’s Expo Router integration really comes in handy. The extension simplifies routing by letting you navigate between the routes using a familiar UI. You can quickly go back, jump directly to your home screen, or choose a specific route from a URL dropdown. The experience is pretty similar to what you know from browsers. Both Expo Router and React Navigation are supported although your application has to be deep-linked.

Radon IDE helps you navigate your Expo Router application

This one is my personal favorite. Picture this: you’re opening a new codebase that you haven’t seen before. With Radon IDE you can simply point-and-click on the device preview to select an element, and it will open your file with a cursor pointing to the exact line of code where this element is defined. Pretty cool, huh? Check out how it works:

Element Inspector in action. So easy, so fun.

There are just some days when display: ‘flex’ doesn’t flex as it is supposed to. The Element Inspector shows you the dimensions of elements on the screen and highlights how much space they actually take up. It can also be a pain to sift through countless index.tsx files or try to remember “Wait, what’s this component called again?” With just a right-click on the element, the extension displays the full hierarchy of its parent components. It is incredibly useful when dealing with deeply nested views. You can simply right-click on the device preview to see the hierarchy of nested components.

Radon IDE 1.3 introduces support for launching DevTools as separate panels within VSCode or Cursor. It supports Network Inspector and Redux DevTools directly in your editor without any additional setup. It also supports React Query thanks to Expo DevTools plugins. This means you no longer need to install another browser extension and have it open in a separate browser window. Currently, to use these integrations, you need to add an additional package to your codebase with a little bit of code configuration. However, we are in the process of making it work without any setup, with the goal of making it even more convenient in the future.

Redux DevTools conveniently placed inside the VSCode panel.

Radon IDE is an integrated development environment – an IDE for React Native. It bundles many tools into a single, convenient package in the form of a VSCode/Cursor extension. Thanks to Radon IDE you can stay focused on your code without juggling multiple tools to see the log or debug your application.

Radon IDE is in active development with its source code publicly available on GitHub. Now, you can install it straight from the VSCode Marketplace and try it for free for 30 days. We’re always adding new features, so stay tuned for more! And if you have any questions about Radon IDE or our open-source projects, contact us on Discord.

Want to see more? Watch the full walkthrough of the extension on the Software Mansion channel: