Last active
April 24, 2023 11:54
-
-
Save goodpic/f1ba553d85f96c76b6b2992faf037d87 to your computer and use it in GitHub Desktop.
RNCamera : Use the barcode scanner on React Native
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react'; | |
import { Button, Text, View } from 'react-native'; | |
import { RNCamera } from 'react-native-camera'; | |
class ProductScanRNCamera extends Component { | |
constructor(props) { | |
super(props); | |
this.camera = null; | |
this.barcodeCodes = []; | |
this.state = { | |
camera: { | |
type: RNCamera.Constants.Type.back, | |
flashMode: RNCamera.Constants.FlashMode.auto, | |
} | |
}; | |
} | |
onBarCodeRead(scanResult) { | |
console.warn(scanResult.type); | |
console.warn(scanResult.data); | |
if (scanResult.data != null) { | |
if (!this.barcodeCodes.includes(scanResult.data)) { | |
this.barcodeCodes.push(scanResult.data); | |
console.warn('onBarCodeRead call'); | |
} | |
} | |
return; | |
} | |
async takePicture() { | |
if (this.camera) { | |
const options = { quality: 0.5, base64: true }; | |
const data = await this.camera.takePictureAsync(options); | |
console.log(data.uri); | |
} | |
} | |
pendingView() { | |
return ( | |
<View | |
style={{ | |
flex: 1, | |
backgroundColor: 'lightgreen', | |
justifyContent: 'center', | |
alignItems: 'center', | |
}} | |
> | |
<Text>Waiting</Text> | |
</View> | |
); | |
} | |
render() { | |
return ( | |
<View style={styles.container}> | |
<RNCamera | |
ref={ref => { | |
this.camera = ref; | |
}} | |
defaultTouchToFocus | |
flashMode={this.state.camera.flashMode} | |
mirrorImage={false} | |
onBarCodeRead={this.onBarCodeRead.bind(this)} | |
onFocusChanged={() => {}} | |
onZoomChanged={() => {}} | |
permissionDialogTitle={'Permission to use camera'} | |
permissionDialogMessage={'We need your permission to use your camera phone'} | |
style={styles.preview} | |
type={this.state.camera.type} | |
/> | |
<View style={[styles.overlay, styles.topOverlay]}> | |
<Text style={styles.scanScreenMessage}>Please scan the barcode.</Text> | |
</View> | |
<View style={[styles.overlay, styles.bottomOverlay]}> | |
<Button | |
onPress={() => { console.log('scan clicked'); }} | |
style={styles.enterBarcodeManualButton} | |
title="Enter Barcode" | |
/> | |
</View> | |
</View> | |
); | |
} | |
} | |
const styles = { | |
container: { | |
flex: 1 | |
}, | |
preview: { | |
flex: 1, | |
justifyContent: 'flex-end', | |
alignItems: 'center' | |
}, | |
overlay: { | |
position: 'absolute', | |
padding: 16, | |
right: 0, | |
left: 0, | |
alignItems: 'center' | |
}, | |
topOverlay: { | |
top: 0, | |
flex: 1, | |
flexDirection: 'row', | |
justifyContent: 'space-between', | |
alignItems: 'center' | |
}, | |
bottomOverlay: { | |
bottom: 0, | |
backgroundColor: 'rgba(0,0,0,0.4)', | |
flexDirection: 'row', | |
justifyContent: 'center', | |
alignItems: 'center' | |
}, | |
enterBarcodeManualButton: { | |
padding: 15, | |
backgroundColor: 'white', | |
borderRadius: 40 | |
}, | |
scanScreenMessage: { | |
fontSize: 14, | |
color: 'white', | |
textAlign: 'center', | |
alignItems: 'center', | |
justifyContent: 'center' | |
} | |
}; | |
export default ProductScanRNCamera; |
Hi, apparently the RNCamera package no longer maintained and has this error "Unable to resolve "deprecated-react-native-prop-types" from "node_modules/react-native/index.js" I tried to solved it (thanks StackOverFlow and GitHub) but unfortunately it didn't work. :(
I saw that it return on this new package
Thank u so much!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@prashhh0231 black screen is normal for the simulator. Use device