Configuración de Cámara en Expo

Paso 2 de 11

Para leer códigos en Expo, utilizaremos la librería oficial expo-camera , que nos da acceso al hardware de la cámara y a las capacidades de reconocimiento de patrones.

1 Instalación

Ejecuta el siguiente comando en tu terminal para instalar el core de visión:

# terminal
npx expo install expo-camera

2 Configuración en app.json

Es crítico declarar los permisos necesarios para que tanto iOS como Android permitan el acceso al hardware.

app.json

{
  "expo": {
    "plugins": [
      [
        "expo-camera",
        {
          "recordAudioPermission": false,
          "cameraPermission": "Permite que la app use la cámara para escanear códigos."
        }
      ]
    ]
  }
}

3 Manejo de Permisos

No asumas que el usuario siempre dará permiso. Debes manejar los estados de carga y denegación con elegancia.

// src/app/(checkout)/scanner.tsx
import { Camera, CameraView, useCameraPermissions } from 'expo-camera';
import { Button, Text, View } from 'react-native';

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

  if (!permission) {
    // Los permisos siguen cargando
    return <View />;
  }

  if (!permission.granted) {
    // Los permisos no han sido otorgados
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ textAlign: 'center' }}>Necesitamos acceso a tu cámara</Text>
        <Button onPress={requestPermission} title="Dar permiso" />
      </View>
    );
  }

  return (
    <View style={{ flex: 1 }}>
       <CameraView style={{ flex: 1 }} />
    </View>
  );
}

Standalone Apps

Los cambios en app.json relacionados con permisos requieren un nuevo Development Build mediante EAS para surtir efecto en dispositivos físicos fuera de Expo Go.