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?
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 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
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.