Can the dimensions of the camera scanner become smaller when in a smaller View?

[afilp]

I have added the QRCodeScanner inside a View which is around 1/3 of the page height (and almost 100% of the page width).

I noticed that the marker is still large and that the detection of the QR is better on a corner than in the middle. Also the scanner requires more space and makes the ScrollView have a scrollbar.

I added width, height props to cameraStyle, is this the correct approach? The marker is still very large (part of it shows out of the view). Is the QR detection depended on that?

[sarahmarciano]

I am also facing a similar issue.. I want my scanner to be 80% of my device's width and have margin around my qr scanner.. but I dont succeed to do that.. even when I pass marginRight, marginLeft to different props like style, container style etc.. nothing helps..

[moaazsidat]

Open to PRs implementing the feature, thanks! :)

[imvv]

I'm struggling with this too, added height and width to cameraStyle but it seems to do nothing, it's still overly large and covering other content outside of the view it's in.

[YogeshYo]

Facing the same issue, any luck on this?

[rszalski]

After having various sizing/styling issues with this package, I switched to https://github.com/react-native-community/react-native-camera which also supports (qr|bar)code scanning. Might be worth a try @YogeshYo .

[YogeshYo]

Thanks @rszalski, I will try this and I agree with your solution. Thanks Again

[running0x]

🧐🧐🧐🧐I really wish I knew this component was unable to be styled at all before I implemented it in my project.

[VSV6]

In my case, with the help of 'containerStyle' prop, I'm able to put marginTop and it's working though I'm not able to set the height of the camera if I try to put, it overlaps on other elements. Can somebody help with setting the height of the camera?

[ManarHussein]

hey all, you can use cameraViewDimensions prop like the following: cameraViewDimensions={{ width: '90%', height:'60%', }} and cameraProps={{ ratio:'1:1' }}

cameraViewDimensions is a must to implement incase of android for react-native-camera, and as qrscanner is based on it so you have to use it as well, hope that helps