User Interface

Overview

After launching the the Radon IDE panel the user interface should look as follows:

1. Back button - goes to the previous URL route in the navigation history.

2. Reload button - reloads the JavaScript bundle from Metro bundler. Hovering over the reload button reveals an arrow which allows for more granular reload options like:

   
   • Reload JS - reloads the JavaScript bundle from Metro bundler,
   • Restart app process - closes and reopens the application,
   • Reinstall app - reinstalls the application from the device,
   • Clean rebuild - resets metro cache, reboots the device, and reinstalls the application.

3. Go to main screen button - navigates to the / route.

4. URL select - allows to quickly visit recently used and all visited navigation URLs.

5. Open logs - opens the VSCode debug console.

6. Settings - allows to adjust the Radon IDE panel settings like:

   
   • Run diagnostics... - opens a diagnostics panel that verifies whether your current React Native project is supported by the extension,
   • Manage devices... - open a manage devices modal,
   • Open dev menu - opens the React Native in-app development menu,
   • Change IDE panel location - allows to change the location of the Radon IDE panel to editor tab, side panel, secondary side panel or to open the extension in a new window,
   • Launch configuration - allows to adjust the launch configuration of the extension.

7. Zoom controls - hovering over the area reveals the zooms controls which allow to adjust how zoomed the device preview should be. You can choose one of the predefined values or use the plus and minus magnifier buttons to adjust the zoom manually.

   

8. Device preview - the preview of the running iOS simulator or Android emulator.

9. Element inspector - enabling element inspector and clicking on the preview opens the line of code where the highlighted component is defined. Right-clicking on the device preview allows you to select components directly from the React tree.

10. Manage devices - allows to create, delete, and select devices currently used in the Radon IDE preview.

    

11. Report issue - opens a page in the Radon IDE GitHub repository where you can submit issue reports and suggest features.

12. Device settings - allows to adjust the device settings like device appearance, location, permissions, and text size.

    

Theme

Radon IDE supports both light and dark themes and automatically adjusts to the current VSCode settings.