Guides
Plan-enterprise-icon
Expo Application Services
API Reference

BarCodeScanner

expo-barcode-scanner provides a React component that renders a viewfinder for the device's camera (either front or back) and will scan bar codes that show up in the frame.

Platform Compatibility

Android DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb
Status-success-iconStatus-success-iconStatus-success-iconStatus-success-iconStatus-failed-icon
Info-icon
Note: Only one active BarCodeScanner preview is supported currently. When using navigation, the best practice is to unmount any previously rendered BarCodeScanner component so the following screens can use <BarCodeScanner /> without issues.

Installation

Terminal
→ npx expo install expo-barcode-scanner

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

Configuration

Scanning barcodes with the camera requires the Permission.CAMERA permission. See the usage example below.

Supported formats

Bar code formatiOSAndroid
aztecYesYes
codabarYesYes
code39YesYes
code93YesYes
code128YesYes
code39mod43YesNo
datamatrixYesYes
ean13YesYes
ean8YesYes
interleaved2of5Yesuse itf14
itf14Yes*Yes
maxicodeNoYes
pdf417YesYes
rss14NoYes
rssexpandedNoYes
upc_aNoYes
upc_eYesYes
upc_eanNoYes
qrYesYes
Info-icon
Notes:
  • When an ITF-14 barcode is recognized, it's type can sometimes be set to interleaved2of5.
  • Scanning for either PDF417 and/or Code39 formats can result in a noticeable increase in battery consumption on iOS. It is recommended to provide only the bar code formats you expect to scan to the barCodeTypes prop.

Usage

You must request permission to access the user's camera before attempting to get it. To do this, you will want to use the Permissions API. You can see this in practice in the following example.
Basic BarCodeScanner usage
import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';

export default function App() {
  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);

  useEffect(() => {
    const getBarCodeScannerPermissions = async () => {
      const { status } = await BarCodeScanner.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    };

    getBarCodeScannerPermissions();
  }, []);

  const handleBarCodeScanned = ({ type, data }) => {
    setScanned(true);
    alert(`Bar code with type ${type} and data ${data} has been scanned!`);
  };

  if (hasPermission === null) {
    return <Text>Requesting for camera permission</Text>;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

  return (
    <View style={styles.container}>
      <BarCodeScanner
        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
        style={StyleSheet.absoluteFillObject}
      />
      {scanned && <Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />}
    </View>
  );
}

%%placeholder-start%%const styles = StyleSheet.create({ ... }); %%placeholder-end%%const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
  },
});

API

import { BarCodeScanner } from 'expo-barcode-scanner';

Component

BarCodeScanner

Type: Component<BarCodeScannerProps>

Props

onBarCodeScanned

Optional • Type: BarCodeScannedCallback

A callback that is invoked when a bar code has been successfully scanned. The callback is provided with an BarCodeScannerResult.

Info-icon

Note: Passing undefined to the onBarCodeScanned prop will result in no scanning. This can be used to effectively "pause" the scanner so that it doesn't continually scan even after data has been retrieved.

type

Optional • Type: 'front' | 'back' | number • Default: Type.back

Camera facing. Use one of BarCodeScanner.Constants.Type. Use either Type.front or Type.back. Same as Camera.Constants.Type.

Inherited Props

Hooks

usePermissions(options)

NameTypeDescription
options
(optional)
PermissionHookOptions<object>-

Create a new permission hook with the permission methods built-in. This can be used to quickly create specific permission hooks in every module.

Example

const [permissionResponse, requestPermission] = BarCodeScanner.usePermissions();
  • Undo-icon[null | PermissionResponse, RequestPermissionMethod<PermissionResponse>, GetPermissionMethod<PermissionResponse>]

Methods

BarCodeScanner.getPermissionsAsync()

Checks user's permissions for accessing the camera.

Return a promise that fulfills to an object of type PermissionResponse.

BarCodeScanner.requestPermissionsAsync()

Asks the user to grant permissions for accessing the camera.

On iOS this will require apps to specify the NSCameraUsageDescription entry in the Info.plist.

Return a promise that fulfills to an object of type PermissionResponse.

BarCodeScanner.scanFromURLAsync(url, barCodeTypes)

NameTypeDescription
urlstring

URL to get the image from.

barCodeTypes
(optional)
string[]

An array of bar code types. Defaults to all supported bar code types on the platform.

Info-icon

Note: Only QR codes are supported on iOS.

Scan bar codes from the image given by the URL.

A possibly empty array of objects of the BarCodeScannerResult shape, where the type refers to the bar code type that was scanned and the data is the information encoded in the bar code.

Interfaces

PermissionResponse

An object obtained by permissions get and request functions.

NameTypeDescription
canAskAgainbooleanIndicates if user can be asked again for specific permission. If not, one should be directed to the Settings app in order to enable/disable the permission.
expiresPermissionExpirationDetermines time when the permission expires.
grantedbooleanA convenience boolean that indicates if the permission is granted.
statusPermissionStatusDetermines the status of the permission.

Types

BarCodeBounds

NameTypeDescription
originBarCodePointThe origin point of the bounding box.
sizeBarCodeSizeThe size of the bounding box.

BarCodeEvent

BarCodeScannerResult extended by:

NameTypeDescription
target
(optional)
number-

BarCodeEventCallbackArguments

NameTypeDescription
nativeEventBarCodeEvent-

BarCodePoint

Those coordinates are represented in the coordinate space of the barcode source (e.g. when you are using the barcode scanner view, these values are adjusted to the dimensions of the view).

NameTypeDescription
xnumberThe x coordinate value.
ynumberThe y coordinate value.

BarCodeScannedCallback()

NameTypeDescription
paramsBarCodeEvent-

BarCodeScannerResult

NameTypeDescription
boundsBarCodeBoundsThe BarCodeBounds object. bounds in some case will be representing an empty rectangle. Moreover, bounds doesn't have to bound the whole barcode. For some types, they will represent the area used by the scanner.
cornerPointsBarCodePoint[]Corner points of the bounding box. cornerPoints is not always available and may be empty. On iOS, for code39 and pdf417 you don't get this value.
datastringThe information encoded in the bar code.
typestringThe barcode type.

BarCodeSize

NameTypeDescription
heightnumberThe height value.
widthnumberThe width value.

PermissionHookOptions

Acceptable values are: PermissionHookBehavior, Options.

Enums

PermissionStatus

PermissionStatus.DENIED = "denied"

User has denied the permission.

PermissionStatus.GRANTED = "granted"

User has granted the permission.

PermissionStatus.UNDETERMINED = "undetermined"

User hasn't granted or denied the permission yet.

  • Message-iconAsk a question on the forums about BarCodeScanner
  • Github-iconView open bug reports for BarCodeScanner
  • Code-iconView source code for BarCodeScanner
  • Build-iconView package in npm Registry
  • Edit-iconEdit this page

Was this doc helpful?