Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Animated line stops when device view is changed #41

Open
LucasPiacitelli opened this issue Jan 8, 2021 · 0 comments
Open

Animated line stops when device view is changed #41

LucasPiacitelli opened this issue Jan 8, 2021 · 0 comments

Comments

@LucasPiacitelli
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant