Acceso a cámara en React Native con expo-camera

Cámara en React Native

El acceso a cámara abre un mundo de posibilidades: escaneo de QR, fotos de perfil, verificación de identidad, AR, y más. Deepyze usa expo-camera en proyectos que requieren funcionalidades de cámara.

Instalación

npx expo install expo-camera

Configurar permisos

// app.json
{
  "expo": {
    "plugins": [
      ["expo-camera", {
        "cameraPermission": "La app necesita la cámara para escanear códigos QR."
      }]
    ]
  }
}

Componente básico de cámara

import { CameraView, useCameraPermissions } from 'expo-camera';
import { useState } from 'react';

export function CamaraBasica() {
  const [permission, requestPermission] = useCameraPermissions();

  if (!permission?.granted) {
    return (
      <View>
        <Text>Necesitamos permiso para acceder a la cámara</Text>
        <Button title="Permitir" onPress={requestPermission} />
      </View>
    );
  }

  return (
    <CameraView style={{ flex: 1 }} facing="back">
      {/* overlays, botones, etc */}
    </CameraView>
  );
}

Escaneo de QR

<CameraView
  style={{ flex: 1 }}
  barcodeScannerSettings={{ barcodeTypes: ['qr'] }}
  onBarcodeScanned={({ data }) => {
    console.log('QR escaneado:', data);
  }}
/>

Sacar una foto

const cameraRef = useRef(null);

const tomarFoto = async () => {
  const foto = await cameraRef.current.takePictureAsync({
    quality: 0.8,
    base64: false,
  });
  console.log('Foto URI:', foto.uri);
};

¿Necesitás funcionalidades de cámara en tu app? Deepyze puede implementarlas para vos.