@rific/scanner

Full-screen barcode scanner with animated overlays, pinch zoom, timeout ring, and scan tracking for React Native. Uses expo-camera for barcode scanning when installed.

Installation

npm install @rific/scanner react-native-gesture-handler react-native-reanimated react-native-svg expo-camera

Optional (for richer UI):

npm install react-native-paper react-native-safe-area-context

Usage

import { Scanner } from '@rific/scanner'

<Scanner
  accentColor='#6200ee'
  autoScan
  timeout={30}
  onScan={({ data, type }) => console.log(data, type)}
  onClose={() => navigation.goBack()}
  onSound={() => playBoop()}
  onVibrate={() => vibrate()}
  onTimeout={() => navigation.goBack()}
/>

With custom menu

import { Scanner, MenuBag } from '@rific/scanner'

<Scanner
  onScan={handleScan}
  renderMenu={({ facing, setFacing, torch, setTorch }: MenuBag) => (
    <MyMenu
      facing={facing}
      onFacingToggle={() => setFacing(facing === 'back' ? 'front' : 'back')}
      torch={torch}
      onTorchToggle={() => setTorch(!torch)}
    />
  )}
/>

Props

| Prop | Type | Default | Description | |---|---|---|---| | onScan | (result: ScanResult) => void | required | Called with { data, type } for each captured scan | | accentColor | string | '#6200ee' | Color for overlays, timer ring, and buttons | | autoScan | boolean | true | Auto-capture on detect; false = manual press | | backgroundColor | string | 'black' | Camera background color | | barcodeTypes | string[] | all | Barcode types to detect (e.g. ['qr', 'ean13']) | | children | ReactNode | | Rendered over the camera | | disabledScanValues | string[] | | Values to show as already-scanned (checked state) | | disabledScanValueSet | ReadonlySet<string> | | Set version of disabledScanValues (preferred for large lists) | | onClose | () => void | | Shows a close button; called on press | | onDisabledScan | (value: string) => void | | Called when a disabled value is pressed | | onPermissionDenied | () => void | | Called when camera permission is denied | | onSound | () => void | | Called on successful scan — play a sound here | | onTimeout | () => void | | Called when the timeout ring completes | | onVibrate | () => void | | Called on successful scan — trigger haptics here | | renderMenu | (bag: MenuBag) => ReactNode | | Render a custom menu (torch, facing, etc.) | | scanTimeout | number | 0 | Seconds before a scanned value reverts to unscanned; 0 = never | | style | ViewStyle | | Style for the camera view | | timeout | number | 0 | Seconds before onTimeout/onClose fires; 0 = no timeout |

ScanResult

type ScanResult = {
  data: string   // barcode value
  type: string   // barcode format (e.g. 'QR', 'EAN13')
}

MenuBag

type MenuBag = {
  barcodeTypes: string[]
  facing: 'front' | 'back'
  setFacing: (facing: 'front' | 'back') => void
  setTorch: (torch: boolean) => void
  torch: boolean
}

Peer dependencies

Required:

• react >= 17.0.0
• react-native >= 0.70.0
• react-native-gesture-handler >= 2.0.0
• react-native-reanimated >= 3.0.0
• react-native-svg >= 13.0.0

Optional:

• expo-camera >= 15.0.0 — barcode scanning; without it the camera renders as a blank view
• react-native-paper >= 5.0.0 — richer UI (icon buttons, Portal); without it falls back to simple Pressable elements
• react-native-safe-area-context >= 4.0.0 — proper notch/safe area handling; without it falls back to a fixed iOS top padding