expo-camera

npx expo install expo-camera

// app.config.ts
export default {
  plugins: [
    [
      "expo-camera",
      {
        cameraPermission:
          "Permitir que FieldPro fotografíe las etiquetas del equipo para órdenes de trabajo.",
        microphonePermission:
          "Permitir que FieldPro grabe audio con videos de inspección.",
        recordAudioAndroid: true,
        barcodeScannerEnabled: true,
      },
    ],
  ],
};

import { CameraView, useCameraPermissions } from "expo-camera";
import { useCallback, useRef, useState } from "react";
import { Pressable, StyleSheet, Text, View } from "react-native";
 
export function QrScanner({ onScan }: { onScan: (data: string) => void }) {
  const [permission, requestPermission] = useCameraPermissions();
  const [torch, setTorch] = useState(false);
  const last = useRef(0);
 
  const handleBarcode = useCallback(
    ({ data }: { data: string }) => {
      const now = Date.now();
      if (now - last.current < 1200) return;
      last.current = now;
      onScan(data);
    },
    [onScan]
  );
 
  if (!permission?.granted) {
    return (
      <View style={styles.gate}>
        <Text>Escanea las etiquetas de activos para abrir la orden de trabajo correcta.</Text>
        <Pressable onPress={requestPermission}>
          <Text style={styles.link}>Permitir cámara</Text>
        </Pressable>
      </View>
    );
  }
 
  return (
    <View style={styles.root}>
      <CameraView
        style={styles.camera}
        facing="back"
        enableTorch={torch}
        barcodeScannerSettings={{ barcodeTypes: ["qr", "code128"] }}
        onBarcodeScanned={handleBarcode}
      />
      <Pressable style={styles.torch} onPress={() => setTorch((t) => !t)}>
        <Text style={styles.torchText}>{torch ? "Linterna encendida" : "Linterna apagada"}</Text>
      </Pressable>
    </View>
  );
}
 
const styles = StyleSheet.create({
  root: { flex: 1 },
  camera: { flex: 1 },
  gate: { flex: 1, padding: 24, gap: 12, justifyContent: "center" },
  link: { color: "#2563eb" },
  torch: { position: "absolute", top: 56, right: 16, padding: 10, backgroundColor: "rgba(0,0,0,0.5)", borderRadius: 8 },
  torchText: { color: "#fff", fontWeight: "600" },
});

npx expo install expo-camera expo-image-manipulator

// src/scan/InspectionCapture.tsx
import { CameraView, useCameraPermissions } from "expo-camera";
import * as ImageManipulator from "expo-image-manipulator";
import { useIsFocused } from "@react-navigation/native";
import { useCallback, useRef, useState } from "react";
import { Image } from "expo-image";
import { Pressable, StyleSheet, Text, View } from "react-native";
 
type Props = {
  onScan: (payload: string) => void;
  onPhoto: (uri: string) => void;
};
 
export function InspectionCapture({ onScan, onPhoto }: Props) {
  const isFocused = useIsFocused();
  const cameraRef = useRef<CameraView>(null);
  const [permission, requestPermission] = useCameraPermissions();
  const [ready, setReady] = useState(false);
  const [torch, setTorch] = useState(false);
  const [preview, setPreview] = useState<string | null>(null);
  const lastScan = useRef(0);
 
  const onBarcodeScanned = useCallback(
    ({ data }: { data: string }) => {
      if (!isFocused) return;
      const now = Date.now();
      if (now - lastScan.current < 1500) return;
      lastScan.current = now;
      onScan(data);
    },
    [isFocused, onScan]
  );
 
  async function captureLabel() {
    if (!ready) return;
    const photo = await cameraRef.current?.takePictureAsync({ quality: 0.8 });
    if (!photo?.uri) return;
    const resized = await ImageManipulator.manipulateAsync(
      photo.uri,
      [{ resize: { width: 1600 } }],
      { compress: 0.75, format: ImageManipulator.SaveFormat.JPEG }
    );
    setPreview(resized.uri);
    onPhoto(resized.uri);
  }
 
  if (!permission?.granted) {
    return (
      <View style={styles.gate}>
        <Text>Fotografía las placas de serie y escanea los códigos QR en el equipo.</Text>
        <Pressable onPress={requestPermission}>
          <Text style={styles.link}>Continuar</Text>
        </Pressable>
      </View>
    );
  }
 
  if (preview) {
    return (
      <View style={styles.preview}>
        <Image source={{ uri: preview }} contentFit="contain" style={styles.previewImage} />
        <Pressable onPress={() => setPreview(null)}>
          <Text>Reintentar</Text>
        </Pressable>
      </View>
    );
  }
 
  if (!isFocused) {
    return <View style={styles.placeholder} />;
  }
 
  return (
    <View style={styles.root}>
      <CameraView
        ref={cameraRef}
        style={styles.camera}
        facing="back"
        enableTorch={torch}
        onCameraReady={() => setReady(true)}
        barcodeScannerSettings={{ barcodeTypes: ["qr"] }}
        onBarcodeScanned={onBarcodeScanned}
      />
      <View style={styles.toolbar}>
        <Pressable onPress={() => setTorch((t) => !t)}>
          <Text style={styles.tool}>{torch ? "Linterna encendida" : "Linterna"}</Text>
        </Pressable>
        <Pressable onPress={captureLabel} disabled={!ready}>
          <Text style={styles.tool}>Capturar etiqueta</Text>
        </Pressable>
      </View>
    </View>
  );
}
 
const styles = StyleSheet.create({
  root: { flex: 1 },
  camera: { flex: 1 },
  gate: { flex: 1, padding: 24, gap: 12, justifyContent: "center" },
  link: { color: "#2563eb", fontWeight: "600" },
  placeholder: { flex: 1, backgroundColor: "#111" },
  preview: { flex: 1, padding: 16, gap: 12 },
  previewImage: { flex: 1, borderRadius: 8 },
  toolbar: {
    position: "absolute",
    bottom: 40,
    left: 16,
    right: 16,
    flexDirection: "row",
    justifyContent: "space-between",
  },
  tool: { color: "#fff", fontWeight: "600", padding: 12, backgroundColor: "rgba(0,0,0,0.55)", borderRadius: 8 },
});

import { CameraView } from "expo-camera";
 
async function openSystemScanner() {
  await CameraView.launchScanner({ barcodeTypes: ["qr"] });
}

<CameraView enableTorch={torchOn} facing="back" />

Controladores de costo de vista previa:
1. Resolución y relación de aspecto (la propiedad de proporción en Android cambia el tipo de escala)
2. Múltiples instancias de CameraView montadas (prohibidas - solo una sesión activa)
3. Pestañas de fondo aún montadas (usa restricción de enfoque)
4. Escaneo de códigos de barras + animaciones de navegación de 60 fps en Android de gama baja

// Pausa cuando una hoja de fondo cubre la vista previa
useEffect(() => {
  if (!sheetOpen) return;
  cameraRef.current?.pausePreview();
  return () => {
    cameraRef.current?.resumePreview();
  };
}, [sheetOpen]);

const photo = await cameraRef.current?.takePictureAsync({
  quality: 0.8,
  skipProcessing: false,
});
 
const video = await cameraRef.current?.recordAsync({ maxDuration: 60 });