WebStorm 2017.3 Help

React Native

React Native allows you to 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 integrates with React Native providing assistance in configuring, editing, linting, running, debugging, and maintaining your applications. In addition, WebStorm also provides code completion for React and Flow symbols.

Before you start, download, install, and configure Node.js as described in Configuring Node.js Interpreters.

Installing react-native-cli globally

Open the built-in Terminal (View | Tool Windows | Terminal) and type npm install -g react-native-cli at the command prompt.

Creating a new React Native application

You can create a React Native application from WebStorm using a dedicated project generator or create an empty WebStorm project and install React Native in it.

Creating a React Native application using a WebStorm generator

  1. Choose File | New | Project on the main menu or click Create New Project on the Welcome screen. The Create New Project Dialog opens.
  2. In the left-hand pane, choose React Native.
  3. In the right-hand pane, specify the project folder, the Node.js interpreter to use, and the path to the react-native-cli package.
    ws_react_native_generate_app.png
  4. When you click Create, WebStorm generates a React Native-specific project with all the required configuration files.
  5. Install other tools to get started with React Native. 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.

Installing React Native in an empty WebStorm project

To create an empty WebStorm project

  1. Choose File | New | Project on the main menu or click Create New Project on the Welcome screen. The Create New Project Dialog opens.
  2. In the left-hand pane, choose Empty Project. In the right-hand pane, specify the application folder and click Create.

To install React Native in an empty project
Set up the directory structure, install the react, react-native, and other required packages as described on the React Native Official website.

Starting with an existing React Native application

If you are going to continue developing an existing React Native application, open it in WebStorm and download the required dependencies.

If the application sources are already on your machine
Click Open on the Welcome screen or choose File | Open on the main menu. In the dialog that opens, select the folder where your sources are stored.

If the application sources are under version control

  1. Click Check out from Version Control on the Welcome screen or choose VCS | Check out from Version Control on the main menu.
  2. Select your version control system from the list.
  3. In the VCS-specific dialog that opens, type your credentials and the repository to check out the application sources from.

To download the dependencies
Open the embedded Terminal (View | Tool Windows | Terminal) and type npm install at the command prompt.

To exclude the android and the iOS folders from the project

  1. In the Project tool window, select the android or the iOS folder.
  2. On the context menu of the selection, choose Mark Directory As, and then choose Excluded.
    ws_react_native_mark_as_excluded.png

To get a complete React Native development environment
Install other tools to get started with React Native. 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:

ws_react_native_style_sheet_properties_completion.png

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

WebStorm launches React Native applications according to a dedicated run/debug configuration. The configuration settings depend on the target platform you choose.

Creating a React Native run/debug configuration

  1. On the main menu, choose Run | Edit Configurations, click add.png and choose React Native from the list. The Run/Debug Configuration: React Native opens.
  2. Choose the Node.js interpreter to use from the drop-down list and make sure the path to the react-native-cli package is correct.
  3. Choose the target platform, Android or iOS, and specify whether you want to run your application on a simulator or not: to use a simulator, clear the Only start packager checkbox.
ws_react_native_run_config_ios.png

Running an application

You can run your application on a physical device or on a simulator. The device should be already running when you launch your application.

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 (View | Tool Windows | Terminal) and type npm install --g 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 run next to it. WebStorm opens the Run tool window and first starts the React Native packager in a new React Native tab. After that, the react-native run-ios or react-native run-android command is executed, depending on the selected target platform. If the build is successful, the simulator shows your application:

ws_react_native_packager_running.png

Debugging an application

  1. Set the breakpoints in your code as required.
  2. Create a React Native run/debug configuration as described above and specify the debugger process to use:
    • Choose Chrome to debug with Chrome runtime. To start Chrome in the headless mode, click browseButton next to the Browser drop-down list, then in the Web Browsers dialog select Chrome and click edit1. Finally in the Chrome Settings dialog, type --headless for macOS and Linux or --headless --disable-gpu for Windows in the Command line options field.
    • Choose Node to use Node.js as debugging backend. Note that this works for Node.js versions 7 and earlier or 8.4 and higher. Debugging with Node.js versions 8.0 - 8.3 is not supported.
    In either case, the debugging session will take place in WebStorm so you do not need to make any changes to your application code.
  3. 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 run next to it. WebStorm opens the Run Tool Window and runs the packager in a new React Native tab.
  4. When the build is completed and the application appears in the simulator, open the In-App Developer Menu and choose Debug JS Remotely:
    ws_react_native_in_app_developer_menu.png
    WebStorm built-in debugger connects to the simulator.
  5. 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.
    ws_react_native_debugging_session.png
Last modified: 19 January 2018

See Also