Example of Rendering Bounding Box Around Detected Bar Code

[cancan101]

Would be cool to have an example where a rectangle is rendered around the detected barcode.

[por]

I would also love to see this. Having trouble getting this to work.

[export-mike]

+1

[rohitgoyal]

+1

[xiaomilii]

+1

[export-mike]

@xiaomilii there's emoji's for this now 👍

[ggauravr]

this repo has an example of drawing a reactangular box to indicate the scanning area. https://github.com/starknx/react-native-qrcode-reader

[KGALLET]

By using

<View style={styles.rectangleContainer}>
   <View style={styles.rectangle}/>
</View>

inside the Camera component with the style as below :

rectangleContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'transparent',
  },

  rectangle: {
    height: 250,
    width: 250,
    borderWidth: 2,
    borderColor: '#00FF00',
    backgroundColor: 'transparent',
  }

will break the tap-to-focus function.
Does anyone have a workaround to do it ?
Maybe by using zIndex ?

[svenadlung]

@KGALLET a little late but I guess you could use pointerEvents setting them to 'none' to make this work.

[akriger]

I know this has been around for a bit but I took the above example and modified it with the code below. This style only works with a portrait layout

I put

<View style={styles.reactangleContainer}>
     <View style={styles.rectangle}>
          <View style={styles.rectangleColor} />
          <View style={styles.topLeft} />
          <View style={styles.topRight} />
          <View style={styles.bottomLeft} />
          <View style={styles.bottomRight} />
     </View>
</View>
<View style={styles.textBg}>
     <Text style={styles.scanText}>Place a barcode inside the viewfinder area to scan it.</Text>
</View>

Inside the Camera component and my styles look like the below:

const deviceHeight = Dimensions.get("window").height;

const deviceWidth = Dimensions.get("window").width;

rectangleContainer: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: 'transparent',
  },
  rectangle: {
      borderLeftColor: 'rgba(0, 0, 0, .6)',
      borderRightColor: 'rgba(0, 0, 0, .6)',
      borderTopColor: 'rgba(0, 0, 0, .6)',
      borderBottomColor: 'rgba(0, 0, 0, .6)',
      borderLeftWidth: deviceWidth / 5,
      borderRightWidth: deviceWidth / 5,
      borderTopWidth: deviceHeight / 2,
      borderBottomWidth: deviceHeight / 4
  },
  rectangleColor: {
      height: 250,
      width: 250,
      backgroundColor: 'transparent'
  },
  topLeft: {
      width: 50,
      height: 50,
      borderTopWidth: 2,
      borderLeftWidth: 2,
      position: 'absolute',
      left: -1,
      top: -1,
      borderLeftColor: 'white',
      borderTopColor: 'white'
  },
  topRight: {
      width: 50,
      height: 50,
      borderTopWidth: 2,
      borderRightWidth: 2,
      position: 'absolute',
      right: -1,
      top: -1,
      borderRightColor: 'white',
      borderTopColor: 'white'
  },
  bottomLeft: {
      width: 50,
      height: 50,
      borderBottomWidth: 2,
      borderLeftWidth: 2,
      position: 'absolute',
      left: -1,
      bottom: -1,
      borderLeftColor: 'white',
      borderBottomColor: 'white'
  },
  bottomRight: {
      width: 50,
      height: 50,
      borderBottomWidth: 2,
      borderRightWidth: 2,
      position: 'absolute',
      right: -1,
      bottom: -1,
      borderRightColor: 'white',
      borderBottomColor: 'white'
  }

You may have to edit the border widths in the rectangle style to match your square in the center

[akriger]

@sahir Below will get you pretty close may have to tweak a few styles. It's probably not the best way to do it.. Kinda hacked it together

