Getting Started with Mobile Development with Ionic and React
Tags: react, android, javascript, codenewbie
Published: 2020-10-13 20:09:07

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


If we know how to create React web apps but want to develop mobile apps, we can use the Ionic framework.

In this article, we’ll look at how to get started with mobile development with the Ionic framework with React.

### Getting Started

We can get started by installing a few things.

First, we install the Ionic CLI globally by running:

```
npm install -g @ionic/cli native-run cordova-res
```

Next, we can create our Ionic app project by running:

```
ionic start ionic-app tabs --type=react --capacitor
```

`tabs` adds tabs to the app.

`type` set to `react` means we’ll create a React project

`--capacitor` means we add Capacitor so we can run and build a native app from our project files.

Then we run:

```
npm install @ionic/react-hooks @ionic/pwa-elements
```

in the `ionic-app` project folder to install the React hooks for our project.

Then to run the app in the browser, we run:

```
ionic serve
```

### Running the App with Genymotion

To run our app with Genymotion and built a native app, we need to do more things.

First, we run:

```
ionic build
```

to create the assets folder.

Then we run:

```
npx cap add android
npx cap sync
```

to add the Android dependencies.

Then we need to install Android Studio and Genymotion.

After we install Android Studio, we install the Genymotion plugin for Android Studio.

Once we did that, we run:

```
ionic capacitor run android --livereload --external --address=0.0.0.0
```

to preview our app in Genymotion.

Now we should see the app reload live.

### Creating a Camera App

We can create a camera app easily with Ionic.

To do this, we go to `Tab1.tsx` and write:

`pages/Tab1.tsx`

```jsx
import React, { useEffect, useState } from 'react';
import { IonButton, IonCol, IonContent, IonGrid, IonHeader, IonImg, IonPage, IonRow, IonTitle, IonToolbar } from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab1.css';
import { useCamera } from '@ionic/react-hooks/camera';
import { CameraResultType, CameraSource } from "@capacitor/core";

interface Photo {
  filepath: string;
  webviewPath?: string;
}

function usePhotoGallery() {
  const { getPhoto } = useCamera();
  const [photos, setPhotos] = useState<Photo[]>([]);

  const takePhoto = async () => {
    const cameraPhoto = await getPhoto({
      resultType: CameraResultType.Uri,
      source: CameraSource.Camera,
      quality: 100
    });

  const fileName = new Date().getTime() + '.jpeg';
    const newPhotos = [{
      filepath: fileName,
      webviewPath: cameraPhoto.webPath
    }, ...photos];
    setPhotos(newPhotos)
  };

  return {
    photos,
    takePhoto
  };
}

const Tab1: React.FC = () => {
  const { photos, takePhoto } = usePhotoGallery();

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 1</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonGrid>
          <IonRow>
            <IonButton onClick={takePhoto}>take photo</IonButton>
          </IonRow>
          <IonRow>
            {photos.map((photo, index) => (
              <IonCol size="6" key={index}>
                <IonImg src={photo.webviewPath} />
              </IonCol>
            ))}
          </IonRow>
        </IonGrid>
      </IonContent>
    </IonPage>
  );
};

export default Tab1;
```

This is the code for the whole camera app.

We created the `usePhotoGallery` hook that uses the `useCamera` hook to call the `getPhoto` function to create the `cameraPhoto` object.

With it, the camera will show.

Then we add the `newPhotos` array to get the photo and put it in the `photos` array.

The `webviewPath` has the path of the photo.

In the `Tab1` component, we added an `IonButton` to show the take photo button.

We set the `onClick` prop to the `takePhoto` function to show the camera and take the photo.

Then once we’re done taking the photo, we get the photos from the `photos` array and display them.

### Conclusion

We can create a simple app with Ionic easily.