MAC TECH logo

MAC TECH

mance.dev

Back to Lab
Lab / Article Details
ArticleTutorial

Android App Development Environment Setup

🚀 Ready to dive into Android app development without the bulk of Android Studio? In this comprehensive guide, learn how to set up a complete development environment using just VS Code, Android SDK command‑line tools, AVD Manager extension, and React Native! Happy coding! 😊🔧

Welcome! In this guide, I'll show you how to set up a fully functional Android app development environment using only:

  • Visual Studio Code (VS Code)
  • Android SDK Command‑line Tools (no Android Studio!)
  • AVD Manager extension (for emulator management)
  • React Native (for cross‑platform app development)

Let's get started!

📑 Table of Contents

  • 📋 Prerequisites
    1. Install Visual Studio Code (VS Code) 📝
    1. Set Up the Android SDK with Command‑line Tools Only 📩
    • A. Download the Command‑line Tools
    • B. Extract and Configure the SDK
    • C. Install Essential SDK Packages Using sdkmanager
    1. Install and Configure the AVD Manager Extension in VS Code đŸ–„ïž
    1. Install Node.js and React Native Tooling đŸ’»
    • A. Install Node.js and Watchman
    • B. Install the Java Development Kit (JDK)
    • C. Install Helpful VS Code Extensions
    1. Create and Run Your First React Native App đŸ“±
    • A. Project Structure Overview
    • B. Generate the Project with the React Native CLI
    • C. Point the Project at Your Command‑line‑Tools SDK
    • D. Launch an Emulator
    • E. Run Your App
    1. Frequently Asked Questions (FAQs) ❓
    1. Final Thoughts 🎉

📋 Prerequisites

Before we begin, ensure you have the following:

  • A computer running Windows, macOS, or Linux.
  • A reliable internet connection.
  • Node.js 22.11.0 or newer (required by the current React Native tooling).
  • Java Development Kit (JDK) 17 (the JDK version React Native currently recommends; newer JDKs can cause build issues).
  • Patience & curiosity! 😊

Note: All tools used here are free and open source.

1. Install Visual Studio Code (VS Code) 📝

  1. Download VS Code:

  2. Install VS Code:

    • Run the installer and follow on‑screen instructions.
    • Launch VS Code once installation is complete.

  3. Set Up a Workspace:

    • Create a new folder (e.g., MyReactNativeApp) on your computer.
    • Open VS Code and use File > Open Folder
 to select your new workspace folder.

2. Set Up the Android SDK with Command‑line Tools Only 📩

Since we're not using Android Studio, we must download and configure the Android SDK manually using command‑line tools.

A. Download the Command‑line Tools

  1. Visit the Android Studio Download Page:

  2. Download “Command‑line Tools Only”:

    • Choose the package for your operating system (Windows/macOS/Linux).

B. Extract and Configure the SDK

  1. Extract the Tools:

    • Unzip the downloaded archive.
    • For example, on Windows, extract to: C:\android\sdk\
    • On macOS/Linux, extract to a folder such as: ~/android-sdk/
    • Move the extracted cmdline-tools contents into a subfolder named latest, so the final path looks like 
\sdk\cmdline-tools\latest\bin. The tools expect this exact layout.

  2. Set Up Environment Variables:

    Windows:

    • Open the Environment Variables settings (Search for “Environment Variables” in the Start Menu).
    • Add a new system variable:
      • Variable Name: ANDROID_HOME
      • Variable Value: C:\android\sdk\ (or your chosen directory)
    • Edit the Path variable and add:
      • C:\android\sdk\cmdline-tools\latest\bin
      • C:\android\sdk\platform-tools
      • C:\android\sdk\emulator

    macOS/Linux:

    • Open your terminal and edit your shell configuration file (e.g., ~/.zshrc, ~/.bashrc):

      export ANDROID_HOME=~/android-sdk
