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.Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
Pending |
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.
expo install expo-barcode-scanner
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
Bar code format | iOS | Android |
---|---|---|
aztec | Yes | Yes |
codabar | No | Yes |
code39 | Yes | Yes |
code93 | Yes | Yes |
code128 | Yes | Yes |
code39mod43 | Yes | No |
datamatrix | Yes | Yes |
ean13 | Yes | Yes |
ean8 | Yes | Yes |
interleaved2of5 | Yes | use itf14 |
itf14 | Yes* | Yes |
maxicode | No | Yes |
pdf417 | Yes | Yes |
rss14 | No | Yes |
rssexpanded | No | Yes |
upc_a | No | Yes |
upc_e | Yes | Yes |
upc_ean | No | Yes |
qr | Yes | Yes |
Important notes:
- When an ITF-14 barcode is recognized, it's type can sometimes be set to
interleaved2of5
.
- Scanning for either
PDF417
and/orCode39
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 thebarCodeTypes
prop.
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> ); }
import { BarCodeScanner } from 'expo-barcode-scanner';
Note: Passingundefined
to theonBarCodeScanned
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.
BarCodeScanner.Constants.Type
. Use either Type.front
or Type.back
. Same as Camera.Constants.Type
. Default: Type.back
.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]}
.{ 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).Note: Only QR codes are supported on iOS.
{ 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.