Ionic take photo with React and Capacitor

I am trying to implement an application that takes a photo by pressing a button.

When pressing the button the image should be shown in an IonImg tag

But when I press Tomar Foto I get:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

Could you please help me with this

usePhotoGalery.tsx

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

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

  
export 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 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);

    const [photos, setPhotos] = useState<Photo[]>([]);

    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>

  <IonRow>
      {photos.map((photo, index) => (
        <IonCol size="6" key={index}>
          <IonImg src={photo.webviewPath} />
        </IonCol>
      ))}
    </IonRow>
          <IonButton onClick={Tab2}>Tomar Foto</IonButton>

        </div>
      );
    }

×

1 post - 1 participant

Read full topic