From React to Android: My Experience with Capacitor

Anjali Rajwar

3 min read

·

Oct 21, 2026

--

Listen

Share

I wanted to run my existing React application as an Android app without rewriting everything from scratch, so I decided to explore Capacitor.

Press enter or click to view image in full size

The setup was straightforward initially, but getting everything to work on Android required some extra effort, especially with live reload, API connectivity, and native configuration.

Here are the steps I followed and the issues I learned to troubleshoot.

1. Setting Up Capacitor

I started by installing Capacitor in my existing React project.

npm install @capacitor/core
npm install -D @capacitor/cli
npx cap init

I configured the application name, application ID, and web directory. Since my project uses Vite, the build directory is dist.

2. Adding Android Support

Next, I installed the Android platform and created the native project.

npm install @capacitor/android
npx cap add android
npm run build
npx cap sync android

This generated the Android project and synchronized my React application with it.

3. Running the App on Android

Initially, I used the usual Capacitor workflow:

npx cap open android

From Android Studio, I could launch the application on an emulator or a connected phone.

However, I faced some issues with the emulator and wanted a quicker way to test the app on my actual device.

I explored connecting my phone directly instead of relying on the emulator. Here is the guide I wrote about that setup: How to Run Your Mobile App on a Real Android Phone.

4. Setting Up Live Reload

Rebuilding the app after every small UI change was slowing down development, so I worked on configuring live reload.

The basic process is:

1. Start the Vite development server with network access.
2. Configure Capacitor to load the development server URL.
3. Make sure the Android device can reach the server.
4. Launch the app using the development configuration.

One issue I encountered was the difference between localhost on my computer and localhost inside the Android environment. The device needs a reachable address for the development server and backend.

Once this is configured correctly, frontend changes can be tested much faster without rebuilding the app for every UI update.

5. Integrating Native Features

I also explored Capacitor plugins for native functionality.

Some of the features I worked with included:

• Splash Screen — controlling the app’s startup experience.
• Status Bar — adjusting its appearance.
• Mobile layouts — handling safe areas and screen dimensions.

These features require testing on the actual device because the behavior can differ from the browser.

6. Troubleshooting Android Issues

A few issues required additional investigation.

API requests failing: I checked the API base URL, network accessibility, and Android-specific networking restrictions.

White screen on startup: I investigated JavaScript errors, asset loading, and the development server configuration.

Live reload not working: I checked the server port, device connectivity, and the URL configured in Capacitor.

These issues taught me to inspect logs and verify the environment before changing multiple configurations at once.

7. Preparing the Production Build

Once the development setup was working, the next step was preparing the production application.

npm run build
npx cap sync android

Before generating a release, I made sure the app used its production assets instead of the development server URL.

The Android project can then be used to generate a signed APK for direct installation or an Android App Bundle for distribution through Google Play.

What I Learned

Working with Capacitor helped me understand how a React application interacts with the Android environment.

The main things I learned were:

• Native configuration matters as much as frontend code.
• Live reload makes UI development faster when configured correctly.
• API URLs need to account for the device’s network environment.
• Testing on a physical phone helps identify issues that may not appear in the browser.

The most useful part of this experience was learning how to troubleshoot the complete setup instead of looking at everything as a React problem.

Resources: Capacitor Documentation · Android Developer Guide