shahnawaz/react-native-barcode-mask

Animated line stops when device view is changed

Opened this issue · 0 comments

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.