Getting Started with Mobile Development with Ionic and React

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

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.