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.

new-react-native-project

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.

mark-as-excluded

Running and debugging the app

UPD: Starting with WebStorm 2017.2.1 there are 2 ways to debug React Native apps: using Node.js as debugging backend or using Chrome. You can select it in the React Native run/debug configuration. In either case, the debugging will take place in WebStorm and no changes to the app’s code are required.

Please note that you can use Node as a debugger process only with Node.js version 7 or below.

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.

react-native-run-configuration

If you’re going to run your app on Android, don’t forget to start the Android Virtual Device first. You can also run your app on a real Android device connected via USB (for that don’t forget to enable USB debugging).

Now 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.

run-packager

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

emulator

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.

debugging-the-app

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:

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.

71 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.

    • Ekaterina Prigara says:

      Can you please share a line of code that is marked with this warning.

      • Quan Zhou says:


        import React, { Component } from 'react';
        import {
        AppRegistry,
        StyleSheet,
        View,
        Text,
        } from 'react-native';

        export default class studyLog extends Component {
        render() {
        // I will get warning under this method
        return (

        Welcome to React Native!

        To get started, edit index.ios.js

        Press Cmd+R to reload,{'\n'}
        Cmd+D or shake for dev menu

        );
        }
        }

        here is the screenshot:
        ![missing import statement screenshot](http://p1.bpimg.com/567571/8b6d9b724a0971b3.png)

        • Ekaterina Prigara says:

          Thanks! Fixed this problem yesterday: https://youtrack.jetbrains.com/issue/WEB-25735
          Will work fine in the next week EAP update.

          • Ben Kraus says:

            Praise! This issue has been bugging me too!

          • Sam Elsamman says:

            Running 2017.1.4 and the AppRegistry, StyleSheets, Text and View when imported as shown above still shows a warning – ‘cannot resolve symbol’. Is there a special code quality option needed for react-native?

          • Ekaterina Prigara says:

            Are there symbols imported at the top of the file?
            Also please make sure that you have react-native listed in the package.json and you have run npm install. To resolve symbols from React Native WebStorm has to analyse its files.

          • Jonathan Bridges says:

            Looks like this is still happening if you create your project with the official create-react-native-app.

            More specifically, this occurs because of the package expo which is included. This package has a flow-typed ‘react-native.js’ which exports react-native, and Webstorm is picking this up and then getting confused.

            To test, you can create a react-native app with Webstorm and npm install echo, you’ll then see any imports from react-native can’t be found.

            CMD + Click the ‘react-native’ import and you’ll see how Webstorm finds two options, and is picking the wrong import.

          • Ekaterina Prigara says:

            Thanks for the investigation. We’ll have a look.

          • Jonathan Bridges says:

            Thanks Ekaterina! I filed an issue as well, WEB-28269. My comment above actually has wrong library, should be expo not echo. Anyway, it is corrected in the ticket. Thanks for fast response!

  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 ClockWidget.android.js 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 ‘#’

    /Applications/WebStorm.app/Contents/plugins/JavaScriptDebugger/proxy/node_modules/q/q.js:155
    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/WebStorm.app/Contents/plugins/JavaScriptDebugger/proxy/log/loggers.js:19:17)
    at Object.logError (/Applications/WebStorm.app/Contents/plugins/JavaScriptDebugger/proxy/log/log.js:36:22)
    at Object.logWarning (/Applications/WebStorm.app/Contents/plugins/JavaScriptDebugger/proxy/log/log.js:44:13)
    at printDebuggingError (/Applications/WebStorm.app/Contents/plugins/JavaScriptDebugger/proxy/appWorker.js:17:15)
    at /Applications/WebStorm.app/Contents/plugins/JavaScriptDebugger/proxy/appWorker.js:124:13
    at _rejected (/Applications/WebStorm.app/Contents/plugins/JavaScriptDebugger/proxy/node_modules/q/q.js:844:24)
    at /Applications/WebStorm.app/Contents/plugins/JavaScriptDebugger/proxy/node_modules/q/q.js:870:30

    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.

    Thanks,
    Fredi

  11. Cris Bennett says:

    Hey this is great, thanks.

    A few questions:

    1. Can I do all this with the relevant plugins in IDEA Ultimate? (I prefer to use 1 IDE with all my own customisation & configurations for everything where possible).
    2. The Android emulator doesn’t start up with the React Native run configuration. For now I’ve set up an External Tool for this, though it doesn’t work as a run config pre-launch action because it takes too long. Not a big problem, but what’s the recommended approach
    3. Is JetBrains using this internally for apps like the YouTrack iOS/Android RN app?

  12. mampf says:

    Hi I tried to debug a react native app with webstorm and Intellij. But neither works. Im using the latest webstorm & Idea versions. The Debugger ignores any breakpoint as well as gives no inspection of variables.

  13. Chung says:

    Does Webstorm support debugging on projects created by “create-react-native-app”? I have tried expo and like some of it’s features, but I really miss debugging in webstorm instead of chrome console.

    • Ekaterina Prigara says:

      Any chance you can point me to the debugging guide in Chrome for the apps generated with create-react-native-app? I haven’t found any. Thanks!

      • Chung says:

        Since I can’t find a way in webstorm to debug apps created by create-react-native-app, I just debug it in the old way – enable the remote debugging from the development menu in the simulation . But I prefer debugging it in webstorm, much more convenient to inspect.

    • Juan says:

      An alternative would be ejecting the create-react-native-app and using the Webstorm’s React Native run configuration to debug directly on the IDE.

  14. Noam Nelke says:

    We have an Android and iOS native app and we’re now adding some React Native views to the apps. We’re combining the two native repositories into the new React Native project and we’re gonna work in WebStorm, as you recommend.

    My question is: how do you recommend we work on the existing native code from now on? The setup for running the apps will now live in WS, but that will only enable editing/debugging React Native code. There are no Java or Objective-c plugins for WS, so we’ll basically need to still work in Android Studio / AppCode if we need to work on native code.

    Is there a better way to do this?

    • Ekaterina Prigara says:

      I would recommend using WebStorm only if you’re working on the JavaScript part of a React Native app. WebStorm doesn’t support any languages other than JavaScript (and related languages).
      Please use IntelliJ IDEA Ultimate, our Java IDE, that has all the WebStorm features including React Native support and tools for Android development.
      For editing Objective-C code you’d still need to use AppCode or Xcode.

  15. Can’t debug React-Native anymore from WebStorm:

    /usr/local/bin/node –debug-brk=59814 –expose_debug_as=v8debug /Applications/WebStorm.app/Contents/plugins/JavaScriptDebugger/proxy/launcher.js –port=8081 –sourcesStoragePath=/Users/xxx/Documents/Lavori/xxx/xxx/.tmp/reactNativeBuild
    /usr/local/bin/node: bad option: –expose_debug_as=v8debug

    No issue if I run outside WebStorm.
    I can figure out where to set “–inspect” in place of “–debug-brk” param. No place in Run/Coinfig Params.

  16. Sushant says:

    Please help me to solve this issue ! Although I’ve accepted all the license agreements, it says the following :

    ***BUILD FAILED

    Total time: 59.466 secs

    FAILURE: Build failed with an exception.

    * What went wrong:
    A problem occurred configuring project ‘:app’.
    > You have not accepted the license agreements of the following SDK components:
    [Android SDK Platform 23, Android SDK Build-Tools 23.0.1].
    Before building your project, you need to accept the license agreements and complete the installation of the missing components using the Android Studio SDK Manager.
    Alternatively, to learn how to transfer the license agreements from one workstation to another, go to http://d.android.com/r/studio-ui/export-licenses.html

    * Try:
    Run with –stacktrace option to get the stack trace. Run with –info or –debug option to get more log output.
    Picked up _JAVA_OPTIONS: -Xmx512M
    Could not install the app on the device, read the error above for details.
    Make sure you have an Android emulator running or a device connected and have
    set up your Android development environment:
    https://facebook.github.io/react-native/docs/android-setup.html

    • Ekaterina Prigara says:

      Can you build the app if you run React Native from the command-line?

      • Sushant says:

        Whether I launch it via command-line or Webstorm’s/ Android Studio’s UI, I get the same error message as described previously. Even when I ran the utility command “sdkmanager –licenses” (which is supposed to accept the licenses for all the SDK platforms and objects) on the CMD, I couldn’t get past this licensing issue on my PC (Win 10, x64, Android Studio w/ latest & stable SDK tools, Webstorm 2017 fully registered/licensed to me). So, what other options do I have to fix this ? Maybe a COLD installation of both the IDE’s ? But, I don’t think that it’s related to the IDE’s configuration. What do you suggest me next ?

  17. Ron Arts says:

    How do I configure to run an Expo project? I get the following:
    It uses another client (exp) and I cannot get it to work.

  18. Bbeck says:

    How can I install a module of react-native in webstorm. For instance, from cmd line you can: npm install –save react-native-lightbox. How can I achieve same in webstorm?

    • Ekaterina Prigara says:

      You can open a built-in terminal and run the installation from it, or you can add the module to the dependencies object of your package.json and from the file context menu run npm install.

  19. Sriram says:

    Hi when I run android emulator I am getting
    Could not install the app on the device, read the error above for details.
    Make sure you have an Android emulator running or a device connected and have
    set up your Android development environment:
    https://facebook.github.io/react-native/docs/android-setup.html

    how to setup path in webstrom

  20. Lau Kai says:

    I’m on arch linux and I have been using node8.js for a while. Is there any workaround for debugging in webstorm? I read that it’s only available for node 7 or below.

    • Ekaterina Prigara says:

      At the moment debugging using Node.js 8 is not possible. Sorry for the inconvenience. In WebStorm 2017.2.1, coming in a couple of weeks, it will be possible to use Chrome as a debugging backend, so that debugging will be not affected by the node version.

      • Lau Kai says:

        Is the debugging with Node.js 8 not released yet?

        • Ekaterina Prigara says:

          We are not planning to fix debugging with Node.js 8 in the current WebStorm version. Instead we’ve introduced debugging using Chrome as a debugging backend. It will be fully available in WebStorm 2017.2.1. Please see my update under Running and Debugging section of the blog post.

  21. Sriram says:

    Hi i am getting Unrecognized font family ‘Roboto’. please help

Leave a Reply

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