How to Run React Native App on an Android Emulator

Academind by Maximilian Schwarzmüller
A free video tutorial from Academind by Maximilian Schwarzmüller
Online Education
4.6 instructor rating • 27 courses • 1,516,798 students

Learn more from the full course

React Native - The Practical Guide [2021 Edition]

Use React Native and your React knowledge to build native iOS and Android Apps - incl. Push Notifications, Hooks, Redux

32:29:01 of on-demand video • Updated May 2021

  • Build native mobile apps with JavaScript and React
  • Dive deeper into React Native
  • Develop cross-platform (iOS and Android) mobile apps without knowing Swift, ObjectiveC or Java/ Android
English Now we tested the application on a real device which is of course pretty nice and also amazing to see it run there but for development, I will actually use a simulator which is a virtual device running on my machine, simply so that I don't constantly have to test the app on my real device, I like having it here, also makes it easier for recording. You probably also want to test the app on a simulator at some point, for example because you probably only own either Android or an iOS device and you also want to test and see your app on the respective other platform or you have both devices, you have an iPhone, you have an Android phone but you also want to test your app on an older iPhone, on a smaller Android device and with simulators and emulators, you can launch different types of devices and test your app there. To get started with that, go to the guides section down there and click on Up and Running, doesn't matter where you click though, in the end you just need to get to docs.expo.io and there in the managed workflow, you can click on iOS simulator or Android Studio emulator and there, you learned how to install Android Studio and then launch a virtual device or install Xcode which is Apple's development environment and launch an iOS simulator. Important, an iOS simulator can only be launched on MacOS devices because Xcode, a tool which you absolutely need for that is not available on Windows or Linux, so you can't run an iOS simulator on Windows or Linux, you can run an Android Studio emulator there though, on MacOS you can run both. So let's now install these things and let's start with the Android Studio emulator, for this, you first of all need to install Android Studio. For this, you can of course simply google for Android Studio and you should find developer.Android.com/studio, simply click on there and then there, choose download Android Studio and agree to these terms here. Now this will open up that download window and now download Android Studio which is quite large and therefore this download can take a while. Now I'll be back once this download is finished to then continue with the setup. So the download finished for me and with that, I'm opening this up, now I'm on Mac here but also Windows, you simply double click on that downloaded file to start the installer and the installer will open up and walk you through a couple of steps. Now in that installer, you can simply leave all the default settings. Now with the Android Studio installed and the installation finished, we'll launch in a second. Now before I launch together with you and we walk through this first step, make sure you have these settings down there on MacOS and Linux configured correctly. So on Windows, you should need to do that but on MacOS and Linux, make sure you follow these two steps which you'll find in the official docs so that everything works correctly. Now with that, let's launch Android Studio, once you start it, you should see a screen that looks something like this. There, you can click on configure and then choose the SDK manager. Now here in the SDK manager, make sure that you have one of the latest SDKs installed. Now typically, you have the topmost SDK which is is still in beta, so in my case that's the Android API level 29q which has no official name yet and the latest stable version, in my case pi, is the one you should install, typically the second item here in that list. So the first version which has a real name so to say, in this case pi, make sure that this is installed simply by checking it here and once you've checked it, you can click apply down there and this will automatically download and install it. Besides having an SDK installed, make sure that in the SDK tools, you have the Android emulator installed here, so simply click on this here, add a checkmark here and the SDK platform tools and the SDK tools, that all these three are checked here. Also check into Intl 86 emulator accelerator here and the Google Play Services. With all of the checked, click apply and now again this will prompt you and then start downloads of all these items and install them into your Android setup here and you need all these things installed to develop Android applications. So let's wait for this download and installation to finish here and with that finished, you're done here, you can close that and the next step, still in that Android Studio window here, is that you click on configure AVD manager. This is the manager that allows you to create and launch virtual devices. You see I got a couple of devices already, you might have none, you can always create a new one in the bottom left corner by clicking on create virtual device and then choose a phone here and you can choose any image you want here to create different devices of different sizes. I would recommend going with one that has the Play Store installed, that can help with testing certain features which we might need later but in general, you can pick any image here which you want, I'll go with the pixel 2 here. Click next, then choose an Android version you want to use on that device and there, I will use the latest stable one, so not the beta one, not the Q in my case but the latest stable one, you might need to download it first, this image, this is independent from the SDKs you installed a second ago, these are device images. So make sure you download the latest stable one and select it thereafter, click on next. You can leave the default settings here, you could dive into advanced settings if you really know what you're doing but otherwise, you can leave the defaults and click finish and this will now create a new emulator, in my case this one here and you can launch the emulator by clicking that green play button here and this will now start that emulator here which is now booting up here and once it is booted up, you can run your expo app, your React Native app, on this emulator. So let's wait for this to finish and let me then show you how to launch your expo app on that emulator. So the emulator finished up booting and now you can launch your app on this emulator simply by going to your project where you might have your process still running, if you quit it, you can simply restart npm start in your React Native expo project. So that's what I'm doing here and it's again starting the expo dev tools in the browser here and now here where we previously scanned this QR code, you can press run on Android device or emulator and if you have an emulator up and running, it will automatically run your app there or in your terminal here where you have this running npm start process, you can press a to also launch your app on the emulator. That's what I just did, this will now install the expo client on the emulator automatically, so you don't need to install or manually install the expo client there, it's done for you and once it's done with that, it builds your app and runs it on that Android device. So let's wait for this to finish, here it is, here it's booting up and yes click okay here, you're prompted whether you want to allow displaying this app the first time you launch this. Turn this on here, then go back, go to the app drawer here or to the task manager and go back into your app here and now here is your expo app launching, it's again building that Javascript bundle at the bottom and once it's done, it will launch your expo app here and only that first build takes quite long, subsequent rebuilds and hot reloads as you saw are pretty fast. So let's wait for this build to finish and now it is finishing up here and here, we see our app. By the way, this is nice, we saw it on the iPhone before, at least here in the videos. Now here it's running on Android and the button is one of the very few components React Native offers which does automatically adjust its look to the platform, so that's pretty sweet and we have the same functionality as before and this allows us to test this, not only on the real device but also in a simulator and there you can simulate any Android device you want, which is of course pretty useful. So that's the app running on an Android simulator and throughout this course, I will always always show how this runs and works on an Android emulator. Now let's next dive into running this on iOS.