expo-camera & expo-image-picker

npx expo install expo-camera expo-image-picker

// app.config.ts
export default {
  plugins: [
    [
      "expo-camera",
      {
        cameraPermission:
          "Allow InspectPro to photograph equipment for work orders.",
        microphonePermission:
          "Allow InspectPro to record audio with video inspections.",
        recordAudioAndroid: true,
      },
    ],
    [
      "expo-image-picker",
      {
        photosPermission:
          "Allow InspectPro to attach existing photos from your library.",
      },
    ],
  ],
};

import * as ImagePicker from "expo-image-picker";
 
export async function pickImageFromLibrary() {
  const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
  if (status !== "granted") return null;
 
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ["images"],
    allowsEditing: true,
    quality: 0.7,
    exif: false,
  });
 
  if (result.canceled) return null;
  return result.assets[0];
}

npx expo install expo-camera expo-image-picker expo-image-manipulator

// src/media/CaptureSheet.tsx
import { useRef, useState } from "react";
import { Image, Pressable, Text, View } from "react-native";
import { CameraView, useCameraPermissions } from "expo-camera";
import * as ImageManipulator from "expo-image-manipulator";
import * as ImagePicker from "expo-image-picker";
 
async function pickImageFromLibrary() {
  const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
  if (status !== "granted") return null;
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ["images"],
    allowsEditing: true,
    quality: 0.7,
  });
  if (result.canceled) return null;
  return result.assets[0];
}
 
type Props = {
  onCaptured: (uri: string) => void;
};
 
export function CaptureSheet({ onCaptured }: Props) {
  const cameraRef = useRef<CameraView>(null);
  const [permission, requestPermission] = useCameraPermissions();
  const [previewUri, setPreviewUri] = useState<string | null>(null);
 
  if (!permission?.granted) {
    return (
      <View style={{ padding: 24, gap: 12 }}>
        <Text>Photograph equipment labels for audit trails.</Text>
        <Pressable onPress={requestPermission}>
          <Text style={{ color: "#2563eb" }}>Allow camera</Text>
        </Pressable>
        <Pressable
          onPress={async () => {
            const asset = await pickImageFromLibrary();
            if (asset) await setDownscaledPreview(asset.uri);
          }}
        >
          <Text>Choose from library instead</Text>
        </Pressable>
      </View>
    );
  }
 
  async function setDownscaledPreview(uri: string) {
    const manipulated = await ImageManipulator.manipulateAsync(
      uri,
      [{ resize: { width: 1280 } }],
      { compress: 0.75, format: ImageManipulator.SaveFormat.JPEG }
    );
    setPreviewUri(manipulated.uri);
  }
 
  async function takePhoto() {
    const photo = await cameraRef.current?.takePictureAsync({
      quality: 0.8,
      skipProcessing: false,
    });
    if (photo?.uri) await setDownscaledPreview(photo.uri);
  }
 
  return (
    <View style={{ flex: 1 }}>
      {previewUri ? (
        <View style={{ flex: 1, gap: 12, padding: 16 }}>
          <Image
            source={{ uri: previewUri }}
            style={{ flex: 1, borderRadius: 8 }}
            resizeMode="contain"
          />
          <Pressable onPress={() => onCaptured(previewUri)}>
            <Text style={{ fontWeight: "600" }}>Use photo</Text>
          </Pressable>
          <Pressable onPress={() => setPreviewUri(null)}>
            <Text>Retake</Text>
          </Pressable>
        </View>
      ) : (
        <CameraView ref={cameraRef} style={{ flex: 1 }} facing="back">
          <Pressable onPress={takePhoto} style={{ margin: 24, padding: 16 }}>
            <Text style={{ color: "#fff" }}>Capture</Text>
          </Pressable>
        </CameraView>
      )}
    </View>
  );
}

Risky:  store full 4032×3024 URI in React state + render <Image />
Safer:  manipulateAsync → max width 1280, JPEG 0.75
Upload: separate full-res file on disk if backend requires - stream via FileSystem

const video = await cameraRef.current?.recordAsync({
  maxDuration: 60,
});

<CameraView
  barcodeScannerSettings={{ barcodeTypes: ["qr"] }}
  onBarcodeScanned={({ data }) => handleScan(data)}
/>