Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/soymatudev/Pokedex-Fleek/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

The useCamera hook provides a simple interface for managing camera functionality in the PokéDex app. It integrates with react-native-vision-camera to handle camera permissions and device selection, specifically targeting the wide-angle back camera for Pokémon identification.

​
Import

import { useCamera } from '../../hooks/useCamera';

​
Usage

const { startCameraService } = useCamera();

// Initialize camera
const { device, hasPermission } = startCameraService();

if (!hasPermission) {
  return <PermissionError />;
}

if (!device) {
  return <NoCameraError />;
}

return <Camera device={device} />;

​
Return Values

The hook returns an object with the following method:

​
startCameraService()

Initializes and configures the camera service. Returns: Object containing:
  • device - The wide-angle camera device instance
  • hasPermission - Boolean indicating whether camera permissions have been granted

​
Implementation Details

​
Camera Device Selection

The hook uses the wide-angle-camera device type, which typically selects the back camera on mobile devices: 
const device = useCameraDevice("wide-angle-camera");

​
Permission Management

Camera permissions are checked using react-native-vision-camera’s built-in permission hook: 
const { hasPermission } = useCameraPermission();

​
Integration with react-native-vision-camera

This hook wraps the following react-native-vision-camera hooks:
  • useCameraDevice - Selects and manages camera device instances
  • useCameraPermission - Handles camera permission states
For more details on the underlying camera functionality, refer to the react-native-vision-camera documentation.

​
Source Code

~/workspace/source/src/hooks/useCamera.js
import { useCameraDevice, useCameraPermission } from "react-native-vision-camera";

export const useCamera = () => {

    const startCameraService = () => {
        const device = useCameraDevice("wide-angle-camera");
        const { hasPermission } = useCameraPermission();

        return { device, hasPermission };
    };

    return {
        startCameraService
    };
}

​
Best Practices

  • Always check hasPermission before attempting to use the camera
  • Verify that device is not null before rendering camera components
  • Request camera permissions before calling startCameraService()
  • Handle permission denials gracefully with appropriate UI feedback

Build docs developers (and LLMs) love

Get started for freeTalk to us