Developing mobile apps with React Native in WebStorm

React Native allows you to develop native mobile apps for iOS and Android using JavaScript and React. It’s created by Facebook and used for such well-known apps as Instagram, Airbnb, and now JetBrains’ own YouTrack mobile app (which is open-source, by the way).

With WebStorm 2016.3 you can now develop mobile apps with React Native getting all the benefits of WebStorm goodies like code completion for React, Flow support, and a built-in debugger. We believe WebStorm can be a great and powerful tool for development with React Native!

Let’s see how we can set up a workflow for development with React Native in WebStorm.

Install React Native CLI

Make sure you have a React Native CLI installed on your machine. To install it, run the following command in the Terminal: npm install -g react-native-cli.

The list of tools you need to install to get started with React Native depends on your OS and the mobile platform you’re going to target your app at. Check out React Native’s Getting Started guide for detailed installation instructions.

Creating a new project

Now you can create a new React Native project right from the IDE Welcome screen: click Create new project, select React Native from the list on the left, enter a project name and click OK.


WebStorm will run a project generator and install all the required dependencies.

Of course you can also open an existing project or check one out from version control.

We recommend that you exclude android and ios folders from the project. To do that, right-click on a folder in the Project view and select Mark as Excluded.


Running and debugging the app

Now that we have our app’s code in the IDE, let’s run it.

We’ll need to create a new React Native run/debug configuration. In the Run menu, select Edit configurations…, click the + button and select React Native from the list.

Now select the target platform, iOS or Android, and click OK. Make sure the path to the React Native CLI package is correct.


Run the created configuration. WebStorm will start the React Native packager first in a new React Native tool window and then will run the react-native run-ios or react-native run-android command, depending on the selected target platform. You can leave the packager running in the tool window, but stop and restart configurations for Android and iOS in other tabs.

If the build is successful, you’ll see your app in an emulator.


Once the emulator opens for the first time, go to the in-app developer menu and select Remote JS Debugging.


WebStorm’s built-in debugger will then connect to the emulator, and you’ll be able to hit the breakpoints you put in your source code.


In the debugger you can step through your code, set watches, and explore the call stack and variable values.

Coding assistance

As you may know, WebStorm has support for React and JSX that will surely be helpful when building a React Native app. This includes: code completion for attributes, events and required properties for React components; navigation to the definition and completion for custom components; refactorings for component names; and lots more. Check out our blog post, Working with React in WebStorm: coding assistance.

WebStorm 2016.3 also adds code completion for React Native StyleSheet properties:


If you’re using Flow in your project, WebStorm can highlight the errors from Flow in the editor. Enable Flow as a JavaScript version in Preferences | Languages & Frameworks | JavaScript and specify a path to the Flow executable. Find out more about using Flow in this blog post.

Your WebStorm Team

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Tutorials and tagged , , . Bookmark the permalink.

26 Responses to Developing mobile apps with React Native in WebStorm

  1. Martin says:

    Thanks a ton for all this. One question though: what is the reasoning behind exclude android and ios folders from the project?

    • Ekaterina Prigara says:

      Excluding these folders from the project hides all the generated files inside them from the Go to file results. Also, if not excluded, every time React Native updates these files WebStorm will reindex the list of file names and that might cause a little slowdown. Of course, if you want to be able to navigate to them, don’t exclude these folders.

  2. Hom says:

    I want run the react-native run-ios –[options] or react-native run-android –[options] command,but I don’t find where to configure.

  3. Ardiansyah Putra says:

    React Native isn’t available in my Webstorm 2016
    Do you install plugin for it?

  4. Ivan says:

    i get this error with WebStorm 2016.3, MacOS Sierra, iOS emulator

    [intellij] [Warning] Couldn’t import script at . Debugging won’t work: Try reloading the JS from inside the app, or Reconnect the debugger: path must be a string

  5. Quan Zhou says:

    i get the “missing import statement” warning when i use import {...} from 'react-native' in WebStorm 2017.1 EAP
    but, If i change the “import …” to const {...} = require('react-native'), the warning has gone.

  6. Junius ang says:

    Hi, please pardon me if i am asking at the wrong place, currently i am using webstorm for developing ios and android react native(RN), RN allowed us to create two same files for different platform, let say i have ClockWidget.js, later the code is separated into and ClockWidget.ios.js. It is working perfectly in both devices, but only i cannot reference it by using cmd+click (to go to the particular file) in webstorm.

    sample of import line
    import ClockWidget from ‘./ClockWidget’;

    Any help to allow us to resolve this issue? if it is not yet implemented maybe you guys can add it later, I am sure it will help a lot of RN developer out there

  7. Leonardo says:

    Hi, the react-native package its available for PHPStorm???

  8. patrick says:

    I have never been able to get debugging RN with Webstorm to work. Always the same issue for me.

    RN version 0.40
    node version 6.6.0

    [intellij] Debugging session started successfully.

    Cannot assign to read only property ‘regeneratorRuntime’ of object ‘#’
    Failed to print error: regeneratorRuntime.async is not a function
    [intellij] [Warning] Couldn’t import script at . Debugging won’t work: Try reloading the JS from inside the app, or Reconnect the debugger: Cannot assign to read only property ‘regeneratorRuntime’ of object ‘#’

    throw e;
    TypeError: regeneratorRuntime.async is not a function
    at symbolicateStackTrace (/Users/patrickcremin/repo/storageroomz/.tmp/reactNativeBuild/index.ios.bundle:31040:123)
    at reportException (/Users/patrick/repo/storageroomz/.tmp/reactNativeBuild/index.ios.bundle:30931:1)
    at Console.reactConsoleErrorHandler [as error] (/Users/patrick/repo/storageroomz/.tmp/reactNativeBuild/index.ios.bundle:30989:1)
    at ConsoleLogger.logError (/Applications/
    at Object.logError (/Applications/
    at Object.logWarning (/Applications/
    at printDebuggingError (/Applications/
    at /Applications/
    at _rejected (/Applications/
    at /Applications/

    Process finished with exit code 1

  9. Lubomir says:

    I ma having same problem.

    Node7 + WebStorm 2017.1 on OSX

    [intellij] [Warning] Couldn’t import script at . Debugging won’t work: Try reloading the JS from inside the app, or Reconnect the debugger: Cannot assign to read only property ‘regeneratorRuntime’ of object ‘#’

  10. Fredi says:

    Using the latest WebStorm 2017.1 I need to debug a React Native app running on Android. Can someone tell me how to do it so I can put a break in my source code and walk through the source code. There is no instructions for Android development. can someone help ,please? The Android is attached to my Mac via a USB cable.


Leave a Reply

Your email address will not be published. Required fields are marked *