JetBrains Rider helps you create, edit, lint, run, debug, and maintain your React Native applications. JetBrains Rider also provides code completion for React and Flow symbols.
Before you start
Creating a new React Native application
The recommended way to create a React Native application in JetBrains Rider is to use a dedicated project generator, for example, the React Native CLI.
Starting with an existing React Native application
To continue developing an existing React Native application, open it in JetBrains Rider and download the required dependencies.
Open the application sources that are already on your machine
Click Open on the Welcome screen or select from the main menu. In the dialog that opens, select the folder where your sources are stored.
Check out the application sources from your version control
Click Get from VCS on the Welcome screen or select from the main menu.
In the invoked dialog, select your version control system from the list and specify the repository to check out the application sources from.
Download the dependencies
To exclude the android and iOS folders from the project
In the Project tool window, select the android or the iOS folder.
From the context menu of the selection, choose Mark Directory As, and then choose Excluded.
Install other tools to get started with React Native, for example, an iOS simulator. The list of these tools depends on your operating system and the mobile platform you are going to target your application at. See React Native Getting Started guide for detailed installation instructions.
Code completion for React Native StyleSheet properties is also available:
Running and debugging a React Native application
You can run and debug your application on a physical device or on a simulator. Before you launch your application, make sure that the simulator is already running or, if you are using a physical device, it is already connected to your computer.
JetBrains Rider makes running and debugging React Native applications very flexible. For example, if you are starting your application for the first time, you can choose to run the React Native bundler, build the application, and open it on the simulator - all that as part of a running or debugging session. You can also skip launching the bundler if it is already running or refuse building the application if you have not made any changes to its native code since the previous run.
Create a React Native run/debug configuration
On the main menu, go to React Native from the list. The Run/Debug Configuration: React Native opens., click and select
Choose whether you want JetBrains Rider to build and launch the application for you:
Select the Build and launch checkbox if you are launching your application for the first time or if you have updated its native code since the last run.
Clear this checkbox if you haven't made any changes to the native code of your application since the last build. When you start debugging, JetBrains Rider waits for you to open your application in the simulator with the Remote debug enabled as described on the React Native official website
If you selected the Build and launch checkbox, choose the target platform, Android or iOS. Depending on your choice, JetBrains Rider will run the bundler with
react-native run-iosor with
Optionally, type the arguments to be passed to React Native, for example, specify the simulator type through the
In the Bundler host field, specify the host where the React Native bundler runs, the default value is localhost.
In the Bundler port field, specify the port on which the React Native bundler runs, by default 8081 is chosen, learn more from the React Native official website.
If your application uses Expo, you may need to change the port to 19000 or 19001, depending on the Expo configuration. See Debug a React Native application that uses Expo below.
Specify the path to react-native-cli and the working directory of the application. Optionally, type the environment variables for
By default, JetBrains Rider starts the React Native bundler automatically when you invoke the run/debug configuration. If you have already started the bundler from outside JetBrains Rider, for example, from the command line, you can re-use it without stopping and restarting. Select your bundler in the Before Launch area and click .
Prepare a device or a simulator
If you are using an Android device, you need to prepare it every time you start working with an application.
An iOS simulator has to be installed only once, after that JetBrains Rider starts it automatically with
Run an application
Choose the newly created React Native configuration in the Select run/debug configuration list on the toolbar and click next to it. JetBrains Rider opens the Run tool window and first starts the React Native bundler in a new React Native tab. After that, the
react-native run-androidcommand is executed, depending on the selected target platform. If the build is successful, the simulator shows your application:
Debugging an application
With JetBrains Rider, you can debug applications that use the native React Native bundler and those that use Expo.
In debugging React Native applications, JetBrains Rider relies on the Chrome runtime, which is used by React Native itself. You can also use DevTools together with JetBrains Rider. When you initiate a debugging session, JetBrains Rider starts a new Chrome instance and attaches to it. If you don’t want to see any new Chrome windows, use the Chrome Headless mode.
Debug a React Native application that uses a native bundler
Set the breakpoints in your code as required.
Create a new React Native run/debug configuration as described above. If the bundler is already running outside JetBrains Rider, select it in the Before Launch area and click .
To start your application, select the newly created React Native configuration from the Select run/debug configuration list on the toolbar and click next to it. JetBrains Rider opens the Run window and runs the bundler in a new React Native tab.
The built-in JetBrains Rider debugger connects to the simulator.
When the first breakpoint is hit, proceed with the debugging session — step through the breakpoints, switch between frames, change values on-the-fly, examine a suspended program, evaluate expressions, and set watches.
Debug a React Native application that uses Expo
With JetBrains Rider, you can start debugging such React Native applications in several ways:
Create a script that runs Expo and then specify this script as a Before launch task in the React Native run/debug configuration.
First run Expo manually or via a script and then initiate a debugging session without any Expo-related Before launch tasks.
In either case, you may need to change the default bundler port, depending on how Expo is configured.
Set the breakpoints in your code as required.
Create a new React Native run/debug configuration as described above and change the default settings as follows:
Clear the Build and launch checkbox because this bundler takes care of the process itself.
In the Bundler host field, change the default
127.0.0.1or an external IP address depending on what is selected in Connection field of the Metro bundler configuration.
In the Bundler port field, change the default 8081 setting to 19000 or 19001, depending on the Expo configuration.
In the Before launch area, select the default Start React Native Bundler task and click .
To start Expo via a script automatically, click and select Run npm script from the list.
In the NPM Script dialog that opens, select the npm script that starts Expo.
Select the newly created configuration and click .
When the first breakpoint is hit, proceed as when debugging an application that uses a native bundler.
To configure Chrome Headless in JetBrains Rider
Click next to the Browser for debugging field. The Web Browsers dialog opens.
Select Chrome, click , and rename the copied configuration, for example, to Chrome Headless.
Select the new browser configuration, click , and type
--headlessfor macOS and Linux or
--headless --disable-gpufor Windows in the Chrome Settings dialog.
In the run/debug configuration, choose the new Chrome Headless configuration from the Browser for debugging list.