N ways to debug React Native app
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.
- To install the app on a physical device set
--device="MyDevice". The name of your device you can find and edit in
- To install and run the app on a simulator set
--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.
- If you leave the
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
- Run your React Native app (on a device or an emulator/simulator).
- Open the native subproject of your React Native app (probably placed in
iosdirectory) in Android Studio or Xcode.
- Attach to the process:
In Android Studio open
Attach debugger to Android process, check
Show all processesand choose the device that your app is running on. In Xcode open
Attach to Processand choose your app process (it will likely be named as your app).
- Now you can debug the native code - the app code itself (which is probably not that necessary) as well as included libraries. The latter is extremely useful when you need to develop your own react-native-to-native bridge library.
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 :)
- sometimes the IDE decides to stop debugging :) Usually, it’s still possible to debug in the browser
- a breakpoint added while debugging does not take effect, even after reloading the app
- any changes made in the code while debugging do not take effect,
- the app crashes right after starting.
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.