Expo android studio emulator

React Native Expo – 11 February 2021 15 October 2021

When developing an Expo app on a PC you need to be able to run the app on an Android emulator as you don’t have any iOS simulators to work with like you do on a Mac. I found the Expo instructions a little lacking in some detail, and as a Windows PC user primarily, I struggled to find all the information I needed in one place, to run my Expo app in an Android Emulator.

I’m presuming at this point that you’ve, installed Expo, created an Expo project, and built your Expo app. You’ll need to download Android Studio and install it, and have at least one Android emulator configured.

So, to run your Expo app in an Android emulator :

1. Start Expo by typing expo start on the command line.
2. Open Android Studio.
3. Open your project in Android Studio.
4. Open the ‘AVD manager’ from the Android Studio toolbar.
5. Run an Android emulator.
6. Click ‘run on Android device/emulator‘ in the Expo client.

From Android Studio here is the open AVD Manager button:

To run an Android Emulator, click the play symbol next to the one you want to use from the AVD Manager window:

There’s a few problems you can find with each step, so here’s a few things to bear in mind if any of the above steps don’t work.

‘Couldn’t start project on Android‘ Message

If you see this message:

“Couldn’t start project on Android: No Android connected device found, and no emulators could be started automatically. Please connect a device or create an emulator (https://docs.expo.io/workflow/android-studio-emulator). Then follow the instructions here to enable USB debugging: https://developer.android.com/studio/run/device.html#developer-device-options. If you are using Genymotion go to Settings -> ADB, select “Use custom Android SDK tools”, and point it at your Android SDK directory.”

…it means that steps 2 and 3 probably haven’t been done. It’s not a particularly obvious message and you’d be surprised how easy it is to forget both steps.

Couldn’t adb reverse: device ‘adb’ not found

If you see a message saying:

“Couldn’t adb reverse: device ‘adb’ not found”

… most of the time if I ignore this and click ‘Run in Android Emulator’ again after a few seconds it runs just fine.

Here is a link to React Native and Expo books on Amazon.

Please note some links on this page are affiliate links. As an Amazon Associate I earn from qualifying purchases.

Источник

DEV SOFT LIFE FREE .

Swift, Objective-C, Java, Kotlin – вот список языков программирования, которые вам понадобятся, чтобы создать мобильное приложение для Android и iOS. Внушительный список, на освоение которого может уйти много времени. Но мы то с вами хотим быстро – все и сразу: стать хакером за 2 дня, похудеть на 15 кг за одну неделю и прочие безобразия. Что делать? К счастью ребята из Facebook разделяют наше желание быстрого результата, поэтому они придумали фреймворк, который позволяет создавать мобильные приложения для Android и iOS только благодаря одному языку – JavaScript – и имя ему React Native.

Что такое React Native?

Если вы знакомы с веб-фреймворком React, для вас не составит труда быстро разобраться с тем, как работает React Native. По сути, React Native адаптирует фишки React под разработку мобильных приложений. Давайте рассмотрим несколько особенностей React Native:

• Декларативность. Делает возможным удобное описание и создание компонентов в виде ЧТО мы хотим, а не КАК мы хотим.
• Компонентность. Возможность создавать отдельные независимые компоненты с инкапсульрованным состоянием
• Кроссплатформенность. Вы пишите один код под Android и iOS

Вывод: что такое React Native? Это фреймворк, позволяющий одновременно создавать мобильные приложения под Android и iOS, используя для этого независимые компоненты, и делать это на понятном человеку языке.

Быстрое создание React Native приложения

Вам уже не терпится приступить к любимому делу – написанию кода – я понимаю, и поэтому хватит лирики! Давайте кодить! Но потом 🙂 Все было бы проще, если бы все было проще. Нам необходимо сделать несколько подготовительных шагов и настроить окружение. Вот список действий, которые нам необходимо сделать:

1. Установить NodeJs
2. Установить Expo
3. Создать приложение
4. Установить Android Studio и настроить эмулятор
5. Установить Xcode и настроить эмулятор (только если у вас MacOS)
6. Запустить приложения на эмуляторах или прямо на телефоне

Установка NodeJs

Как установить NodeJs вы можете прочитать в моей статье про Angular.

Установка Expo

Expo – это специальная библиотека, упрощающая разработку React Native приложений. Это альтернатива стандартному созданию приложения с помощью React Native CLI. Рассмотрение его работы выходит за рамки этой статьи. Главными преимуществами Expo являются готовая реализация многих нативных компонентов самого телефона, что позволяет быстрее создавать новые приложения, а также окружение, позволяющее быстро тестировать работу разрабатываемого приложения на своем смартфоне или эмуляторе.

Для того чтобы установить Expo выполните следующую команду в консоли:

Источник

Guideline for Running Expo on Android Studio Emulator #1420

Comments

leosurwiki commented Feb 13, 2018

I think we have successfully run Expo on Android Studio Emulator months ago, but it couldn’t work now. Could you provide a new guideline for running expo on android studio emulator? Really appreciate!

The text was updated successfully, but these errors were encountered:

maxh commented Feb 13, 2018 •

here’s the context from slack discussion a few weeks ago; we just wanted to file an issue to track this over time:

do you recommend using genymotion instead of the default android emulator?

also, when we publish it works, so we aren’t totally blocked on this, but hot reload on android would improve our cycle time.

brentvatne commented Feb 13, 2018

@maxh — indeed we recommend genymotion for now!

jesseruder commented Feb 16, 2018

@leosurwiki can you provide more details about why it didn’t work?

barakcodes commented May 18, 2018

I think the emulator from android studio is way more perfomant than before and might be worth intergrating now

jesseruder commented May 21, 2018

@barakcodes yes it has improved a lot, I think it’s reasonable to switch to suggesting it in the docs. Would you want to send a PR to the docs?

barakcodes commented May 21, 2018

@jesseruder Yes I think PR is what’s needed but emphasis on using the latest version of android studio would be a great addition on it too .

smusa commented Jul 5, 2018

In fact i can not use Genymotion because of enterprise rules enforced by McAfee endpoint security and McAfee blocked the executable because it’s below the trust threshold enforced by McAfee rules. So it will be good to integrate Android simulator.

esamelson commented Jul 9, 2018

Hi @smusa — I’ve not had any issues using the Android Studio emulator. It shouldn’t be too hard to set up but we’ll get something into the docs soon.

esamelson commented Jul 12, 2018

Hi all — the relevant changes have been made to the docs and will go out at the time SDK 29 is released.

Bobby-Lux commented Oct 21, 2018 •

Hello, I followed the instructions in the documentation for running my project on an emulator in Android Studio. I had it working for a while, but after a few hours I started getting this error message: «The Expo SDK requires Expo to run. It appears the native Expo modules are unavailable and this code is not running on Expo. Visit https://docs.expo.io to learn more about developing an Expo project.»

I’m not sure what’s going on, since the project runs fine on the iOS simulator. Does anyone know what I’m doing wrong? I’ve included some details below.

SDK Version: 30.0.0
Dev Environment OS: MacOS High Sierra version 10.13.6
Android Emulator Setup: I’ve followed the Expo documentation to set up Android Studio. I can successfully run adb from the command line. I’ve set up a Google Pixel as my Android Emulator.

Expected Behavior:
Running expo start and launching the project in the Android Emulator should successfully start the app.

Actual Behavior:
I get the error ‘The Expo SDK requires Expo to run. It appears the native Expo modules are unavailable and this code is not running on Expo. Visit https://docs.expo.io to learn more about developing an Expo project.’

I’ve been poking around some of the other issues to see if anyone else is experiencing something similar. I saw some suggestions that I delete the /Users/myuser/.expo/android-apk-cache directory and then run npm run android ; I went ahead and tried that, but still get the same error. Any ideas what I’m doing wrong?

Источник

Waldo Blog

Waldo Blog

Run a React Native App on an Android Device or Emulator

React Native is a mobile development framework for building cross-platform apps that run and feel truly native on both iOS and Android. With React Native, you can choose to test run your app either on an emulator or on a physical device.

An emulator is a virtual device that lets you test your app without owning an actual device. Using the Android Virtual Device offers a wide variety of virtual devices that can be emulated. For example, you can set up an emulator based on a device like the Google Pixel and use your preferred version of the Android operating system.

If you own a physical Android device and prefer to test your app on it, React Native has got you covered there too. The process can be as simple as connecting your Android device to the computer you use for development and running a command. However, running React Native apps on Android requires some initial setup.

In this post, we’ll walk through all the initial setup required to set a suitable development environment. After that, we’ll look at how to run an example React Native app on the emulator and on a physical Android device. We’ll close with learning how to test run React Native apps created using the Expo CLI and also how to test React Native apps using a tool known as Waldo.

Prerequisites

The following are required in order to run a React Native app on Android:

• Android Studio
• Android SDK
• JDK 8 (installation instructions for macOS here and Windows here)

Installing Android Studio and Android SDK

Android Studio is the official IDE for Android application development. It’s available for free and can be downloaded from the official website. Android Studio is available for macOS, Windows, and Linux.

To install Android Studio, download the Android Studio setup file here. After that, launch the executable and follow the prompts to complete the installation process.

Once you’re done with the installation process, go ahead and start Android Studio. The first time you run Android Studio, it’ll prompt you to install additional files. The additional files include the Android SDK, platform tools, and emulator. Make sure your computer is connected to the internet, then follow the setup wizard to install all dependencies. The process might take a while, depending on your internet connection.

Installing JDK 8

As mentioned earlier in the requirements, you’ll need to install JDK 8 if you don’t have it installed already. Below are links to the official download pages and installation instructions for Windows and macOS users:

There are multiple ways of installing JDK—for example, using Homebrew on macOS. However, the instructions linked above involve using an executable installer. You can install JDK 8 using any method you prefer.

Configuring Environment Variables

At this point, we have Android Studio and JDK 8 installed. Hence, we can proceed to add the Android SDK to our environment variables. This step will allow React Native to interact with the Android SDK via the command line.

macOS Setup

Follow these steps to set up environment variables on your macOS computer.

Run either sudo nano

/.bash_profile (for bash) or sudo nano

/.zshenv (for zsh) to edit your shell configuration file. After that, paste the following code to the file:

Press Ctrl + x to save the changes.

To reload the new configuration, restart your terminal. Alternatively, you can run source

/.bash_profile or source

/.zshevn (depending on the type of terminal you have).

Windows Setup

On the other hand, if you’re on a Windows PC, you’ll need to add a new environment variable via the control panel. Open the control panel (in category view), then navigate to Systems and Security → Systems.

Click on “Advanced system settings” from the side menu to open the Systems Properties window. Once you’re on the Systems Properties window, click on “Environment Variables” to open the Environment Variables window.

In the Environment Variables window, under the User section, click on “New” to add a new value.

At this point, the New User Variable dialog should be opened. In the first field, which is labeled variable name, add the following value: ANDROID_HOME.

Next, you’ll need to specify the path where Android SDK is saved on your machine in the second field (variable value). Usually, the path is on a location like C:\Users\yourName\AppData\Local\Android\Sdk. You can confirm the correct path from the Android Studio settings page under Appearance & Behavior → System Settings → Android SDK.

In the next section, we’ll be creating a new React Native project, which we’ll use to test our setup so far. If you already have a project setup, you can skip the section.

Creating a New Project With React Native CLI

Open a new terminal window or command prompt if you’re on a Windows PC and run the following command:

After you hit the enter key, wait for the new project setup to complete. Once created, you’ll find a new folder in your current directory. The name of the new folder is the same as the name of your project. Run the following commands to navigate to the project folder:

TIP: Replace helloReactNative with the actual name of your project. That is, in a case where your project has a different name.

Running the App on a Physical Android Device

In this section, we’ll be running our project on an actual Android device. Before we do that, let’s make sure the device and your computer are able to communicate properly.

Enabling USB Debugging

USB debugging makes it possible for the Android Debug Bridge (ADB) to push APKs to your phone.

To enable USB debugging, you’ll need to unlock the Developer Options first. To do that, go to Settings on your Android device and navigate to the About Device section. In the About Device section, tap on the Build Number 10 times or until you see the message “You are now a developer.”

With the Developer Options enabled, you should find a Developer Options item on the settings screen or under Advanced/System Settings. From there, turn on USB debugging.

Running the App

Connect your phone to the computer using a USB cable. After that, go back to the terminal (make sure your project directory is set as the current directory), then run the following command:

On a successful build (when no error occurs), the app will be installed on your Android device. The build process might take a few seconds or minutes, depending on the strength of your computer.

TIP: A prompt might appear on your phone requesting permission for ADB the first time you run the above command. Please accept the prompt to grant ADB access.

Using an Emulator

At this point, we’ve been able to complete the initial setup, and we were able to run our app on an Android device. Next, let’s try to run the same app on an emulator.

We’ll begin with creating a new emulator if we don’t have one set up already.

Open AVD Manager by navigating to Tools → AVD Manager in Android Studio. To launch AVD Manager from the welcome screen of Android Studio, navigate to Configuration → AVD Manager.

In AVD Manager, click on the “Create Virtual Device” button to launch the new virtual device setup wizard.

AVD Manager also displays a list of all the virtual devices you have set up already. If you don’t have any virtual devices, the list will be blank.

Select a device category and name from the options provided. For example, you can select Phone and Pixel 4 as category and name. That will set up a virtual device that emulates the Google Pixel 4. It’s commonly recommended to pick a device that has the Google Play icon next to it. After that, click on Next to continue.

Next, select an Android System Image that will power your new virtual device. Click the download button to download the system image. Once the download is complete, click the Finish button to complete the setup.

Return to AVD Manager. Your new emulator should be visible on the list of devices at this point. Click on the play icon next to the device to start the emulator.

Once the emulator is running, go back to the terminal and run the following command to deploy your app to the emulator:

Wait for the build process to complete. If the process finishes without error, your app should be running on the emulator.

Running React Native Apps Using Expo CLI

Expo CLI is a tool that reduces the initial setup process in React Native development. Hence, it makes getting started easier for people with zero experience.

In this section, we’ll take a quick look at how to run React Native projects based on the Expo CLI.

Physical Device

To run your project on an Android device, first, download the Expo app to your device from the Play Store. After that, run the following command from your project’s root directory:

The above command will start Expo. Expo provides a client that can be accessed via a web browser or on the terminal.

Open localhost:19002 on Google Chrome to access the Expo Metro Builder client. Once Expo is running, connect your phone, then click on “Run on Android device/emulator” to run your app.

Emulator

Now let’s run our app on an emulator using Expo. First, run the npm start command to start Expo (if Expo isn’t already active). Then, open the Expo client in Chrome and click on “Android device/emulator.”

TIP: You might need to remove any connected Android device.

Expo will start a new instance of an emulator you have preconfigured. Wait for the emulator to finish booting. After that, your app should start up on it.

An Extra Way to Test Run Your React Native App

In addition to all the methods we’ve discussed so far, let’s take a look at another way to test run a React Native app. Waldo is a no-code testing solution for mobile development. It’s easy to use and requires no long configurations.

You can try Waldo for free. Sign up on their website here. After that, you can start testing your React Native app seamlessly with Waldo.

In Conclusion

We covered a lot of steps in this post. Hence, let’s conclude with a recap of the key things we’ve learned.

First, we started with setting up the Android development environment. This included installing Android Studio and downloading the Android SDK and environment variable setup.

Secondly, we learned how to create a new React Native project using the React Native CLI.

And finally, we looked at how to actually run our app on a physical Android device and on an emulator device.

If you’re building a React Native app that targets Android users, most of the things we’ve discussed can be helpful in testing your application during the development phase.

This post was written by Pius Aboyi. Pius is a mobile and web developer with over 4 years of experience building for the Android platform. He writes code in Java, Kotlin, and PHP. He loves writing about tech and creating how-to tutorials for developers.

Источник