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

UPD: In WebStorm 2018.1, we have reworked the React Native configuration. It now gives you much more flexibility in running the bundler and building the app itself. In the steps below we use WebStorm version 2018.2.

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.


To start your React Native app for the first time, you need to do two things: run React Native bundler/packager and then build and launch an app on a simulator or a device using the react-native run-ios or run-android command. Only after that, you can start debugging it.

With the Build and Launch Application option checked, WebStorm will do all that for you – you just need to select the target platform, iOS or Android, make sure the path to the React Native CLI package is correct and click Ok.


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 let’s run the created configuration – click the green debug icon next to the configuration name in the IDE toolbar. 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.

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.

If it’s not the first time you run your app and you haven’t made any changes to the native code since the last build, you don’t really need to rebuild the app – you can just run bundler, open the app in the simulator and then debug it.

In this case, create a new configuration (or modify the one you’ve already created) and uncheck the Build and Launch Application checkbox in it. When you debug this configuration, WebStorm will run React Native bundler and will wait for you to open an app in the simulator with the Remote debug enabled in the app.

There’s also now more flexibility with running React Native bundler. It’s now listed as a Before Launch task in the React Native configuration. By default, it will run react-native start. You can also select an npm task from your project’s package.json that will start the bundler.

Or if you have bundler already running, you can simply remove this step from the configuration (because you don’t need to run more than one bundler per app).

If you are using Expo in your app, please see this blog post for the steps.

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.

