The camera overlaps the entire screen on some mobile devices

[fatimafpitx]

Describe the bug When using CameraPreview, on certain mobile devices (Samsumg Galaxy A53 5G, Con Android 14, One Plus nord, Android 14), the component, despite being configured to occupy only half the screen, overlaps and covers the entire screen. The buttons underneath still function—pressing them either takes a photo or closes the camera—but they are not visible.

It is worth noting that the camera displays correctly on the web, but when generating an APK, its appearance changes depending on the mobile model.

Additionally, it doesn't seem to respond to the CSS styles applied to the div containing the camera, and also is important to notice that CameraPreview runs inside a Modal.

To Reproduce Steps to reproduce the behavior: On the previously mentioned models where this error occurs, the camera is executed using the CameraPreview.start method with the configuration shown in the screenshot. You'll notice that the screen overlaps the rest of the elements in the Modal.

Expected behavior The camera should occupy the full width of the screen and half of its height, without overlapping the buttons.

Screenshots Configuration:

How it displays on the devices where it fails:

How it displays on the devices where it works:

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome
• Version Windows 11 Version 24H2

Smartphone (please complete the following information):

• Device: Samsung Galaxy A53 5G
• OS: Android 14
• OS Customization Layer: One UI 6.1

Additional context

I’m attaching the code where the CameraPreview is executed:

import React, { useEffect, FC, useState } from "react"; import Button from "@amiga-fwk-web/components-action/button"; import Modal from "@amiga-fwk-web/components-surfaces/modal"; import useIntl from "@amiga-fwk-web/components-intl/use-intl"; import { useNotifications } from "@amiga-fwk-web/components-feedback/notifications-provider"; import Loader from "@amiga-fwk-web/components-feedback/loader"; import { formatDateYYYYMMDDHHMMSS } from "@/shared/utils/Utils"; import { CameraPreview } from "@capacitor-community/camera-preview"; import { CustomImg, FormNewCommentOtdetailValues, initialFormNewCommentOtdetailValues, } from "@/shared/models/Interfaces"; import { useNetwork } from "../network-provider/network-provider"; import "./modal-camera.css";

interface ModalCameraProps { isOpen: boolean; onCloseModal: () => void; onTakePicture: (image: CustomImg) => void; // Callback para enviar la imagen }

export const ModalCamera: FC<ModalCameraProps> = ({ isOpen, onCloseModal, onTakePicture }) => { const intl = useIntl(); const notifications = useNotifications(); const [formValues] = useState<FormNewCommentOtdetailValues>(initialFormNewCommentOtdetailValues); const { networkConnected } = useNetwork(); const [loadingCamera, setLoadingCamera] = useState(false); const [isCameraActive, setIsCameraActive] = useState(false);

useEffect(() => { const startCamera = async () => { if (!isCameraActive) { setLoadingCamera(true); await CameraPreview.start({ parent: "cameraPreview", position: "rear", width: window.innerWidth, height: window.innerHeight, paddingBottom: 16, }); setIsCameraActive(true); setLoadingCamera(false); } }; const stopCamera = async () => { if (isCameraActive) { await CameraPreview.stop(); setIsCameraActive(false); setLoadingCamera(false); } };

if (isOpen) {
  localStorage.setItem("hidePin", "true");
  startCamera();
} else {
  stopCamera();
}
return () => {
  stopCamera(); // Asegura que la cámara se detiene al desmontarse el componente
  localStorage.setItem("hidePin", "false");
};

}, [isCameraActive, isOpen, notifications, onCloseModal]);

const takePicture = async () => { if (formValues.imagesUploaded.length >= 4) { notifications.info(intl.formatMessage({ id: "app.otDetail.maxImages" }), { action: { text: "OK", onClick: () => null }, }); return; }

if (!networkConnected()) {
  notifications.info(intl.formatMessage({ id: "app.otDetail.errorNetwork" }), {
    action: { text: "OK", onClick: () => null },
  });
  return;
}

try {
  const image = await CameraPreview.capture({ quality: 50, width: 1000 });
  const base64 = image.value;

  if (base64) {
    const newImg: CustomImg = {
      base64,
      extension: ".jpg",
      customName: formatDateYYYYMMDDHHMMSS(new Date()),
    };
    onTakePicture(newImg);
    onCloseModal();
  }
} catch (error) {
  notifications.info(intl.formatMessage({ id: "app.otDetail.errorCapturingImage" }), {
    action: { text: "OK", onClick: () => null },
  });
}

};

return ( <Modal title="" className="modal-camera" visible={isOpen} hasCloseButton={false} allowFullScreen forceFullScreen fullHeight hideHeader width="fluid" > {loadingCamera && ( <div className="loader-container"> <Loader size="large" /> )}

<div className="button-container"> <Button className="button" data-testid="btn-take-picture" kind="primary" fullWidth label={intl.formatMessage({ id: "app.otDetail.takePicture" })} onClick={takePicture} /> <Button className="button" data-testid="btn-close-camera" kind="primary" fullWidth label={intl.formatMessage({ id: "app.otDetail.closeCamera" })} onClick={() => { onCloseModal(); }} /> </Modal> ); };

export default ModalCamera;

And also the css: .modal-camera { justify-content: flex-start; align-items: center; height: 100%; }

/* #cameraPreview { width: 100%; height: 50vh; } */

.modal-camera .button-container { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; margin-top: 50vh; gap: 16px; }

.modal-camera .loader-container { display: flex; justify-content: center; margin-top: 64px; min-height: 380px; }