BarCodeScanner

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

Supported formats

Important 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 noticable 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

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(() => {
    (async () => {
      const { status } = await BarCodeScanner.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  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={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'flex-end',
      }}>
      <BarCodeScanner
        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
        style={StyleSheet.absoluteFillObject}
      />

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

API

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.

Props

• 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 these listed above. Defaults to all supported bar code types. It is recommended to provide only the bar code formats you expect to scan to minimize battery usage. 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).

Methods

BarCodeScanner.scanFromURLAsync(url, barCodeTypes)

Arguments

• 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.

Returns