<Camera ref={(cam) => { this.camera = cam; }}
                    style={styles.preview}
                    aspect={this.state.camera.aspect}
                    captureTarget={this.state.camera.captureTarget}
                    type={this.state.camera.type}
                    captureQuality={this.state.camera.captureQuality}
                    captureAudio={false}
                    showViewFinder={true}
                    onBarCodeRead={(code) => this.scanData(code)}
                    defaultTouchToFocus
                    barCodeTypes={[
                        'org.iso.Code128',
                        'org.iso.Code39',
                        'org.gs1.EAN-13',
                        'org.ansi.Interleaved2of5'

                    ]}>
                    
                        <View style={styles.rectangle}>
                            <View style={styles.rectangleColor} />
                            <View style={styles.topLeft} />
                            <View style={styles.topRight} />
                            <View style={styles.bottomLeft} />
                            <View style={styles.bottomRight} />
                        </View>
                        <View style={styles.textBg}>
                        <Text style={styles.scanText}>Please scan the barcode at the bottom of your receipt.</Text>
                    </View>
                        <Button
                            full
                            rounded
                            style={styles.close}
                            onPress={() => this.props.navigation.goBack()}>
                            <Text>Enter Barcode Manually</Text>
                        </Button>
                </Camera>

Styles:

const { StyleSheet, Dimensions, Platform } = React;

const deviceHeight = Dimensions.get("window").height;

const deviceWidth = Dimensions.get("window").width;

export default {
  textBg: {
      width: deviceWidth,
      height: 50,
      justifyContent: 'center',
      backgroundColor: '#43474a',
      marginTop: deviceHeight / 14
  },
  preview: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'space-between'
  },
  scanText: {
      color: 'white',
      textAlign: 'center'
  },
  overlay: {
      position: 'absolute',
      justifyContent: 'center',
      alignItems: 'center',
      height: deviceHeight,
      width: deviceWidth,
      borderLeftColor: 'rgba(0, 0, 0, .75)',
      borderRightColor: 'rgba(0, 0, 0, .75)',
  },
  rectangleContainer: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: 'transparent',
  },
  rectangle: {
      position: 'absolute',
      borderLeftColor: 'rgba(0, 0, 0, .6)',
      borderRightColor: 'rgba(0, 0, 0, .6)',
      borderTopColor: 'rgba(0, 0, 0, .6)',
      borderBottomColor: 'rgba(0, 0, 0, .6)',
      borderLeftWidth: deviceWidth / 1,
      borderRightWidth: deviceWidth / 1,
      borderTopWidth: deviceHeight / 3,
      borderBottomWidth: deviceHeight / 1
  },
  rectangleColor: {
      height: 250,
      width: 325,
      backgroundColor: 'transparent',
  },
  topLeft: {
      width: 50,
      height: 50,
      borderTopWidth: 2,
      borderLeftWidth: 2,
      position: 'absolute',
      left: -1,
      top: -1,
      borderLeftColor: 'green',
      borderTopColor: 'green'
  },
  topRight: {
      width: 50,
      height: 50,
      borderTopWidth: 2,
      borderRightWidth: 2,
      position: 'absolute',
      right: -1,
      top: -1,
      borderRightColor: 'green',
      borderTopColor: 'green'
  },
  bottomLeft: {
      width: 50,
      height: 50,
      borderBottomWidth: 2,
      borderLeftWidth: 2,
      position: 'absolute',
      left: -1,
      bottom: -1,
      borderLeftColor: 'green',
      borderBottomColor: 'green'
  },
  bottomRight: {
      width: 50,
      height: 50,
      borderBottomWidth: 2,
      borderRightWidth: 2,
      position: 'absolute',
      right: -1,
      bottom: -1,
      borderRightColor: 'green',
      borderBottomColor: 'green'
  },
  close: {
      width: deviceWidth,
      backgroundColor: 'red',
      justifyContent: 'center',
      alignItems: 'center',
      marginBottom: deviceHeight / 7,
  }

};

[sahir]

@akriger Thanks, I implement the solution and open sources it.
https://github.com/sahir/react-native-barcode-reader

[ospfranco]

Hey! this repository was recently transferred to the react-native-community, as part of our ongoing cleaning process we are closing old tickets (there is just too many of them!), please feel free to try the latest versions or the master branch to see if your problem has been solved.

If you are still experiencing this problem feel free to re-open this or fill a new ticket.