react-native-barcode-mask example usage

barcode-mask-example-3.jsx

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;

is there a way to make this work with QRCodeScanner from react-native-qrcode-scanner?

is there a way to make this work with QRCodeScanner from react-native-qrcode-scanner?

I'm also interested in this

@valn1 and @Ch3my it's easy with customMarker prop.

<QRCodeScanner
  showMarker
  topViewStyle={{ display: 'none' }}
  bottomViewStyle={{ display: 'none' }}
  customMarker={
    <BarcodeMask
      edgeColor={ Colors.container_background }
      edgeWidth={ 50 }
      edgeHeight={ 50 }
      edgeBorderWidth={ 10 }
      showAnimatedLine={ false }
    />
  }
/>

while scanning if there is no barcode then for other things is it able to show no bar code text automatically?