Feature: Camera Integration

Relevant source files

The following files were used as context for generating this wiki page:

• app/camera-modal.tsx
• app/(tabs)/analyze.tsx
• package.json
• lib/translations.ts
• todo.md
• design.md

The Camera Integration feature allows users to capture images of physical documents directly within the application. This functionality is a key part of the Document Analysis workflow, providing a method to digitize paper documents for subsequent AI analysis. The feature is encapsulated in a dedicated modal screen that handles camera permissions, displays a live camera feed, and processes the photo capture.

The implementation relies on the expo-camera package and is integrated into the AnalyzeScreen. Once a photo is taken, its URI is passed back to the analysis screen, preparing it for the next steps in the analysis pipeline. The project's planning documents confirm that "camera capture for physical documents" is a planned feature.

Sources: app/camera-modal.tsx, app/(tabs)/analyze.tsx, todo.md:19, design.md:33

Core Components & Dependencies

The camera functionality is built upon several key components and a primary external dependency.

Sources: package.json, app/(tabs)/analyze.tsx, app/camera-modal.tsx

Dependency

The core of the camera feature is provided by the expo-camera library. This package is listed as a dependency in the project's configuration.

Dependency	Version	Description
expo-camera	^17.0.10	Provides components and hooks for accessing the device camera.

Sources: package.json:34

UI Components

Component	File Path	Description
AnalyzeScreen	app/(tabs)/analyze.tsx	The entry point for the camera flow. Contains a "Take Photo" button that navigates to the camera modal.
CameraModal	app/camera-modal.tsx	A full-screen modal that manages camera permissions, displays the CameraView, and handles photo capture.
CameraView	(from expo-camera)	The component that renders the live camera preview.

Sources: app/(tabs)/analyze.tsx:143, app/camera-modal.tsx:10

User Flow and Logic

The process of capturing a photo involves navigation between screens, handling device permissions, and transferring the captured image data.

Navigation and Data Flow

The user initiates the camera flow from the AnalyzeScreen. After a photo is successfully taken in the CameraModal, the user is navigated back to the AnalyzeScreen, and the URI of the captured photo is passed as a navigation parameter.

This diagram illustrates the navigation and data transfer between the screens.

Permission Handling

Before the camera can be used, the application must request and be granted permission from the user. The useCameraPermissions hook from expo-camera is used to manage this process.

The sequence diagram below shows the permission request flow.

Photo Capture

The handleTakePhoto function in CameraModal is responsible for capturing the image. It is an asynchronous function that calls takePictureAsync on the CameraView reference.

Key parameters for takePictureAsync are:

• quality: Set to 0.8 to balance file size and image quality.
• base64: Set to false as only the image URI is needed for the next step.

// File: app/camera-modal.tsx:65-83

const handleTakePhoto = async () => {
  if (cameraRef.current && !isTakingPhoto) {
    setIsTakingPhoto(true);
    try {
      const photo = await cameraRef.current.takePictureAsync({
        quality: 0.8,
        base64: false,
      });

      if (photo) {
        // Pass the photo URI back to the analyze screen
        router.push({
          pathname: "/analyze",
          params: {
            photoUri: photo.uri,
            fromCamera: "true",
          },
        });
      }
    } catch (error) {
      console.error("Error taking photo:", error);
    } finally {
      setIsTakingPhoto(false);
    }
  }
};

Sources: app/camera-modal.tsx:65-83

Internationalization (i18n)

All user-facing text in the camera feature is managed through the application's translation system, supporting English (EN), Spanish (ES), and German (DE).

Key	English (EN)	Spanish (ES)	German (DE)
takePhoto	Take Photo	Tomar Foto	Foto Machen
capturePhysical	Capture a photo of a physical document	Captura una foto de un documento físico	Mache ein Foto eines physischen Dokuments
cameraPermissionNeeded	Camera Permission Required	Permiso de cámara requerido	Kameraberechtigung erforderlich
grantPermission	Grant Permission	Otorgar permiso	Berechtigung erteilen
cameraAccessDenied	Camera access denied	Acceso a la cámara denegado	Kamerazugriff verweigert
cancel	Cancel	Cancelar	Abbrechen

Sources: lib/translations.ts:60, lib/translations.ts:68-72, lib/translations.ts:153, lib/translations.ts:161-165, lib/translations.ts:246, lib/translations.ts:254-258

Conclusion

The Camera Integration feature provides a streamlined method for users to digitize physical documents for analysis. It is implemented as a self-contained modal (CameraModal) that is launched from the AnalyzeScreen. The feature correctly handles device permissions and uses expo-router to pass the captured image data back to the originating screen. By leveraging the expo-camera library and integrating with the app's existing i18n and navigation systems, it offers a robust and user-friendly experience.

Sources: app/camera-modal.tsx, app/(tabs)/analyze.tsx