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.
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
Choose File | New | Project on the main menu or click Create New Project on the Welcome screen. The Create New Project Dialog opens.
In 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. 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
Choose File | New | Project on the main menu or click Create New Project on the Welcome screen. The Create New Project Dialog opens.
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
Click Check out from Version Control on the Welcome screen or choose VCS | Check out from Version Control 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 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
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.
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:
WebStorm launches React Native applications according to a dedicated run/debug configuration. The configuration settings depend on the target platform you choose.
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.
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.
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 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 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:
Debugging an application
Set the breakpoints in your code as required.
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 next to the Browser drop-down list, then in the Web Browsers dialog select Chrome and click . 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.
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 packager 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: WebStorm built-in debugger connects to the simulator.
and choose React Native from the list. The Run/Debug Configuration: React Native opens. 
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 
next to the Browser drop-down list, then in the Web Browsers dialog select Chrome and click 
. Finally in the Chrome Settings dialog, type 
