Running a React Native app on Android Emulator in M1 Mac

Takuya Matsuyama - May 14 '21 - - Dev Community

Hi. I have an M1 MacBook Air and have been waiting for Android Studio to support M1 macs so that I can use it for developing my React Native project.
It's been about a half year since an Android Emulator developer tweeted that he managed to run it:

It had a performance issue though, I heard that the recent Android Studio Preview has supported M1 chips pretty well. So I tried it.
I've got several issues to make it work, but thanks to Yacine, I managed to solve them.
I'm gonna share how to get your RN project to work on Android Emulator on your M1 mac.

_DSF0494

Install Android Studio Preview (Canary build)

Android Emulator for M1 is not available on stable releases yet. You have to use Android Studio Preview.
I'm using Arctic Fox (2020.3.1) Canary 15.

Setup M1 Android Emulator

  1. Go to Tools → AVD Manager, then click +Create Virtual Device....
  2. Pick a device definition you like, e.g., Pixel 5. Click Next.
  3. Pick a system image whose ABI is arm64-v8a. If you can't find any of them, check out the 'Other Images' tab.

Screen Shot 2021-05-14 at 17.59.32

Download the 'S' or 'R (30)' API level.
Now you can run the Android Emulator natively. Congrats!

Screen_Shot_2021-05-14_at_18_05_43

Build errors you may get

If you are lucky enough, your project will be built just fine without any errors. Enjoy a cup of coffee.
However, you may get some build errors like so:

The Jdk installation is invalid.
Selected Jdk location is /Applications/Android Studio Preview.app/Contents/jre/jdk/Contents/Home.
Enter fullscreen mode Exit fullscreen mode
Gradle sync failed: Could not install Gradle distribution from 'https://services.gradle.org/distributions/gradle-6.0.1-all.zip'
Enter fullscreen mode Exit fullscreen mode

Because Android Studio Preview is not a stable version, they can happen for unknown reasons, even if the configurations looked correct.

Clear caches

There are several ways to clear project caches.

First, try File → Invalidate Caches / Restart....

Screen_Shot_2021-05-14_at_18_16_37

Next, remove the following file:

~/Library/Application\ Support/Google/AndroidStudioPreview2020.3/options/jdk.table.xml
Enter fullscreen mode Exit fullscreen mode

Note that the path can be different based on the preview version (In this case, it's 2020.3).
Then, launch Android Studio.

Completely uninstall Android Studio Preview and try again

If you still have the compile error, try reinstalling Android Studio Preview.
First, uninstall it completely. Be careful to do them, or you may lose the important files:

rm -Rf /Applications/Android\ Studio\ Preview.app
rm ~/Library/Preferences/com.google.android.studio-EAP.plist  ~/Library/Preferences/com.google.android.studio.plist
rm /Users/nora/Library/Preferences/com.android.Emulator.plist
rm -rf '~/Library/Application Support/Google/AndroidStudioPreview2020.3'
rm -rf ~/Library/Logs/Google/AndroidStudioPreview2020.3
rm -rf .gradle
Enter fullscreen mode Exit fullscreen mode

Then, install it again.
That worked for me.


Now, my RN project works smoothly on my M1 MacBook Air!
I'm pretty happy.

Follow me online

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .