Take photos with Ionic React - Capacitor

Ionic Framework Ionic React
1

Dear.

I am dabbling in cross-platform development with Ionic React and Capacitor. What I am seeing is how to take and capture images with the device’s camera and save them in the gallery, for this purpose, I follow the following tutorial.

1- I created a new file: src/components/usePhotoGallery.tsx

2- In the file usePhotoGallery.tsx:

import { useState, useEffect } from "react";
import { useCamera } from '@ionic/react-hooks/camera';
import { useFilesystem, base64FromPath } from '@ionic/react-hooks/filesystem';
import { useStorage } from '@ionic/react-hooks/storage';
import { isPlatform } from '@ionic/react';
import { CameraResultType, CameraSource, CameraPhoto, Capacitor, FilesystemDirectory } from "@capacitor/core";


export function usePhotoGallery() {

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

This are the error that VSC show me:

Cannot find module '@ionic/react-hooks/camera' or its corresponding type declarations.ts(2307)

and

All imports in import declaration are unused.ts(6192)

Cannot find module ‘@ionic/react-hooks/filesystem’ or its corresponding type declarations.ts(2307)

and this laste one

‘useStorage’ is declared but its value is never read.ts(6133)

Cannot find module ‘@ionic/react-hooks/storage’ or its corresponding type declarations.ts(2307)

How can I fix it? Could you please help me?

2

Did you install Ionic React Hooks as mentioned in step one?

npm install @ionic/react-hooks @ionic/pwa-elements
1 Like
3

Hello and thanks for the reply.

When I press the IonButton with the function onClick = {Tab2} I get an error. What does the Tab2 function do? what returns? Where can I use it?

import { isPlatform } from '@ionic/react';
import { CameraResultType, CameraSource, CameraPhoto, Capacitor, FilesystemDirectory } from "@capacitor/core";
import { usePhotoGallery } from '../components/ usePhotoGallery';

  const CompletarInformacion: React.FC = () => {
    return (
      <IonPage>
        <IonHeader>
          <IonToolbar>
            <IonGrid>
              <IonRow>
                <IonCol size="1"><a href={"/home"}><IonIcon icon={arrowBack} id="flecha-volver">  </IonIcon></a></IonCol>
                <IonCol id="columna2"><strong id="texto-pagina">Registro</strong></IonCol>
              </IonRow>
            </IonGrid>
          </IonToolbar>
        </IonHeader>
        <IonContent fullscreen>
          <CompletarRegistro></CompletarRegistro>
        </IonContent>
      </IonPage>
    );
  };

  const CompletarInformacion: React.FC = () => {
    return (
      <IonPage>
        <IonHeader>
          <IonToolbar>
            <IonGrid>
              <IonRow>
                <IonCol size="1"><a href={"/home"}><IonIcon icon={arrowBack} id="flecha-volver">  </IonIcon></a></IonCol>
                <IonCol id="columna2"><strong id="texto-pagina">Registro</strong></IonCol>
              </IonRow>
            </IonGrid>
          </IonToolbar>
        </IonHeader>
        <IonContent fullscreen>
          <CompletarRegistro></CompletarRegistro>
        </IonContent>
      </IonPage>
    );
  };



  const CompletarRegistro = () => {

    const [tipo, setCount] = useState(0);

    function Tab2() {
      const { takePhoto } = usePhotoGallery();
    }

    if (tipo == 0) {
      return (
        <div className="contenedor_central">
          <strong>Completá tus datos</strong>

          <IonItem>
            <IonLabel position="floating">Nombre</IonLabel>
            <IonInput></IonInput>
          </IonItem>
          <IonItem>
            <IonLabel position="floating">Apellido</IonLabel>
            <IonInput></IonInput>
          </IonItem>
          <IonItem>
            <IonLabel position="floating">Clave</IonLabel>
            <IonInput></IonInput>
          </IonItem>

          <IonButton onClick={Tab2}>Tomar Foto</IonButton>

        </div>

      );
    }
}