# Covert your React app into native app (Android & iOS)

For this tutorial, we'll be using  [capacitorjs ](https://capacitorjs.com/) 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.

![sample.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636997686947/q8nke2URt.png)

## 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](https://capacitorjs.com/docs/getting-started/environment-setup). 

### 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.