Expo Docs

BarCodeScanner

A React component that renders a viewfinder for the device's either front or back camera viewfinder and will detect bar codes that show up in the frame.
Requires Permissions.CAMERA.

Bar code formatiOSAndroid
aztecYesYes
codabarNoYes
code39YesYes
code93YesYes
code128YesYes
code138YesNo
code39mod43YesNo
datamatrixYesYes
ean13YesYes
ean8YesYes
interleaved2of5YesYes
itf14YesNo
maxicodeNoYes
pdf417YesYes
rss14NoYes
rssexpandedNoYes
upc_aNoYes
upc_eYesYes
upc_eanNoYes
qrYesYes

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { BarCodeScanner, Permissions } from 'expo';

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

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

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

    if (hasCameraPermission === null) {
      return <Text>Requesting for camera permission</Text>;
    } else if (hasCameraPermission === false) {
      return <Text>No access to camera</Text>;
    } else {
      return (
        <View style={{ flex: 1 }}>
          <BarCodeScanner
            onBarCodeRead={this._handleBarCodeRead}
            style={StyleSheet.absoluteFill}
          />
        </View>
      );
    }
  }

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

  • onBarCodeRead (function) -- A callback that is invoked when a bar code has been successfully read. The callback is provided with an Object of the shape { type: string, 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)
  • type (string) -- When 'front', use the front-facing camera. When 'back', use the back-facing camera. Default: 'back'.
  • torchMode (string) -- When 'on', the flash on your device will turn on, when 'off', it will be off. Defaults to 'off'.
  • 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]}