export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

    • Save the file and run source ~/.zshrc (or equivalent) to apply the changes.

    Note: Current React Native tooling looks for the ANDROID_HOME variable (the older ANDROID_SDK_ROOT name still works but is considered legacy). Set ANDROID_HOME to be safe.

C. Install Essential SDK Packages Using sdkmanager

Now that your environment variable is set, use the sdkmanager (found in the cmdline-tools/latest/bin folder) to install required components. React Native currently builds against Android 15 ("VanillaIceCream"), API level 35.

  1. Open a terminal (or VS Code's integrated terminal).

  2. Accept Licenses (if prompted):

    sdkmanager --licenses

  3. Install Core Packages:

    sdkmanager "platform-tools" "platforms;android-35" "build-tools;36.0.0" "emulator" "system-images;android-35;google_apis;x86_64"

    Tip: On Apple Silicon Macs, swap the system image for system-images;android-35;google_apis;arm64-v8a. Tip: Check React Native's Set Up Your Environment page for the exact platform/build-tools version your React Native version expects — these do shift as new Android releases ship.

3. Install and Configure the AVD Manager Extension in VS Code đŸ–„ïž

The AVD Manager extension lets you manage virtual devices and start the emulator without Android Studio.

  1. Open VS Code.

  2. Access Extensions:

    • Click the Extensions icon in the Activity Bar (or press Ctrl+Shift+X).

  3. Search for “AVD Manager by Toroxx”:

    • Install the extension.

  4. Configure the Extension:

    • After installation, open Settings in VS Code.
    • Locate the AVD Manager extension settings.
    • Set the Android SDK Path to the folder you configured earlier (e.g., C:\android\sdk or ~/android-sdk).

  5. Launch a Virtual Device:

    • Use the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on macOS).
    • Type “AVD Manager: Create AVD” and follow the prompts:
      • Select a device definition (e.g., Pixel 8).
      • Choose the system image you installed (API Level 35, google_apis, x86_64 or arm64-v8a).
      • Save the configuration.
    • Once created, you can also launch the emulator directly from the extension.

4. Install Node.js and React Native Tooling đŸ’»

A. Install Node.js and Watchman

  1. Install Node.js 22.11.0 or newer:

    • Download from https://nodejs.org/ or install via a version manager like nvm.
    • Verify with: 
      node -v

  2. Install Watchman (recommended, macOS/Linux):

    • Watchman watches your filesystem for changes and significantly improves Metro's reload performance.
    • macOS: 
      brew install watchman
    • Linux: follow the Watchman install guide.
    • Windows: Watchman is optional and can be skipped.

B. Install the Java Development Kit (JDK)

  1. Install JDK 17 (the version React Native currently recommends):

    • macOS (via Homebrew): 
      brew install --cask zulu@17
    • Windows/Linux: download an OpenJDK 17 build (e.g., Azul Zulu, Eclipse Temurin) and install it.

  2. Set JAVA_HOME:

    export JAVA_HOME=/path/to/your/jdk-17
export PATH=$PATH:$JAVA_HOME/bin

  3. Verify Installation:

    javac -version

C. Install Helpful VS Code Extensions

  1. Open VS Code.

  2. Open Extensions:

    • Press Ctrl+Shift+X.

  3. Install “React Native Tools” by Microsoft:

    • Adds debugging, IntelliSense, and command palette integration for React Native projects directly in VS Code.

  4. Install “ES7+ React/Redux/React-Native snippets”:

    • Handy JSX/TSX snippets for faster component authoring.

  5. (Optional) Install “Prettier – Code formatter”:

    • Keeps your JavaScript/TypeScript formatted consistently.

5. Create and Run Your First React Native App đŸ“±

In this section, we'll create a simple project using the React Native Community CLI — no Android Studio required, since the CLI generates a self‑contained android/ project (Gradle wrapper included).

A. Project Structure Overview

A freshly generated React Native project looks like this:

