Expo BarCodeScanner
A library that allows scanning a variety of supported barcodes. It is available both as a standalone library and as an extension for Expo Camera.
Deprecated: This library will no longer be available from SDK 51. We recommend usingexpo-camera
which has barcode scanning built-in instead.
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.
Limitations
Only one activeBarCodeScanner
preview is currently supported.
When using navigation, the best practice is to unmount any previously rendered BarCodeScanner
component so the following screens can use their own BarCodeScanner
without any issue.
Known issues AndroidiOS
The BarCodeScanner
component has difficulty scanning barcodes with black backgrounds. This is a limitation due to the underlying ZXing library. It is also an issue discussed on a Stack Overflow thread. To work around this, your app should allow users to capture the barcode image and then invert the colors of the image before passing it to the BarCodeScanner
.
Installation
-
npx expo install expo-barcode-scanner
If you are installing this in an existing React Native app, make sure to install expo
in your project.
Configuration in app config
You can configure expo-barcode-scanner
using its built-in config plugin if you use config plugins in your project (EAS Build or npx expo run:[android|ios]
). The plugin allows you to configure various properties that cannot be set at runtime and require building a new app binary to take effect.
Example app.json with config plugin
{
"expo": {
"plugins": [
[
"expo-barcode-scanner",
{
"cameraPermission": "Allow $(PRODUCT_NAME) to access camera."
}
]
]
}
}
Configurable properties
Name | Default | Description |
---|---|---|
cameraPermission | "Allow $(PRODUCT_NAME) to access your camera" | Only for: iOS A string to set the |
microphonePermission | "Allow $(PRODUCT_NAME) to access your microphone" | Only for: iOS A string to set the |
Are you using this library in an existing React Native app?
Learn how to configure the native projects in the installation instructions in the expo-barcode-scanner
repository.
Supported formats
Bar code format | Android | iOS |
---|---|---|
aztec | ||
codabar | ||
code39 | * | |
code93 | ||
code128 | ||
code39mod43 | ||
datamatrix | ||
ean13 | ||
ean8 | ||
interleaved2of5 | use itf14 | |
itf14 | * | |
maxicode | ||
pdf417 | * | |
rss14 | ||
rssexpanded | ||
upc_a | ||
upc_e | ||
upc_ean | ||
qr |
Additional notes
- When an
ITF-14
barcode is recognized, it's type can sometimes be set tointerleaved2of5
. - Scanning for either
PDF417
and/orCode39
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 thebarCodeTypes
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.
import { 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>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
},
});
API
import { BarCodeScanner } from 'expo-barcode-scanner';
No API data file found, sorry!
Permissions
Android
The following permissions are added automatically through this library's AndroidManifest.xml:
iOS
The following usage description keys are used by this library: