Run the iOS app
It is quite convenient to create build configurations in your IDE. I personally use IntelliJ IDEA, but WebStorm is pretty similar.
Add Configuration (or
Edit configuration, if you happen to have any configuration created already).
Add a new
React Native configuration.
Run iOS or whatever is meaningful to you. As a
Target Platform choose
iOS. We can use either a physical device or a simulator to run the app on.
--device="MyDevice". The name of your device you can find and edit in
--simulator="iPhone X"(or any other device with iOS you want to test on). The simulator is shipped with Xcode and you need a Mac to run it. To manage simulated devices, open Xcode, go to
Devices and Simulators.
Argumentsproperty empty, it will attempt to install the app on any connected device.
You can also include your
.env file in the
Environment property as follows:
Run the Android app
Creating the run configuration for Android is pretty similar. Add another
React Native configuration, give it a name and choose
Android as a
Target Platform. To run the app on a device or a simulator, you need to have
adb installed. It is shipped with Android Studio, which is convenient to have installed anyway. To view and manage Android emulated devices, you may use Android Studio. From menu select
Tools -> AVD Manager. You can also use the command line for this, check the details here. To run the app on a physical device, you need to enable the developer mode on it. Once you run the app, it will be installed on all devices connected (to view the devices list, you can run
Now that we can run the React Native app, there is a handy option, you may want to enable:
Hot Reloading. To enable it, open the in-app developer menu with
CMD + D (iPhone simulator), or
CMD + M (Android emulator), or shake gesture (physical device).
Live reload. It will reload your app anytime you change the code, which means you will lose the current app state.
Once we are in the developer menu, there is another useful option - inspector. This is not the fully featured inspector a web developer may know from web browsers, but it may help from time to time. To enable it, choose
Debug JS Remotely. A web browser should open and display the debugger page. If it does not, open in manually. Now you can debug your JS code either in the browser’s developer tool window or via the IDE. You can debug your app both on physical and virtual devices, on Android and iOS.
Debug native code
iosdirectory) in Android Studio or Xcode.
Attach debugger to Android process, check
Show all processesand choose the device that your app is running on.
Attach to Processand choose your app process (it will likely be named as your app).
Tips and tricks
Although it looks promising, not everything works like a charm. In fact, as of my experience, more often it does not work. Here are some tips, what to do when things don’t go like clockwork.
Hot reloading does not always reload a screen properly, sometimes you just need to reload the app manually to get the changes visible (especially when you change the styles only). Keep it in mind, when your changes don’t seem to work :)
You can resolve most of these problems by taking one or more of the following steps: reopening simulator/emulator, reopening the browser, restarting the Metro Bundler process and the platform-specific process (or killing the node process), cleaning (remove
node_modules directory and run
yarn/npm install, remove
ios/buid directory) and rebuilding the app.