MyReactNativeApp/
├── android/
│   ├── app/
│   │   ├── build.gradle
│   │   └── src/main/
│   │       ├── AndroidManifest.xml
│   │       └── java/com/myreactnativeapp/
│   │           └── MainActivity.kt
│   ├── build.gradle
│   ├── gradlew
│   └── gradlew.bat
├── ios/
├── App.tsx
├── index.js
├── package.json
└── tsconfig.json

Note: Unlike a hand‑assembled native project, the CLI already generates gradlew/gradlew.bat and the Gradle wrapper for you — there's no separate Gradle install or wrapper‑generation step needed.

B. Generate the Project with the React Native CLI

  1. Open a terminal in your VS Code workspace folder.

  2. Scaffold a new app using the React Native Community CLI (no global install needed — npx fetches it on demand):

    npx @react-native-community/cli@latest init MyReactNativeApp

  3. Move into the project folder:

    cd MyReactNativeApp

  4. Install dependencies (if not already installed by the CLI):

    npm install

Tip: If you previously installed the old global react-native-cli package, remove it first — it's deprecated and can conflict with the current Community CLI:

npm uninstall -g react-native-cli @react-native-community/cli

C. Point the Project at Your Command‑line‑Tools SDK

Since there's no Android Studio to auto-detect the SDK, create (or edit) android/local.properties inside your project so Gradle knows where to find it:

Windows:

sdk.dir=C:\\android\\sdk

macOS/Linux:

sdk.dir=/Users/yourname/android-sdk

Also double‑check that ANDROID_HOME is exported in your shell (from Section 2B) — Gradle and the React Native CLI both rely on it.

D. Launch an Emulator

  1. List Available AVDs:

    emulator -list-avds

  2. Start an Emulator:

    emulator -avd Your_AVD_Name

    Alternatively, launch it from the AVD Manager extension in VS Code.

E. Run Your App

  1. Start the Metro bundler in one terminal:

    npm start

  2. Build and install the app on the running emulator, in a second terminal:

    npm run android

    This compiles the native Android project via Gradle, installs the debug APK using adb, and launches the app.

  3. See your app running!

    • Open App.tsx in VS Code and edit some text.
    • Press R twice on the emulator (or Ctrl+M/Cmd+M to open the Dev Menu and choose Reload) to see your changes live.

6. Frequently Asked Questions (FAQs) ❓

Q: Do I need Android Studio? A: No. This guide uses only command‑line tools and the AVD Manager extension in VS Code. The React Native CLI generates a complete, Gradle‑wrapped Android project on its own.

Q: What if I encounter errors with the SDK tools? A: Ensure your environment variables (ANDROID_HOME and the PATH entries) are set correctly, and that android/local.properties points at your SDK folder. Run sdkmanager --licenses and accept all licenses.

Q: How do I update the SDK packages? A: Use:

sdkmanager --update

Q: Which JDK version should I use? A: React Native currently recommends JDK 17. Newer JDK versions can cause Gradle build errors; if you must use one, you may need to bump the Gradle distribution version in android/gradle/wrapper/gradle-wrapper.properties.

Q: Can I use TypeScript? A: Yes — the default React Native CLI template is TypeScript-based (App.tsx) out of the box.

Q: Do I still need Kotlin or Java at all? A: Only if you write custom native modules or modify native Android code directly. Everyday app development happens in JavaScript/TypeScript with React components.

7. Final Thoughts 🎉

Congratulations! You now have a fully configured Android app development environment that uses only:

  • VS Code as your editor,
  • Command‑line tools for managing the Android SDK,
  • The AVD Manager extension to create and launch emulators, and
  • React Native (with the Community CLI) for cross‑platform app development.

This setup is ideal if you're looking for a lightweight, resource‑efficient way to start React Native development without relying on Android Studio. Enjoy building your next app entirely from the command line and VS Code!

If you have any questions or run into issues, check the official React Native environment setup docs or search for similar topics in online forums. Happy coding! 🚀

#android#react native#javascript#vs code#Android SDK Command‑line Tools#AVD Manager
Previous Entry
Ollama Chat-UI
Next Entry
Nurtaura