I ran into a strange issue where the "squares" that make up the overlay have a tiny gap between them, but only on a Samsung Galaxy S20+ running Android 10. It works fine on a Nexus 5X and iPhone.

I was running the app in development mode through Expo.

In the screenshot below, you can see the line across the top of the barcode area.

Please can someone help me with how to make this work? I already added this props handler to BarcodeMask

const onFinderLayoutMeasured = ({nativeEvent}) => {

}

    <BarcodeMask
      width={250}
      height={250}
      showAnimatedLine={true}
      outerMaskOpacity={0.8}
      lineAnimationDuration={1500}
      edgeRadius={5}
      edgeBorderWidth={10}
      edgeColor={COLORS.skyBlue}
      edgeHeight={20}
      animatedLineColor={COLORS.primaryblue}
      animatedLineHeight={4}
      onLayoutMeasured={onFinderLayoutMeasured}
    />

Tested the component on MotoG4, Samsung and BLU Studio Mega. Didn't work only on BLU device.

BLU products: https://bluproducts.com/home/
BLU Studio Mega: https://www.gsmarena.com/blu_studio_mega-8709.php

Provide onMaskLayout event so we could get mask position on screen and filter coordinates from camera component. Just trigger event with nativeEvent in method below.

I wouldn't think o this as an issue, more of a feature. My react native camera covers the entire screen, and I want to keep it that way. Having absolutely positioned content at the bottom, I don't have the ability to move the scanner mask box up. it's always centered

Barcode is recognized only inside Mask. but QRCode is not..

How to solve?

There is a memory leak. After the Mask unmount, the onComplete animation is still to run and run...

After adding the mask, the scanning area will be in the center of the view, How would I change its position?
Say, I want to move the scanning area to top of the view or place it to the bottom of the view. Is there a way to do it?

When trying to set the transparency property to 0, instead of being fully transparent it seems to default to 0.6.

I don't know if this zIndex: -1 is important, but I'm trying to get the outer mask appear and the zIndex: -1 is making the outer mask be invisible. I think the zIndex: -1 is pushing the outer mask to back of camera view.

When I remove that line, it works!

Am I doing something wrong?

how can we put animation line from left to right with vertical line?
currently have only animation line from left to right with horizontal line.
thanks.

Hi. I would like to report a visual bug that I found when testing this component.

When I open the camera on portrait view, animated line works fine. But when I changed to landscape view, still with the camera on, to see if any changes would apply to any props, the animated line stopped at the middle of the mask and didn't resume its animation even when I changed view back to portrait. This happens too when I open the camera on landscape view, animated line works fine until I change view to portrait. This was tested in a real device.

These are my output info of the project:

OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i5-5200U CPU @ 2.20GHz
    Memory: 2.87 GB / 7.92 GB
  Binaries:
    Node: 15.2.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 7.0.8 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29
      Build Tools: 23.0.1, 28.0.3, 29.0.2, 30.0.2, 30.0.3
      System Images: android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-24 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: Version  4.1.0.0 AI-201.8743.12.41.6953283
    Visual Studio: 16.7.30621.155 (Visual Studio Community 2019)
  Languages:
    Java: 1.8.0_221
    Python: 3.9.0
  npmPackages:
    @react-native-community/cli: 4.13.0
    react: 16.13.1 => 16.13.1
    react-native: 0.63.3 => 0.63.3

Device info:
Model: moto x4
OS: Android 9 - API level 28

I'm using the mask with RNCamera inside a modal component which shows itself when a button is pressed and qrCodeVisible is set to true. Here's the snippet:

import React from 'react';
import {
    Modal,
} from 'react-native';
import { RNCamera } from 'react-native-camera';
import BarCodeMask from 'react-native-barcode-mask';

