React Native WebStorm Emulator cannot start - error Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`

Question

I'm new to WebStorm and React Native and I encountered an error while setting up my environment that appears unique compared to the other post I've seen.

Objective

I've set up a default project in WebStorm, my goal is to run that project on an Android emulator, I'm using a Windows PC.

What I've tried

I've set up a simple Debug configuration in WebStorm

I've also downloaded an Android Emulator thru Android Studio and I have it running on my computer.

Now when I click on run for my debug emulator I get the following error:

info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 864 file(s) to forward-jetify. Using 4 workers...
info JS server already running.
'adb' is not recognized as an internal or external command,
operable program or batch file.
info Launching emulator...
infoerror Installing the app... 
Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`.
warn Please launch an emulator manually or connect a device. Otherwise app may fail to launch.

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> SDK location not found. Define location with an ANDROID_SDK_ROOT environment variable or by setting the sdk.dir path in your project's local properties file at 'C:\Users\Nicol\WebstormProjects\Dog\android\local.properties'.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 13s

Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> SDK location not found. Define location with an ANDROID_SDK_ROOT environment variable or by setting the sdk.dir path in your project's local properties file at 'C:\Users\Nicol\WebstormProjects\Dog\android\local.properties'.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 13s

    at checkExecSyncError (child_process.js:621:11)
    at execFileSync (child_process.js:639:15)
    at runOnAllDevices (C:\Users\Nicol\WebstormProjects\Dog\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:94:39)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.

Other Information

Here is a picture of my Path System variables:

Solution 1

adb is not on your %PATH%; make sure to add the folder where adb.exe is located (usually $ANDROID_HOME/platform-tools, where $ANDROID_HOME is your Android SDK install dir, usually C:\Users\Your.Name\AppData\Local\Android\sdk, you can run where adb command in Windows cmd console to find it) to %PATH% under System environment variables and then restart WebStorm.

You also need defining %ANDROID_SDK_ROOT% environment variable per suggestion in the error message

Solution 2

Just to add, windows environment variables are case sensitive and adding %LOCALAPPDATA%\Android\Sdk like the react-native website says will not work, you need to add %localappdata%\Android\Sdk