Scanner Component API Reference

Complete API reference for the React Native Scanner component's props, types, and ScanResult object.

Scanner props

Prop	Type	Default	Description
`style`	`ViewStyle`	—	Layout style for the camera preview view
`onCodeScanned`	`(result: ScanResult) => void`	—	Callback fired when a stable code is detected
`autoStart`	`boolean`	`true`	Whether to start the camera when the component mounts
`torch`	`boolean`	`false`	Turn on the flashlight
`enableFreezeFrame`	`boolean`	`false`	Pause camera after scan, play animation, then resume
`boundingBox`	`BoundingBoxConfig`	—	Configuration for drawing boxes around detected codes
`scanRegion`	`ScanRegionConfig`	—	Configuration for restricting scanning to a defined area
`detectionType`	`'barcode' \| 'face'`	`'barcode'`	What to detect. `'face'` enables on-device face detection
`cameraPosition`	`'back' \| 'front'`	`'back'`	Which camera to use. Face mode usually wants `'front'`
`faceDetection`	`FaceDetectionConfig`	—	Face overlay styling when `detectionType="face"`
`onFacesDetected`	`(event: FacesDetectedEvent) => void`	—	Fires every frame with detected faces (face mode only)

Ref methods

Attach a ref to Scanner to call these methods imperatively:

const scannerRef = useRef(null);
<Scanner ref={scannerRef} ... />

Method	Description
`resumeScanning()`	Resume camera and detection after freeze frame or manual pause

ScanResult

interface ScanResult {
  data: string;       // The decoded string value
  type: string;       // Barcode format, e.g. "QR_CODE"
  rawBytes?: string;  // Base64 raw bytes (Android only)
  bounds?: {
    x: number;
    y: number;
    width: number;
    height: number;
  };
}

type values: QR_CODE, EAN_13, EAN_8, UPC_A, UPC_E, CODE_128, CODE_39, CODE_93, CODABAR, DATA_MATRIX, PDF417, AZTEC, ITF

ScanRegionConfig

Field	Type	Default	Description
`enabled`	`boolean`	—	Required. Must be `true` to activate
`width`	`number`	`300`	Region width in dp/points
`height`	`number`	`300`	Region height in dp/points
`offsetX`	`number`	`0`	Horizontal offset from center
`offsetY`	`number`	`0`	Vertical offset from center
`cornerRadius`	`number`	`12`	Corner radius of the cutout
`borderColor`	`string`	`#FFFFFF`	Border color
`borderWidth`	`number`	`3`	Border thickness
`showBorder`	`boolean`	`true`	Draw the border
`dimColor`	`string`	`#000000`	Dim mask color
`dimAlpha`	`number`	`180`	Dim mask opacity (0–255)
`showCorners`	`boolean`	`true`	Show corner bracket decorations
`cornerLength`	`number`	`30`	Corner bracket arm length
`cornerWidth`	`number`	`4`	Corner bracket line width
`showHint`	`boolean`	`true`	Show hint text below the frame
`hintText`	`string`	`"Align code within frame"`	Hint message
`hintTextColor`	`string`	`#FFFFFF`	Hint text color
`hintTextSize`	`number`	`14`	Hint font size

BoundingBoxConfig

Field	Type	Default	Description
`enabled`	`boolean`	`true`	Draw boxes around detections
`borderColor`	`string`	`#FFFFFF`	Box border color
`borderWidth`	`number`	`4`	Border thickness
`borderRadius`	`number`	`12`	Rounded corner radius
`fillColor`	`string`	—	Optional fill color (supports alpha)
`showText`	`boolean`	`true`	Show decoded value as a text label
`textColor`	`string`	`#000000`	Label text color
`textSize`	`number`	`14`	Label font size
`textBackgroundColor`	`string`	`#FFFFFF`	Label background color

FaceDetectionConfig

Used when detectionType="face". See the full Face Detection guide.

Field	Type	Default	Description
`enabled`	`boolean`	`true`	Draw face overlay graphics
`boxColor`	`string`	`#2BE2C2`	Face box border color
`boxWidth`	`number`	`2`	Box border thickness
`boxRadius`	`number`	`12`	Rounded corner radius
`fillColor`	`string`	—	Optional fill inside the box
`showLandmarks`	`boolean`	`true`	Draw landmark dots (eyes, nose, mouth)
`showContours`	`boolean`	`true`	Draw face outline / contour dots
`landmarkColor`	`string`	`#2BE2C2`	Color of landmark and contour dots
`landmarkRadius`	`number`	`3`	Radius of each dot
`performanceMode`	`'fast' \| 'accurate'`	`'fast'`	Speed vs. accuracy (Android ML Kit)

FacesDetectedEvent

interface FacesDetectedEvent {
  faces: FaceResult[];
  count: number;
}

interface FaceResult {
  bounds: { x: number; y: number; width: number; height: number };
  rollAngle?: number;
  yawAngle?: number;
  pitchAngle?: number;  // iOS 15+
  trackingId?: number;
}

Fires every camera frame in face mode. Coordinates are in view space (same as barcode bounds).

Color format

All color strings follow these two formats:

#RRGGBB — fully opaque (e.g. #FF5733)
#RRGGBBAA — with transparency (e.g. #FF573380 = 50% transparent)

The alpha value is the last two characters, not the first.

Platform differences

Feature	iOS	Android
`rawBytes` in ScanResult	Not filled	Base64 string
Default barcode formats	All 13 types	QR code only
Face detection	Vision landmarks	ML Kit face detection
`pitchAngle` in FaceResult	iOS 15+	Always available
`trackingId` in FaceResult	Not provided	When contours disabled
`onError` event	Native only (not in Scanner)	Not in Scanner

Scanner Component API Reference

On this page