expo-camera

npx expo install expo-camera

// app.config.ts
export default {
  plugins: [
    [
      "expo-camera",
      {
        cameraPermission:
          "Allow FieldPro to photograph equipment labels for work orders.",
        microphonePermission:
          "Allow FieldPro to record audio with inspection videos.",
        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>Scan asset tags to open the correct work order.</Text>
        <Pressable onPress={requestPermission}>
          <Text style={styles.link}>Allow camera</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 ? "Torch on" : "Torch off"}</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>Photograph serial plates and scan QR codes on equipment.</Text>
        <Pressable onPress={requestPermission}>
          <Text style={styles.link}>Continue</Text>
        </Pressable>
      </View>
    );
  }
 
  if (preview) {
    return (
      <View style={styles.preview}>
        <Image source={{ uri: preview }} contentFit="contain" style={styles.previewImage} />
        <Pressable onPress={() => setPreview(null)}>
          <Text>Retake</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 ? "Torch on" : "Torch"}</Text>
        </Pressable>
        <Pressable onPress={captureLabel} disabled={!ready}>
          <Text style={styles.tool}>Capture label</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" />

Preview cost drivers:
1. Resolution and aspect ratio (ratio prop on Android changes scale type)
2. Multiple mounted CameraView instances (forbidden - only one active session)
3. Background tabs still mounted (use focus gating)
4. Barcode scanning + 60fps navigation animations on low-end Android

// Pause when a bottom sheet covers the preview
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 });