Expo

Documentation

BarCodeScanner

A React component that renders a viewfinder for the device's either front or back camera viewfinder and will scan bar codes that show up in the frame.
Platform Compatibility
Android DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb

For managed apps, you'll need to run expo install expo-barcode-scanner. To use it in a bare React Native app, follow its installation instructions.

Bar code formatiOSAndroid
aztecYesYes
codabarNoYes
code39YesYes
code93YesYes
code128YesYes
code39mod43YesNo
datamatrixYesYes
ean13YesYes
ean8YesYes
interleaved2of5YesNo
itf14Yes*Yes
maxicodeNoYes
pdf417YesYes
rss14NoYes
rssexpandedNoYes
upc_aNoYes
upc_eYesYes
upc_eanNoYes
qrYesYes
  • sometimes when an ITF-14 barcode is recognized it's type is set to interleaved2of5.

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.
import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import * as Permissions from 'expo-permissions';
import { BarCodeScanner } from 'expo-barcode-scanner';

export default class BarcodeScannerExample extends React.Component {
  state = {
    hasCameraPermission: null,
    scanned: false,
  };

  async componentDidMount() {
    this.getPermissionsAsync();
  }

  getPermissionsAsync = async () => {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === 'granted' });
  };

  render() {
    const { hasCameraPermission, scanned } = this.state;

    if (hasCameraPermission === null) {
      return <Text>Requesting for camera permission</Text>;
    }
    if (hasCameraPermission === false) {
      return <Text>No access to camera</Text>;
    }
    return (
      <View
        style={{
          flex: 1,
          flexDirection: 'column',
          justifyContent: 'flex-end',
        }}>
        <BarCodeScanner
          onBarCodeScanned={scanned ? undefined : this.handleBarCodeScanned}
          style={StyleSheet.absoluteFillObject}
        />

        {scanned && (
          <Button title={'Tap to Scan Again'} onPress={() => this.setState({ scanned: false })} />
        )}
      </View>
    );
  }

  handleBarCodeScanned = ({ type, data }) => {
    this.setState({ scanned: true });
    alert(`Bar code with type ${type} and data ${data} has been scanned!`);
  };
}

import { BarCodeScanner } from 'expo-barcode-scanner';
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.bar

  • type (string) -- Camera facing. Use one of BarCodeScanner.Constants.Type. Use either Type.front or Type.back. Same as Camera.Constants.Type. Default: Type.back.
  • barCodeTypes (Array<string>) -- An array of bar code types. Usage: BarCodeScanner.Constants.BarCodeType.<codeType> where codeType is one of the listed above. Default: all supported bar code types. For example: barCodeTypes={[BarCodeScanner.Constants.BarCodeType.qr]}
  • onBarCodeScanned (function) -- A callback that is invoked when a bar code has been successfully scanned. The callback is provided with an object of the shape { type: BarCodeScanner.Constants.BarCodeType, data: string }, where the type refers to the bar code type that was scanned and the data is the information encoded in the bar code (in this case of QR codes, this is often a URL).

Scan bar codes from the image given by the URL.

  • url (string) -- URL to get the image from.
  • barCodeTypes (Array<BarCodeScanner.Constants.BarCodeType>) -- (as in prop) An array of bar code types. Default: all supported bar code types.
    Note: Only QR codes are supported on iOS.

A possibly empty array of objects of the shape { type: BarCodeScanner.Constants.BarCodeType, data: string }, where the type refers to the bar code type that was scanned and the data is the information encoded in the bar code.