Saturday, December 30, 2023

Why Expo Go app fails to connect with the Expo app server running on Windows?

Expo is a framework build around react-native framework to provide better developer experience and tools when building a cross-platform react-native application. The framework comes with the handy app called Expo Go, which can be used to test your application on your android or iphone device without the need to build any native packages out of your application.

Workflow to open the app on the physical device is simple, as you just have to follow these steps

  1. Install the Expo Go app on your android or iOS device
  2. Run the development server of your app using the command npx expo start
  3. Open the development server url from the Expo Go app (by scanning the QR code or manually)
However in Windows, even though the development server is running, Expo Go app might failed to load the app with following error
Uncaught Error: java.net.SocketTimeoutException: failed to connect to after 10000ms

It could be due to one of the following reasons.

Device and windows are in the different network

Connect both windows and the device which has Expo Go app to the same network. If both are in different networks then Expo Go app will not be able to find the development server running on Windows.

E.g. both the device and Windows will be in the same network if it is connected to the same router.

Inbound connection for the development server port is not allowed in Firewall

Open the Windows firewall as an administrator > select Inbound rules > select New rule > Choose port > Next > Select Specific local port and pass the development server port as value > Allow the connection > Choose all domain > Provide a name > and finish.

Port number of the development server will be printed along with the npx expo start command output.

Inbound connection to the node.exe application is not allowed in Firewall

If adding an inbound rule for development port still does not work, then it could be because the access for node.exe is blocked from firewall inbound rule.
Open the Windows firewall > select Inbound rules.

Search for any rule that blocks the access for node.exe and delete that rule, with that Expo Go app should be able to load the app from the development server.

Wednesday, December 27, 2023

Create Android Emulator Using Command Line Tools

Recently I had the need to create an android emulator to test my tiny new app, it is no secret that Android Studio is the go to IDE in this case, because it has the SDK Manager which can be used to create an Android emulator easily.

But what if we don’t want to install Android Studio just for the purpose of creating the emulator, Can we do that without using the Android Studio?🤔 The answer is yes, there exists a command line sdkmanager for this purpose, so lets use it to create an emulator.

Go ahead and download it for your platform, In my case I downloaded it for Windows and the steps explained here are tried on Windows in PowerShell.

Install sdkmanager CLI

Follow the steps explained in sdkmanager-tools to install sdkmaager CLI. If followed properly you should have a newly created folder with the subfolder cmdline-tools in it. The folder which contains the cmdline-tools subfolder is the Android Home or Android SDK Root folder, therefore its a good idea to setup the environment variables ANDROID_HOME and ANDROID_SDK_ROOT for this folder location.

You can setup these environment variables in Windows by using Environment Variables view. To open up the view search for Edit environment variables for your account in the search bar.

With that now you should be able to list the packages from sdkmanager by executing following command.

cd $Env:ANDROID_HOME ; .\cmdline-tools\latest\bin\sdkmanager --list

Install platform-tools

The command line tool Android Debug Bridge (adb), which comes with platform-tools, is used to communicate with device to install/debug app therefore it should also be installed.

Install the platform-tools using the sdkmanager CLI by executing following command.

cd $Env:ANDROID_HOME ; .\cmdline-tools\latest\bin\sdkmanager platform-tools

Install system-image and platform

Emulator requires system image and platform. Use the latest or preferred version of these packages from sdkmanager.

I used the version android 14/API 34 to install these packages, you can list all possible packages by invoking sdkmanager --list.

cd $Env:ANDROID_HOME ; .\cmdline-tools\latest\bin\sdkmanager "system-images;android-34;default;x86_64" "platforms;android-34"

Create emulator

Now the installed system image and platform can be used to create an emulator. When creating an emulator it is preferred to create it using a specific device skin, it brings the width/height and resolution similar to that targeted device.

All the possible devices can be listed using the command. 

cd $Env:ANDROID_HOME ; .\cmdline-tools\latest\bin\avdmanager list device

Create an emulator called my-pixel using the above installed system-image, platform and pixel-7 device skin.

cd $Env:ANDROID_HOME ; .\cmdline-tools\latest\bin\avdmanager create avd --name "my-pixel" --package "system-images;android-34;default;x86_64" --device "pixel_7"

Start the emulator

Install the emulator package, which contains emulator.exe, if it is not installed already(if you don't see emulator subfolder in ANDROID_HOME folder) then use following command to install it.

cd $Env:ANDROID_HOME ; .\cmdline-tools\latest\bin\sdkmanager "emulator"

Once installed start the above created emulator named my-pixel using the following command.

cd $Env:ANDROID_HOME ; .\emulator\emulator -avd my-pixel


Hooray now we have created an Android emulator using only the command line tools 🙌