Converting a React app to native mobile with Capacitor.js

React is a popular choice for dynamic, responsive web applications. There comes a point where you want to extend that reach to native mobile platforms. Capacitor is the tool that bridges web technologies and native platforms, and this is how to convert a React app to native Android and iOS apps with it.

What Capacitor is

Capacitor is a cross-platform runtime for building applications with familiar web technologies (HTML, CSS and JavaScript) that run natively on iOS, Android and Electron. It provides a consistent API for reaching native functionality across platforms, which is what makes a hybrid app with real native capabilities practical.

Prerequisites

1. Node.js and npm (or yarn)
2. React.js
3. Android Studio, for Android development
4. Xcode, for iOS development
5. Capacitor CLI: npm install -g @capacitor/cli or yarn global add @capacitor/cli

Step 1: create a React app

# Using npm
npx create-react-app react-capacitor-app
cd react-capacitor-app
 
# Using yarn
yarn create react-app react-capacitor-app
cd react-capacitor-app

Step 2: add a simple component

Replace the contents of src/App.js:

import React from 'react'
import './App.css'
 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to React with Capacitor!</h1>
        <p>
          Get started by editing <code>src/App.js</code>
        </p>
        <button onClick={() => alert('Hello, Capacitor!')}>Click Me</button>
      </header>
    </div>
  )
}
 
export default App

Step 3: install Capacitor

# Using npm
npm install @capacitor/core @capacitor/cli
 
# Using yarn
yarn add @capacitor/core @capacitor/cli

Step 4: initialise Capacitor

npx cap init

You'll be asked for the app's name and its ID, e.g. com.myapp.app. This creates capacitor.config.ts in the root:

import type { CapacitorConfig } from '@capacitor/cli';
 
const config: CapacitorConfig = {
  appId: 'com.myapp.app',
  appName: 'myapp',
  webDir: 'build',
};
 
export default config;

• appId: a unique identifier, usually in reverse domain notation. If your domain is app.myapp.com, the appId is com.myapp.app.
• appName: the name of the app as displayed on the device.
• webDir: where the built web assets live. For React that's typically build.

Step 5: add the Android and iOS platforms

# Using npm
npm install @capacitor/android @capacitor/ios
 
# Using yarn
yarn add @capacitor/android @capacitor/ios
 
npx cap add android
npx cap add ios

Step 6: build the React app

# Using npm
npm run build
 
# Using yarn
yarn build

Step 7: sync with Capacitor

npx cap sync

Step 8: open the Android project

npx cap open android

Step 9: run on an emulator or device

In Android Studio, run on an emulator or connect a physical device. From here the standard Android development workflow applies for testing and debugging.

Step 10: open the iOS project

npx cap open ios

Conclusion

That's a React web app extended to both Android and iOS. The appeal of Capacitor is that none of it asked you to learn a second stack. The existing build output is the app, and the native projects are thin shells around it.

Resources

• Capacitor documentation