const QrCode = ({ qrCodeVisible, setQrCodeVisible, handleQrCode }) => {
    return (
        <Modal
            animationType={'slide'}
            transparent={true}
            visible={qrCodeVisible}
            onRequestClose={() => setQrCodeVisible(false)}
        >
            <RNCamera
                captureAudio={false}
                onBarCodeRead={(res) => handleQrCode(res.data)}
                barCodeTypes={[RNCamera.Constants.BarCodeType.qr]}
                style={{ flex: 1 }}
            >
                <BarCodeMask 
                    edgeColor={'#039be5'}
                    height={250}
                    width={250}
                    showAnimatedLine={true}
                    animatedLineColor={'red'}
                />
            </RNCamera>
        </Modal>
    );
}

export default QrCode;

I know it's a small bug and doesn't affect its funcionality but I would like to see this project as much perfect as possible. Keep with the nice work and thank you.

Hi

I think it would be useful if you could amend the corners of the mask to be rounded.

Thanks

hi bro ,
i was given camera persmission on manifest but its still return this mistake .. how can be solve that

CameraManager.checkIfRecordAudioPermissionsAreDefined is not a function. (In 'CameraManager.checkIfRecordAudioPermissionsAreDefined()', 'CameraManager.checkIfRecordAudioPermissionsAreDefined' is undefined)

useNativeDriver of Animated is required option on react-native 0.62.X.
Could you consider passing the useNativeDriver option explicitly?

The edges of the default marker are pushed behing the semi-transparent overlay when their size and radius is increased making the overall component look wierd.

Is there any example about how to use onLayoutMeasured ?

I've imported the module to use with my implemented RNCamera and I followed the example to put the BarcodeMask tag as a child component of the RNCamera, but it throws this error:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Any help please? I need this in a hurry!

Platforms

Android

Versions

• Android: 9
• iOS: (not tested yet)
• react-native-camera: ^3.19.0
• react-native: 0.61.5
• react: 16.9.0
• react-native-barcode-mask: ^1.1.0

Description/Current Behaviour

Expected Behaviour

The barcode scan area is limited in a box by the barcode mask component.

Steps to Reproduce

Can't provide much other than importing the modules and use the tags.

Additionals

The code I use to implement it:

import {RNCamera} from 'react-native-camera'
import {BarcodeMask} from 'react-native-barcode-mask'
import {View} from 'react-native'

<View style={[styles.container, styles.bgColor]}>
    <RNCamera {props}>
        <BarcodeMask />
    </RNCamera>
</View>

It would be great if you could add simple typescript typings like index.d.ts:

import React from 'react';

export interface BarcodeMaskProps {
  width?: number | string;
  height?: number | string;
  edgeWidth?: number | string;
  edgeHeight?: number | string;
  edgeColor?: string;
  edgeBorderWidth?: number | string;
  transparency?: number;
  showAnimatedLine?: boolean;
  animatedLineColor?: string;
  animatedLineHeight?: number;
  lineAnimationDuration?: number;
}

export class BarcodeMask extends React.Component<BarcodeMaskProps, {}> {}

export default BarcodeMask;

Thanks :)

I know this may not be an actual issue, but I consider important to report them.

Could you make it possible to specify a mask background color other than black?

e.g.) rgba(0.0,0.5,0.3,0.6)

Thank you.

Development enhancements:

• Lint support
• .editorconfig for IDE
• Pre-commit hook for linting

Hi, thank you for this plugin :)
i would like to recommend you something.

Add a complete file example in you documentation.

Actually you already have one: https://gist.github.com/shahnawaz/d24ae843fc3a6056bef9c752d9b35e03

• Update package to utilise the power of hooks

I'm using Google Vision to scan for barcodes in Android, however I'm unable to limit the scan boundary to this mask

When i toggle showAnimatedLine's value, animation line being freeze in screen. I just set the value of false and true in order.

Is there a workaround for this?

For performance reasons, please consider using useNativeDriver on the Animated object. For this, you'll need to change from animating 'top' directly, to using translateY. I've 'hacked in' those changes locally, and it's a lot smoother.