Overview

In this tutorial we will cover how to make a mobile app using React Native. React Native is a cross-platform framework that uses JavaScript, so you can have your app on iOS and Android with one codebase. In subsequent tutorials we will go through hosting on Google Play and App Store, styling and features, however each mobile app no matter how big or small begins this way when using React Native. Lets get started.

1. System Requirements

1.1 Core Versions

1.2 Android Config

2. Installations

2.1 Install Node.js

Download and install Node.js (LTS) from: https://nodejs.org

This will also install npm automatically. After installation, verify with:

node -v
npm -v

2.2 Install Java Development Kit (JDK)

Download Java 17 (LTS) from: https://adoptium.net

Once installed, verify:

java -version

If it says something like openjdk 17.0.14, you’re good.

2.3 Install Android Studio

Download from: https://developer.android.com/studio

During installation, make sure you tick these boxes:

• Android SDK
• Android SDK Platform
• Android Virtual Device
• Android SDK Command-line Tools

Once installed:

Open Android Studio

Go to More Actions → SDK Manager

Under SDK Platforms, select:

• Android 14 (UpsideDownCake) API 35

Under SDK Tools, ensure these are checked:

• Android SDK Build-Tools 35.0.0
• NDK (Side by side)
• Android SDK Command-line Tools (latest)
• Android Emulator

Then click Apply → OK to download everything.

2.4 Set Up Environment Variables

Press Start, search for “Edit the system environment variables”, and open it.

Click Environment Variables and add these under User Variables:

Then in path add these new entries:

• %ANDROID_HOME%\platform-tools
• %ANDROID_HOME%\emulator
• %ANDROID_HOME%\cmdline-tools\latest\bin

Verify Android SDK tools:

adb --version

If it works, your paths are correct.

3. Create a New React Native App

Open PowerShell or Command Prompt in your project folder.

3.1 Create project

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

To create a specific version:

npx @react-native-community/cli init AppName --version 0.79.2

4. Configure Android Project Versions

Open the folder in VS Code or Android Studio.

4.1 Edit Gradle settings

Open: android/build.gradle

Change the ext block to:

ext {
    buildToolsVersion = "35.0.0"
    minSdkVersion = 24
    compileSdkVersion = 35
    targetSdkVersion = 35
    ndkVersion = "27.1.12297006"
    kotlinVersion = "2.0.21"
}

4.2 Update Gradle wrapper

Open: android/gradle/wrapper/gradle-wrapper.properties

Replace:

distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-bin.zip

5. Running the App

Option 1: Physical Android Device

Enable Developer Options on your phone:

Go to Settings → About phone → Tap Build number 7 times

Enable USB Debugging (in Developer Options).

Plug in your phone via USB.

Check connection:

adb devices

If you see something like:

List of devices attached
R3CXB0Q79FA    device

you’re ready.

Run the app with:

npm run android

Option 2: Android Emulator

Open Android Studio → More Actions → Virtual Device Manager

Create a device (e.g. Pixel 7, API 35)

Start the emulator

In your terminal, run:

npm run android

6. Common Issues & Fixes

6.1 “Unable to load script from metro server” error

Fix:

adb reverse tcp:8081 tcp:8081

6.2 Max Path Length on Windows

Windows has a 260-character path limit. Move your project to a shallower path like:

C:/Projects/MyApp

6.3 Gradle Dependency Conflicts

Clean and rebuild:

rm -rf node_modules
rm package-lock.json
npm install
cd android && ./gradlew clean && cd ..
npm start --reset-cache
npm run android