A barcode scanner component for React Native built from scratch.
This component has been created for a simple use of barcode scanner with some customizations.
- iOS : 10.0+
- Android : SDK 23+
npm install --save react-native-scanview-barcode
You need to add in your Info.plist the NSCameraUsageDescription.
Example
<key>NSCameraUsageDescription</key>
<string>Camera used for barcode scanner</string>
<uses-permission android:name="android.permission.CAMERA"/>
You need to import ScanView from react-native-scanview-barcode then you can use it as <ScanView/> tag.
import { ScanView } from 'react-native-scanview-barcode';
Function to be called when native code emit onScanCode, when barcode is detected.
onScanCode = (event) => {
// Type
console.log(event.type);
// Data
console.log(event.value);
};All types are supported by default.
| BarCode Type | iOS | Android |
|---|---|---|
| Barcode.code39 | ✅ | ✅ |
| Barcode.code93 | ✅ | ✅ |
| Barcode.code128 | ✅ | ✅ |
| Barcode.dataMatrix | ✅ | ✅ |
| Barcode.ean8 | ✅ | ✅ |
| Barcode.ean13 | ✅ | ✅ |
| Barcode.itf14 | ✅ | ✅ |
| Barcode.pdf417 | ✅ | ✅ |
| Barcode.qr | ✅ | ✅ |
| Barcode.upce | ✅ | ✅ |
| Barcode.aztec | ✅ | |
| Barcode.code39Mod43 | ✅ | |
| Barcode.interleaved2of5 | ✅ | |
| Barcode.coda_bar | ✅ | |
| Barcode.upca | ✅ | |
| Barcode.rss14 | ✅ |
The back facing camera is used by default.
Values :
ScanView.Const.Camera.back or ScanView.Const.Camera.front
The flash is turned off by default.
Values :
ScanView.Const.Flash.on or ScanView.Const.Flash.off
import React, {Component} from 'react';
import {
StyleSheet,
View
} from 'react-native';
import { ScanView } from 'react-native-scanview-barcode';
type Props = {};
export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = {
codeString: ''
}
}
onScanCode = (event) => {
this.setState({codeString: event.value})
};
render() {
let {Flash, Barcode} = ScanView.Const;
return (
<View style={styles.container}>
<ScanView
onScanCode={this.onScanCode}
flash={Flash.on}
codeTypes={[Barcode.qr, Barcode.ean8, Barcode.code39]}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#ff4300',
}
});