139 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 {
        } 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](

        • Ekaterina Prigara says:

          Thanks! Fixed this problem yesterday:
          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 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.


  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/ –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 :


    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

    * 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:

    • 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:

    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

  22. Jack Kim says:

    Can’t debug React-Native anymore from WebStorm
    Please help

    Console message is..

    /usr/local/bin/node –debug-brk=55072 –expose_debug_as=v8debug /Applications/ –port=8081 –sourcesStoragePath=/Users/jaehwikim/Desktop/CH_work/.tmp/reactNativeBuild

    Debugger listening on [::]:55072

    [intellij] Downloaded debuggerWorker.js (Logic to run the React Native app) from the Packager.
    [intellij] Starting debugger app worker.
    [intellij] Established a connection with the Proxy (Packager) to the React Native application
    [intellij] Debugging session started successfully.
    Cannot assign to read only property ‘regeneratorRuntime’ of object ‘#’

    • Ekaterina Prigara says:

      What WebStorm, Node.js and React Native versions do you use? Thanks!

      • Jack Kim says:

        Thanks for your replay.

        WebStorm 2017.2
        Node.js 6.11.2
        React Native 0.47.1

        • Ekaterina Prigara says:

          We’ve tried to reproduce the problem with the sample app generated by the React Native CLI, WS 2017.2.2, same node and React Native version as you’re using, but wasn’t able to get this error. Are you using WebStorm 2017.2.2?
          Do you have this error only in one project? Do you run debugging for iOS or for Android? Any chance you can send us your project? Please contact our tech support with more details:
          Thank you!

        • Ekaterina Prigara says:

          Can you please try to select Chrome as a debugging backend in the React Native debug configuration in WebStorm (available in WS 2017.2.2). Let us know if it fixes the problem. Thanks!

  23. Paul Lipschitz says:

    I’ve got the dev environment running but I can’t seem to find any way to build a React .apk from Webstorm 2017.2.2.

    Am I missing something here?

  24. Chris Gatzonis says:


    When I press debug it seems to be building and installing the app successfully but then I get an error saying:

    “Error running ‘ios’: Cannot run program ‘Google Chrome’ (in directory ‘Users/username/Documents/Projects/projectname’): error=2, No such file or directory”

    How can I fix this? Thanks.

  25. Danny Shisler says:

    Hi, I have the “TypeError: Cannot assign to read only property ‘regeneratorRuntime’ of object ‘#'” error as well.

    I get it after trying to use the library As soon as I add an import statement for the library to my code I get this error.

    Debugging from the command line works fine. Sorry, it’s a big project I can’t really send you all the code.

    I’m using RN 0.47.2, I’m developing Android only at the moment. My project also uses Redux Saga 0.15.6 (which is the only place I’ve seen regeneratorRuntime related issues before). I don’t if this is related?

    • Ekaterina Prigara says:

      Hi! Can you please try to select Chrome as a debugging backend in the React Native debug configuration in WebStorm (available in WS 2017.2.2). Let us know if it fixes the problem. Meanwhile, we’ll try to reproduce it with the library you’ve mentioned. Thanks!

      • Danny Shisler says:

        Hi Ekaterina,

        Yes, that does work thank you, although I do miss debugging in the IDE – it’s a much better experience. Is this going to be fixed?

        Also I get an error in the IDE eventlog:
        “16:52 Error running ‘MyApp’: Cannot run program “chrome” (in directory “C:\Code\MyApp”): CreateProcess error=2, The system cannot find the file specified”

        It still seems to work OK though.

        • Ekaterina Prigara says:

          WebStorm uses Chrome only as a debugging backend. For the user debugging works the same way as before (when using Node.js as debugging backend).

          Can you please update to the latest WebStorm verison – 2017.2.4. The problem with the invalid path to Chrome was fixed in WebStorm 2017.2.3.


  26. Rajat Gupta says:

    Received status code 407 from server: Proxy Authentication Required.
    I am getting this error when I run “react-native run-android”.
    For proxy setting I have added following lines in my :



  27. Oscar says:


    I just started trying React Native with IntelliJ Idea 2017.2.5 and I’ve already hit an issue for me…

    I created a React Native Project, let IntelliJ do its stuff, and when it finishes, I try to run using the iOS configuration.

    After that, in the “Run” tab I can see that “react-native start” has been started, but that’s it… it never starts “react-native run-ios”. The run “iOS” configuration is in its default state.

    Node: 8.9.1
    React Native package: 2.0.1
    Only start package manager: clear (no check)
    Debugger: Chrome (this one I changed)

    If I run the run-ios command from the terminal (within IntelliJ) it works, but as I’ve seen in youtube videos, it should be automatically.

    Can someone tell me if I have to do something so run-ios is executed from the run command?

    Thank you

  28. Victor says:

    Hi. I’m having some issues when trying to run my project. For some reason, the default run configs for react native on android won’t work out of the box. When I click run, the console displays the command: “”C:\Program Files\nodejs\node.exe” C:\Users\…\AppData\Roaming\npm\node_modules\react-native-cli run-android –no-packager”. And just like it says, it doensn’t run the packager, which causes an error when the cli installs the app on my device. I have tried the obvious solutions, can I get some help?

    • Ekaterina Prigara says:

      What WebStorm and React Native versions do you use?

      • Victor says:

        react-native-cli: 2.0.1
        react-native: 0.50.3

        WebStorm 2017.3

        Build #WS-173.3727.108, built on November 25, 2017
        JRE: 1.8.0_152-release-1024-b6 amd64
        JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
        Windows 10 10.0

    • thuan says:


      I have the same issue here, my stack:
      – webstorm: 2017.3
      – react-native: 0.49
      – node: 8.9.1

      • Ekaterina Prigara says:

        Hello, we’ve reported an issue: but we are not sure that it’s actually the problem you both are experiencing. Can you please confirm that it is it or provide a bit more details on the problem.

        • Victor says:

          My problem seems to be the same as the person’s in the link. Webstorm runs the cli with the argument –no-packager and I don’t know why.

          What I find really weird is that when I downgraded to version 2017.2, webstorm now ONLY runs the packager and not the actual run command. So the console is stuck on the packager screen and doesn’t open a new tab.

          I tried both 2017.3 and 2017.2 with fresh new projects.

          Here are some pictures to better explain the issues.

          I hope you can help me solve this problem, thanks a lot.

          • thuan says:


            If you use WS 2017.2 with react-native 0.50, it won’t start debugger. That’s why i was waiting for WS 2017.3 to fix it, but it was even worse.
            I have to downgrade WS to 2017.2, react-native to 0.49 as a workaround

        • Victor says:

          Could there be something wrong with my setup?

    • Viktor says:

      Hi Victor, I have the same issue and I resolved it with starting packager separately by executing “react-native start” in terminal.
      Hope it will help you.

  29. thuan says:

    Please fix this asap, i have to downgrade to 2017.2 to work on my project.

  30. Rajendra 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.

    • Ekaterina Prigara says:

      What exact versions of WebStorm and React Native do you use? There was a bunch of issues fixed in version 2017.3.1. Please give it a try!

  31. luozg says:

    Hi I tried to debug a ios react native app with webstorm.But neither works. the error is
    Can’t start debugger
    webstorm: 2017.3.1
    React Native 0.51.0

  32. Greg says:

    Error running ‘Unnamed’: Can’t start debugger

  33. Cj says:

    Fresh install of everything after a OS reset, did run into a two or three issues which I fixed, and got everything running and working, except one thing, after running the app.
    On the command just before the last one I believe it would be ‘ adb -s 895b6883 reverse tcp:8081 tcp:8081’ it failed.
    Still runs the app but does not refresh.
    This is the output I get instead of that failed line: “/sh/bin adb unknown command”
    I did run the app directly from the terminal and everything worked fine.

  34. kirill says:

    found a solution to How to Open Android AVD/SDK manager inside Webstorm / Phpstorm on Windows without any CLI and trouble.

    • Gazihan Alankuş says:

      You don’t have to open the same project to be able to start AVD from Android Studio.

      Wouldn’t it be nice to be able to start AVD from Webstorm/IntelliJ? When developing Flutter with IntelliJ, you can.

  35. Gonzalo Infante says:

    I can hit event handler breakpoints even though when hovering over them there’s a red message indicating that the feature is not supported, and I cannot hit component initialization breakpoints (eg. constructors or componentDidMount methods). Does this happen to anyone else? (Using WS 2017.3.3).

  36. Amr Elssamadisy says:

    Apologies if this is an obvious question, but I’ve been trying to get the debugger to stop at a breakpoint with no success. I have a simple hello world which does nothing more than print a message that comes out of the box on creation of a ReactNative app within Webstorm (code below).

    I press “debug” and everything seems to start up. I have enabled Remote JS Debugging on the emulator. I have the chrome debugger showing (i bit of a problem with that and had to run “adb reverse tcp:8081 tcp:8081). And I have a breakpoint within the render() function. Nothing happens. The app runs as if the breakpoint is non-existent.


    export default class App extends Component {
    render() {
    return (

    Welcome to React Native!

    To get started, edit App.js



    • Ekaterina Prigara says:

      Where exactly in the render function the breakpoint is? There’re two possible reasons. First, it’s not possible to hit a breakpoint on the line with the JSX tag. Second is a known limitation of the WebStorm debugger: on the first run, the breakpoints put in the code executed on the app load are not hit – WebStorm doesn’t have enough time before the app is rendered to map the breakpoints in the source code to the compiled code. Sorry for not mentioning it in the blog post. Please try to add some event handler and put the breakpoint in it (here’s an example:

      • Amr Elssamadisy says:

        Thank you @Ekaterina, that was it :D There goes my theory about trying something out in a simple hello world! before jumping into my full blown application :D

  37. Amr Elssamadisy says:

    Hi there, we have a problem with the debugger while running Jest tests.

    Basically, sometimes the debugger doesn’t breakpoint where we need, and it seems to break elsewhere in the file where there is not breakpoint. This looks similar to a memory corruption when working with unmanaged languages like C/C++.

    We have uploaded the code we are working on here:

    Our breakpoint is on line 30 of __tests__/MainMap.test.js yet the debugger stops on line 12 and when resumed the tests crash.

    Here is a screenshot:

    • Ekaterina Prigara says:


      Thank you for a sample project! We reproduced the problem: the breakpoint wasn’t hit, but once we resumed the execution, tests passed without a crush.

      Unfortunately, we can’t see the screenshot that you’ve sent.

      Here’s an issue that you can follow: We hope to address it soon!

  38. Ayoub says:

    I want to add an external font for my texts, how can i do it ??
    thank you !

    • Ekaterina Prigara says:

      Do you want to use a different font in the IDE’s editor or in the mobile app that you’re developing?

  39. Fred OLeary says:

    I’m having trouble with webstorm breakpoints working reliably. I added a Js fragment to the default App component E.g.
    export default class App extends Component {
    render() {
    return (

    Welcome to React Native!

    To get started, edit App.jsdd



    const foo = () =>{
    return “some message”;

    If I have a break point set in Chrome Dev tools at the console.log() line and one in Webstorm on the same line, the WebStorm breakpoint hits. But if I remove the Chrome Dev
    breakpoint the Webstorm one doesn’t. Also neither b.p. works in hot reload, only in a manual re-load. The whole debugging experience is not too enjoyable. Any guidance on this? I’m using WebStorm 2018.1.2 and react-native 0.55.4

  40. Fred OLeary says:

    Oops the code I copied into the comment seems to have missed half the markup. It’s the sample “App” component generated by react-native init. (I.e. few “text” elements”)

  41. Lukas Ferreira Machado says:

    Great post, but anyone having problem running the simulator? In my case, neither react-native run-ios nor run-android runs, just the react-native start runs.

  42. Lukas Ferreira Machado says:

    Anyway, any idea how to solve it?

    • Ekaterina Prigara says:

      We need more information to investigate the problem: the IDE version, the react-native version, the screenshot of the run/debug configuration, and the full output from the run tool window. Can you please send all that to our tech support? Thanks!

  43. Art says:

    Could you help me?

    Running app in webstorm:

    /usr/local/bin/node /usr/local/lib/node_modules/react-native-cli start
    │ │
    │ Running Metro Bundler on port 8081. │
    │ │
    │ Keep Metro running while developing on any JS projects. Feel free to │
    │ close this tab and run your own Metro instance if you prefer. │
    │ │
    │ │

    Looking for JS files in

    Loading dependency graph, done.

    that’s all.. stuck… application not deploying => debug (brackpoint) not working => air deploy not working..

    if i run in console : react-native run-android
    deploy – ok

    but i can’t use webstorm debug tools.. and other important things..

    how resole that ?

    • julia.mochenkova says:

      Hello, Art!
      We need more information from you.
      What IDE version do you use? What is react-native package version?
      Could you provide screenshots of the Debug tool window and the Run/Debug configuration, and the full output from the Run tool window? Thank you!

  44. Sandy says:

    I am seeing similar issue to Art and Lukas.

    I have the Active tool window which starts the bundler, but there is no active tool window for my ios launch for simulator.

    I am using –simulator and –scheme in arguments, however when I run react-native run-ios from the command line, it works ok.

    I also see an error message when I click stop on the debugger. Error running ”: Unknown error.

    I also run typescript compiler as Before launch action, which completes successfully.

  45. Mark says:

    unfortunately Webstorm does not support .m, .h, and .java files.
    It’s getting development harder if someone wants to do somethings in iOS or android project.
    Is there any plan to add syntax highlighting support for those files at least?

  46. Roman Adigezalov says:

    Hey. I am using WebStorm to write React native code. I’m very uncomfortable that when writing React Native StyleSheet webstorm offers me only the completion of writing keys, but does not give hints on the possible parameters of these keys. For example, for flexDirection, it does not suggest possible options.

Leave a Reply to Greg Cancel reply

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