For this tutorial, we'll be using capacitorjs to convert our react app into Android and iOS build. Let me start by why do we need it?

Why do we need capacitorjs?

CapacitorJS is generally used to convert our existing web apps built with Vue.js or React to mobile apps, this tool has been designed to drop into any existing modern JavaScript web application. If you have this kind of app already or you want to start from scratch to the design a native mobile app on iOS and Android, this framework will help you to use familiar web languages to access native features like the Camera, Location or storage access without dealing with the complexity of the native code.

Steps to create native apps

1. npm install @capacitor/cli @capacitor/core
2. npx cap init
3. npm install @capacitor/ios @capacitor/android
4. npx cap add ios
5. npx cap add android

That's it, you're done creating native apps.

What next?

Environment setup

You'll notice that you have two folders in your project directory named ios and android. These folders contain the native code for the respective platforms. Now you must be wondering how can I run these apps? If you've some exposure to android and iOS development, you might have the environment already setup. If not, it's simple just follow these steps.

Running the apps

• Android: npx cap run android
• iOS: npx cap run ios

Voila you've built the native apps in no time.

Solving issues related to android and iOS app not running

Open the apps in native code editor, it'll fix the build automatically for you. Here's the command for the same, npx cap open android or npx cap open ios.

What else can be done?

You can request for permission without dealing with native code like the example given below for notifications:

import { LocalNotifications } from '@capacitor/local-notifications';

LocalNotifications.schedule({
  notifications: [
    {
      title: "On sale",
      body: "Widgets are 10% off. Act fast!",
      id: 1,
      schedule: { at: new Date(Date.now() + 1000 * 5) },
      sound: null,
      attachments: null,
      actionTypeId: "",
      extra: null
    }
  ]
});

Camera:

import { Camera, CameraResultType } from '@capacitor/camera';

// Take a picture or video, or load from the library
const picture = await Camera.getPicture({
  resultType: CameraResultType.Uri
});

Closing thoughts

Your imagination is the only limit, you can also inject native code using capacitorjs. It's swiss knife for quick builds. At last, I hope this helps someone. Cheers! Feel free to ask any questions.