Skip to content

Instantly share code, notes, and snippets.

@shahnawaz
Last active June 18, 2024 05:01
Show Gist options
  • Save shahnawaz/d24ae843fc3a6056bef9c752d9b35e03 to your computer and use it in GitHub Desktop.
Save shahnawaz/d24ae843fc3a6056bef9c752d9b35e03 to your computer and use it in GitHub Desktop.
react-native-barcode-mask example usage
import React from "react";
import {
Text,
View,
Item,
Icon,
Input,
Button
} from 'native-base';
import { KeyboardAvoidingView } from "react-native";
import { RNCamera } from 'react-native-camera';
import BarcodeMask from 'react-native-barcode-mask';
const styles = {
root: {
flex: 1,
},
upperSection: {
flex: 1
},
lowerSection: {
paddingVertical: 30,
paddingHorizontal: 20,
backgroundColor: 'white',
},
camera: {
height: '100%',
},
};
class ItemBarcodeScanContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
barcode: ''
}
}
onBarCodeRead = (scanResult) => {
// scanResult.data will contain your scanned data
}
onGetItemPress = () => {
// do something with button press
}
handleChange = () => {
// handle user input
}
render() {
return (
<KeyboardAvoidingView style={styles.root}> {/* OR Use a simple <View> instead of <KeyboardAvoidingView> */}
<View style={styles.upperSection}>
<RNCamera
onBarCodeRead={this.onBarCodeRead}
// ... other related props of RNCamera
>
<BarcodeMask
width={100} height={300} showAnimatedLine={false} outerMaskOpacity={0.8}
/>
</RNCamera>
</View>
<View style={styles.lowerSection}>
<Item>
<Icon type={"Ionicons"} active name='md-barcode' />
<Input
placeholder='Barcode of the item'
value={this.state.barcode}
onChangeText={this.handleChange}
/>
</Item>
<Button
primary
onPress={this.onGetItemPress}
>
<Text>Get Item</Text>
</Button>
</View>
</KeyboardAvoidingView>
)
}
}
export default ItemBarcodeScanContainer;
@nurmizwari
Copy link

onBarcodeRead is not working in

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment