Photo capture

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

export default function CameraScreen() {
  const [permission, requestPermission] = useCameraPermissions();
  const [photo, setPhoto] = useState<string | null>(null);
  const ref = useRef<CameraView>(null);

  if (!permission) return <View />;
  if (!permission.granted) return <Pressable onPress={requestPermission}><Text>Grant camera</Text></Pressable>;

  const takePhoto = async () => {
    const result = await ref.current?.takePictureAsync({ quality: 0.8 });
    if (result?.uri) setPhoto(result.uri);
  };

  return (
    <CameraView ref={ref} style={{ flex: 1 }} facing="back">
      <Pressable onPress={takePhoto} style={styles.shutterButton} />
    </CameraView>
  );
}

Barcode / QR scanning

const handleBarcodeScanned = ({ data }: { data: string }) => {
  if (!/^[A-Za-z0-9._~-]{1,256}$/.test(data)) {
    showInvalidCodeMessage();
    return;
  }

  router.push({ pathname: '/scanned/[data]', params: { data } });
};

<CameraView
  barcodeScannerSettings={{ barcodeTypes: ['qr', 'ean13', 'code128'] }}
  onBarcodeScanned={handleBarcodeScanned}
  style={{ flex: 1 }}
/>

Permission pre-prompt

Always pre-prompt with custom UI explaining WHY before triggering system dialog. iOS only gives ONE shot — denied = locked out unless user opens Settings manually.

Treat barcode data as untrusted input. Validate its expected format and pass it as a structured route parameter; do not concatenate it into a navigation URL or use it to open arbitrary links.

Reference

references/01-expo-sdk-54.md

add-expo-camera

Add Expo Camera

Install

app.json