I am trying to place the BarCodeScanner in the standard 3 Views flexbox layout example.
I would expect the BarCodeScanner to take up the full third View, instead it’s just a small bar.
How can I fix this? Snack, using Expo Snack / v41.0.0 / Android
1 Like
Hi @mbingel
I gave this a try and it seems that the barcode scanner on Android (didn’t try iOS) is always the same aspect ratio as the screen.
As a workaround, perhaps you could have it taking up the full screen, overlay the red and orange sections on top of it and make the green section transparent?
Something like this:
Hi @wodin, thanks for the reply!
I see one problem with this approach: scanning the wrong bar code. If you have two tickets with printed QR codes next to each other, your view might just show one, but the camera might actually sees both and might decode the “wrong” one.
I had a bit of a look around and it seems that you cannot set the size arbitrarily.
I only glanced at this one. Maybe it has something useful:
I tested my app on iOS today, there it fills the third View. Just not on Android.
My guess is that the Expo team needs to improve their BarCodeScanner module 
i believe what you’re seeing is the result of the aspect ratios on your device. the camera was to expand to take up the full view, what would you expect to happen to the viewport? should the parts of the view that don’t fit when resized for the container be cropped and not visible or what? or should it maintain aspect ratio and then fill in the remaining space with something else, like black?
also worth noting – if you add backgroundColor: 'black' to your style for the barcode scanner you will see it does indeed expand to take the full width of the container, but the default behavior of the camera on android is to have a transparent background and maintain the aspect ratio of the viewport. we should document this inconsistency
here’s how we work around this behavior in the barcodescanner in expo home (using the Camera component instead of BarCodeScanner - expo/Camera.android.tsx at master · expo/expo · GitHub)
1 Like
Maybe Expo can integrate the Expo camera code into the Expo BarCodeScanner 
not sure what you mean
My understanding is that the BarCodeScanner component is provided by Expo. If you know how to fix the aspect ratio for the Camera component, why not directly fix it in the BarCodeScanner component?
the code that i provided is a userspace fix that exists outside of the camera component or barcodescanner component, it is something that we just wrote for one of our apps. you can copy and paste it into your app. we should add support for a resizeMode prop that does this type of thing automatically, but it’s not something we’re prioritizing right now.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.