Skip to content

Instantly share code, notes, and snippets.

@damithadayananda
Created October 18, 2021 16:07
Show Gist options
  • Save damithadayananda/2124bc8dafe45f11640e9ffd27285982 to your computer and use it in GitHub Desktop.
Save damithadayananda/2124bc8dafe45f11640e9ffd27285982 to your computer and use it in GitHub Desktop.
working react native bar-code scanner
//for android made following changes
//1)AndroidManifest.xml
//<uses-permission android:name="android.permission.CAMERA" />
//2) Android/app/build.gradle
//defaultConfig {
// missingDimensionStrategy 'react-native-camera', 'general' // <--- insert this line
//}
import React, {Component} from 'react';
import {
Text,
View,
StyleSheet,
Alert,
TouchableOpacity,
Image,
Dimensions,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {RNCamera} from 'react-native-camera';
export default class BarcodeScan extends Component {
constructor(props) {
super(props);
this.handleTourch = this.handleTourch.bind(this);
this.state = {
torchOn: false,
height: Dimensions.get('window').height,
};
}
onBarCodeRead = e => {
Alert.alert('Barcode value is' + e.data, 'Barcode type is' + e.type);
};
render() {
return (
<View style={styles.container}>
<RNCamera
style={{
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
height: 0.9 * this.state.height,
}}
torchMode={
this.state.torchOn
? RNCamera.Constants.FlashMode.on
: RNCamera.Constants.FlashMode.off
}
onBarCodeRead={this.onBarCodeRead}
ref={cam => (this.camera = cam)}>
<Text
style={{
backgroundColor: 'white',
}}>
BARCODE SCANNER
</Text>
</RNCamera>
<View style={styles.bottomOverlay}>
<TouchableOpacity
onPress={() => this.handleTourch(this.state.torchOn)}>
<Text>
<Icon
name={this.state.torchOn === true ? 'celtic-cross' : 'star'}
size={10}
color="#900"
/>
</Text>
</TouchableOpacity>
</View>
</View>
);
}
handleTourch(value) {
if (value === true) {
this.setState({torchOn: false});
} else {
this.setState({torchOn: true});
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
},
cameraIcon: {
margin: 5,
height: 40,
width: 40,
},
bottomOverlay: {
position: 'absolute',
width: '100%',
flex: 20,
flexDirection: 'row',
justifyContent: 'space-between',
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment