Running a React App as an Android App with Capacitor & Android Studio

 

Recently, I tried running a React project as a mobile app using Capacitor. At first, I struggled with Gradle and Android Studio version issues, but after getting it to work, I decided to document the steps for anyone facing the same problem.

---

1. Create a React Project

npx create-react-app projectName
cd projectName

Create a basic React app as your project foundation.

---

2. Install and Initialize Capacitor

npm install @capacitor/core @capacitor/cli
npx cap init project_name com.example.projectName

• projectName → App name
• com.example.projectName → Package ID (can be customized)

---

3. Add the Android Platform

npx cap add android

This command generates the android/ folder for your native project.

---

4. Build React and Sync with Capacitor

npm run build
npx cap copy android
npx cap sync android

Build the React app and sync it with the Android project using Capacitor.

---

5. Open the Project in Android Studio

npx cap open android

Once Android Studio opens, connect a real device or start an emulator. Click the ▶️ Run button to launch the app.

---

🚩 Troubleshooting Tips

• Gradle Sync Fail → Update Android Studio to the latest stable version (recommended: Koala 2024.1.2)
• capacitor.settings.gradle not found → Run npx cap sync android again
• Changes not reflecting → Run npm run build & npx cap copy android

---

Summary

Using React with Capacitor allows you to reuse your React web code and run it as a mobile app on Android. Later, you can add native features such as push notifications or location services through Capacitor plugins.