Convert your existing Reactjs app to android or iOS app using Capacitor

So what exactly is Capacitor? According to documentation

Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web. We call these apps “Native Progressive Web Apps” and they represent the next evolution beyond Hybrid apps.

So today we will build our android or ios app using the existing react app.

Requirments

• Existing App
  
• 
  
• Studio
  
• 
• First, go to the root of your existing react app and create a file capacitor.config.json and inside that put the below code.

{
  "appId": "io.ionic.nameofyourapp",
  "appName": "nameofyourapp",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "build",
  "cordova": {}
}

2. Now create another file name ionic.config.json and inside that insert the below code.

{
  "name": "nameofyourapp",
  "integrations": {
    "capacitor": {}
  },
  "type": "react"
}

Note: replace nameofyourapp in both files with the name of your app.

3. Now we need to build our react project. To build your react app open your terminal to the root of the project and run the below-mentioned command

npm run build

Note: this will create the build folder in your root porject and the name of the folder should match the webDir name inside capacitor.config.json file

4. Now we will install ionic globally in our machine. To install ionic globally in your machine open your terminal and run the below command.

npm install -g @ionic/cli

5. Now install the capacitor core in our project.

npm install @capacitor/core --save

6. After that, we will first create an android app with our existing react app. Open your terminal and type

ionic capacitor add android

7. Now run the below command to open your android project in android studio.

npx cap open android

Wait some time and then it will ask you to update the Gradle. Just update the Gradle to the latest version and run the project in the emulator. You can also connect your mobile to run the project live on your mobile phone.

8. Now open the build menu from the android studio and build your apk file.

1. To create ios app run the below command

ionic capacitor add ios

This will install all the required dependencies and ios folder to your project.

2. Now run the below command to open your ios project in Xcode.

npx cap open ios

3. Now open the app in emulator or physical device and build the app. Visit the capacitor homepage for detailed information and documentation. Here is the git repository for reference