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.