React Native
With React Native you can develop native mobile applications for iOS and Android using JavaScript and React. It is created by Facebook and used for such well-known apps as Instagram, Airbnb, and now JetBrains’ own YouTrack mobile application. Learn more from React Native Official website.
WebStorm helps you create, edit, lint, run, debug, and maintain your React Native applications. WebStorm also provides code completion for React and Flow symbols.
Installing react-native-cli globally
Open the built-in Terminal ( ) and type
npm install -g react-native-cli
at the command prompt.
Creating a new React Native application
The recommended way to create a React Native application in WebStorm is to use a dedicated project generator.
To create an application
Choose Create New Project on the Welcome screen. The Create New Project Dialog opens.
on the main menu or clickIn the left-hand pane, choose React Native.
In the right-hand pane, specify the project folder, the Node.js interpreter to use, and the path to the
react-native-cli
package.When you click Create, WebStorm generates a React Native-specific project with all the required configuration files.
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.
To download the project dependencies, do one of the following:
Open the embedded Terminal ( or Alt+F12) and type
npm install
at the command prompt.Choose Run 'npm install' on the context menu of the
package.json
file in your project root.
Starting with an existing React Native application
To continue developing an existing React Native application, open it in WebStorm and download the required dependencies.
To open the application sources that are already on your machine
Click Open on the Welcome screen or choose on the main menu. In the dialog that opens, select the folder where your sources are stored.
To check out the application sources from your version control
Click Check out from Version Control on the Welcome screen or choose on the main menu.
Select your version control system from the list.
In the VCS-specific dialog that opens, type your credentials and the repository to check out the application sources from.
To download the dependencies
Click Run 'npm install' in the pop-up window:
To exclude the android and iOS folders from the project
In the Project tool window, select the android or the iOS folder.
On 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.
Coding assistance
WebStorm provides code completion for React APIs and JSX in JavaScript code. Code completion works for React methods, React-specific attributes, HTML tags and component names, React events, component properties, etc. Learn more from React: Completing Code.
Code completion for React Native StyleSheet properties is also available:
If you are using Flow in your project, WebStorm can highlight the errors from this type checker in the editor. Learn more from Configuring Flow in WebStorm and Using Flow in WebStorm.
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.
WebStorm 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.
To create a React Native run/debug configuration
On the main menu, choose React Native from the list. The Run/Debug Configuration: React Native opens.
, click and choose- Choose whether you want WebStorm 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, WebStorm waits for you to open your application in the simulator with the Remote debug enabled as described on the React Native Official website.
If your application uses Expo, clear the checkbox because this bundler takes care of the process itself.
If you selected the Build and launch checkbox, choose the target platform, Android or iOS. Depending on your choice, WebStorm will run the bundler with
react-native run-ios
or withreact-native run-android
. Optionally, type the arguments to be passed to React Native, for example, specify the simulator type through the‑‑simulator
flag:‑‑simulator="iPhone 4s"
.In the Bundler port, specify the port on which the React Native bundler runs, by default
8081
is chosen, learn more from the React Native Official website.Choose the Node.js interpreter to use. This can be a local Node.js interpreter or a Node.js on Windows Subsystem for Linux. Specify the path to
react-native-cli
and the working directory of the application. Optionally, type the environment variables forreact-native run-android
orreact-native run-ios
.By default, WebStorm starts the React Native bundler automatically when you invoke the run/debug configuration. If you have already started the bundler from outside WebStorm, 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 .
To prepare an Android device
Launch an Android virtual device or enable debugging over USB and connect to a physical Android device via USB. Learn more from the React Native Official website.
To prepare an iOS simulator
Open the embedded Terminal ( or Alt+F12) and type
npm install --global ios-sim
at the command prompt.
To run an application
Choose the newly created React Native configuration in the Select run/debug configuration drop-down list on the toolbar and click next to it. WebStorm opens the Run tool window and first starts the React Native bundler in a new React Native tab. After that, the
react-native run-ios
orreact-native run-android
command is executed, depending on the selected target platform. If the build is successful, the simulator shows your application:
Debugging an application
With WebStorm, you can debug applications that use the native React Native bundler and those that use Expo.
In debugging React Native applications, WebStorm relies on the Chrome runtime, which is used by React Native itself. You can also use DevTools together with WebStorm. When you initiate a debugging session, WebStorm 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.
To 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 WebStorm, select it in the Before Launch area and click .
To start your application, choose the newly created React Native configuration in the Select run/debug configuration drop-down list on the toolbar and click next to it. WebStorm opens the Run Tool Window and runs the bundler in a new React Native tab.
When the build is completed and the application appears in the simulator, open the In-App Developer Menu and choose Debug JS Remotely. Learn more from the React Official website. The built-in WebStorm 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.
To debug a React Native application that uses Expo
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 port field, change the default,
8081
setting, to19001
.In the Before launch area, select the Start React Native Bundler task, which is chosen by default, and click . Then, in the Configure React Native dialog, choose npm script, and select start or another task that launches the application.
Select the newly created configuration and click .
Open your Expo client application on your phone or simulator, select the current application, and enable remote debugging, learn more from the Expo Official website.
When the first breakpoint is hit, proceed as when debugging an application that uses a native bundler.
To configure Chrome Headless in WebStorm
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
--headless
for macOS and Linux or--headless --disable-gpu
for Windows in the Chrome Settings dialog.In the run/debug configuration, choose the new Chrome Headless configuration from the Browser for debugging list.