How to run react native app in Android Studio emulator?

React Native is an open-source framework for building mobile apps using JavaScript and React. React Native allows you to build mobile apps that look, feel, and perform natively on both iOS and Android platforms using the same codebase, rather than having to write Swift/Objective-C for iOS and Java/Kotlin for Android.

React Native apps are built using components similar to React on the web. The important difference is that instead of rendering to DOM elements, React Native renders components to platform-specific native widgets. This means the apps look and feel as responsive and smooth as those written natively.

Android Studio is the official Android development IDE, based on IntelliJ IDEA and used to build apps for Android devices. The key reason to run or test React Native apps in Android Studio is to take advantage of the Android Studio emulators, which provide full Android environments to simulate how your React Native app would run on different Android devices.

Using Android Studio emulators to test your React Native app allows you to see how the app renders and behaves on various Android OS versions, resolutions, and hardware constraints without needing the physical Android devices. You can thus test and debug your React Native app much more conveniently within Android Studio.

Prerequisites

Before you can run a React Native app in the Android Studio emulator, you need to have the following software installed and configured on your development machine:

Node.js – React Native apps are built using Node.js. Make sure you have Node.js installed.

Java SDK – You need the Java SDK version 8 or newer to build and run Android apps. Download and install the Java SDK if you don’t already have it.
Android Studio – The Android Studio IDE includes everything you need to build apps for Android devices. Download and install the latest version of Android Studio.

With these core software components installed, you’ll have the necessary dependencies to run a React Native app on an Android emulator.

Set up React Native Project

To set up a new React Native project, first initialize the project using the react-native CLI. Open a terminal or command prompt and run:
npx react-native init MyApp
This will generate a new React Native project called “MyApp” with all the basic files and folders needed to start development (as per Setting up the development environment).

Next, navigate into the newly created project directory:
cd MyApp

Then add the Android platform to the project:
npx react-native android
This will set up the native code required to run your React Native app on Android devices (as per How to initialize React Native project).

Configure Android Studio

The next step is to configure Android Studio to run the React Native app. This involves installing the necessary React Native plugins and setting up the SDK. This guide recommends clicking on Configure > SDK Manager in Android Studio to open up the SDK settings.

From there, install the React Native tools by selecting the following under SDK Platforms: Android SDK Platform 28, Intel x86 Atom_64 System Image, Google APIs Intel x86 Atom System Image. Then under SDK Tools install Node, React Native CLI, and the relevant build tools.

You’ll also need to configure the default JDK, setup hardware acceleration for the emulator, and enable hot reloading to reflect code changes instantly without rebuilding the app each time. With Android Studio properly configured, you’ll be ready test and debug your React Native app using the built-in emulators.

Run App in Emulator

To run the React Native app in the Android Studio emulator, first we need to open the project in Android Studio.

Next, create an Android Virtual Device (AVD) in Android Studio that matches the settings required for your app. Recommended settings are:

API level 28 or higher

Minimum RAM size 2048 MB
Screen size and density for a standard mobile phone (for example 1080×1920, 420dpi)

With the AVD created, click the “Run” button in Android Studio to launch the emulator. Once it has finished booting, the React Native bundler will automatically install and launch the app on the emulator so you can test it out.

The app should now be running on the Android Virtual Device, allowing you to interact with it and test its functionality.

Enable Live Reload

Live reload is a feature in React Native that allows you to see changes to your code reflected in the running app immediately, without having to manually rebuild and redeploy the app. This dramatically speeds up development by removing the build, deploy, reload cycle.

Live reloading works by running a Metro server that communicates with the React Native app running on your device or emulator over a WebSocket connection. When you change code and save a file in your editor, Metro will recompile the changed code and send instructions over WebSocket to your running app. Then React Native runtime is able to update/reload the components that changed without restarting the app.

Live reload is enabled by default when running React Native apps. To connect the Metro server to your emulator or device, make sure you open the app from the React Native CLI (react-native run-android) rather than directly from Android Studio. The CLI will launch Metro and establish the WebSocket connection automatically.

Debugging

Android Studio provides powerful debugging tools for React Native apps. You can use breakpoints, watches, and the debug console to step through your JavaScript code.

To enable debugging in Android Studio:

Open the Debug pane and select “Debug ‘app'” from the drop-down menu.
Place breakpoints next to lines of code you want to pause execution on by clicking along the left gutter of your JS files.
In the Debug tool window, you can step through code line-by-line with Step Over, Step Into, Step Out.

Use the console to evaluate variables or execute statements during pauses.
Add expressions to Watches to persistently monitor values.

According to the React Native documentation, you can also enable Hot Reloading and Live Reload from the Developer Menu to update your app instantly. Using Android Studio debugging with these features accelerates the edit, build, test cycle.

Building APK Package

To publish and distribute a React Native app, you need to generate a signed release APK. This requires additional setup like creating a keystore and configuring Gradle scripts.

Here are the steps to generate a signed release APK:

Create a keystore to sign the APK:
- Open the Android SDK Manager and go to the default keystore path using a terminal: cd ~/.android/
- Run keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
Place the my-upload-key.keystore file under the android/app directory of the React Native project

Edit android/gradle.properties and add the keystore credentials:

MYAPP_RELEASE_STORE_FILE=my-upload-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****

Edit android/app/build.gradle and add the signing config to enable release builds:

android {
  ...
  defaultConfig { ... }

  signingConfigs {
    release {
      if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
        storeFile file(MYAPP_RELEASE_STORE_FILE)
        storePassword MYAPP_RELEASE_STORE_PASSWORD
        keyAlias MYAPP_RELEASE_KEY_ALIAS
        keyPassword MYAPP_RELEASE_KEY_PASSWORD
      }
    }
  }

  buildTypes {
    release {
      ...
      signingConfig signingConfigs.release
    }
  }
}

Finally, generate the signed release APK:

cd android && ./gradlew assembleRelease

The APK will be under android/app/build/outputs/apk/release

By properly setting up signing configs and keystore credentials, you ensure the app can be deployed to the Google Play Store (https://reactnative.dev/docs/signed-apk-android). Generating a release APK involves extra configuration but it creates a package ready for production.

Troubleshooting

Some common issues and solutions when running a React Native app in the Android emulator include:

App Crashes on Startup

The app may crash with an error like “The Application has stopped unexpectedly” on launch. Some solutions for this include:

Check Logcat in Android Studio for details on the crash

Try cleaning and rebuilding the project
Make sure emulator system images are up to date
Double check react-native dependencies and versions

Black Screen on App Launch

Sometimes the app launches but only shows a black screen. Try these fixes:

Restart the packager server
Rebuild and reinstall the app

Disable animated views if present
Check Logcat for Javascript errors

For more troubleshooting tips, refer to this article.

Conclusion

In summary, running a React Native app in the Android Studio emulator requires some initial setup, but allows you to effectively test and debug your app during development. After installing dependencies like Node, the JDK, and Android Studio, create your React Native project and link it to Android Studio. Configure the emulator in Android Studio, then run your app with live reloading enabled for rapid testing. With the emulator, you can build APKs, identify issues, and have full control over the Android environment.

For more information on developing React Native apps for Android, check out the React Native documentation, Android Studio guides, and other online resources:

React Native – Environment Setup