How to make BarCodeScanner fill a View?

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.

Expo-Flex-Layout-BarCodeScanner

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 :slight_smile:

@adamjnav Why did you move this to “Howto”? I think it’s an Expo SDK bug.

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)