Android emulator setup for expo on mac

Image for post
Image for post
Photo by Tinh Khuong on Unsplash

For the past one month, i have been doing development in React Native. I am using the expo-cli to create the project and using my physical Android phone for testing. It’s time to install the Android emulator on my laptop, so that i don’t have to check my phone every-time.

For this we have to install Android Studio 3+ first, so head over to this link or google it and download.

Image for post
Image for post
Android Studio

It is 724 MB for mac, so will take sometime to download. Once the dmg file is downloaded, you will get the below screen. You need to drag Android Studio to Applications

Image for post
Image for post
Downloaded

Now, when you open Android Studio on your mac, it will show below screen. Click on Next

First

On next screen choose Standard and click on Next.

Image for post
Image for post
Standard

On the next screen, select any theme and click Next.

Image for post
Image for post
Theme

On the next screen, click Finish.

Image for post
Image for post
Verify Settings

On the next screen,it will start the download and will take sometime.

Image for post
Image for post
Downloading Components

Once the download is complete, you will see the below screen.

Image for post
Image for post
Finally

Click on Configure and then Preferences from drop-down.

Image for post
Image for post
Preferences

Goto System Settings -> Android SDK and copy the Android SDK location, somewhere.

Image for post
Image for post
Preferences

In the Android Studio Screen, click on Start a new Android Studio Project. Take any default setting for a project and then click on the Search icon on the top right corner. Type AVD and it will open below screen.

Image for post
Image for post
AVD

Once you click on +Create Virtual Device, you need to choose a device.

Image for post
Image for post
Device

Then you need to choose an OS from the next screen. Click on download for any latest android version.

Image for post
Image for post
OS

It will open the below screen and download Android image. It will take sometime as the file is huge(1 GB).

Image for post
Image for post
Huge installation

Once the Download is finish, the Finish button will appear. Click on it and then the Next button on the earlier screen.

Image for post
Image for post
Click Next

In the next screen change the AVD Name if you want and click finish.

Image for post
Image for post
Finished

Next, we need to open the terminal and add two export in the .bash_profile file. Notice that the path is what was in Android SDK location

Image for post
Image for post
bash_profile

Next run the below command in terminal

source ~/.bash_profile

After that in Android Studio, open the AVD Manager. It is in the top right corner and will open the Your Virtual Devices pop-up. Inside it click the run button.

Image for post
Image for post
Your Virtual Devices

It will open your Android emulator.

Image for post
Image for post
Emulator

Now, start any of your completed React-native project by npm start. If you don’t have any yet, create one using my previous blog to create a Restaurant Search React-native app here.

Click on Run on Android device/emulator and it will try to open it. First time it will also install expo app on the Android simulator.

Image for post
Image for post
Android emulator

If successful, you will see our restaurant app running on Android Simulator.

Image for post
Image for post
Restaurant app

Hope you liked this setup blog. See you soon :)

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store