Can the aspect ratio be changed from stretch to cover?

[syousif94]

I'm trying to prevent the scanner view from squishing when it's not using the full viewport. Just knowing where to start hacking would really help. Thanks.

[andreaskeller]

@syousif94 with the new version 3.0.0 this should be no problem anymore. Could you report back if this resolves your issue? Thank you.

[syousif94]

Awesome, thank you!

I'll let you know as soon as I test it.

[syousif94]

@andreaskeller It's still squishing the image. Also, when I added viewFinderHeight and viewFinderWidth, the viewfinder borders disappeared. My code looks like this:

<BarcodeScanner
  onBarCodeRead={this._onBarcode}
  style={{ flex: 1 }}
  torchMode='off'
  cameraType='back'
  viewFinderHeight={VIEW_HEIGHT}
  viewFinderWidth={FULL_WIDTH}
/>

[terry-fei]

@syousif94 How it going？

[terry-fei]

I has same issue

[syousif94]

@feit couldn't fix it. may try disabling the viewfinder and using react native camera.

[ThaJay]

even without changing the size the camera view is stretched. and no docs for setting fill / stretch / fit it should default to 'fill' imo

[namxam]

Yeah, any update on this issue?

[matejkriz]

try this:

const windowWidth = Dimensions.get('window').width;
const cameraAspectRatio = 4/3;

<View style={{flex: 2, overflow: 'hidden'}}>
  <BarcodeScanner
    onBarCodeRead={this._onBarcode}
    style={{
      flex: 1,
      alignItems: 'center',
    }}
    torchMode='off'
    cameraType='back'
    width={windowWidth}
    height={windowWidth * cameraAspectRatio}
  />
</View>

[patmisch]

Anyone figure out a good solution for this? Setting the width and height only works if you keep the ratio and also isn't really ideal for flex layouts.

[matejkriz]

I forgot overflow: 'hidden' on the container, now it's fixed. Aspect ratio of the viewfinder is determined by flex layout, but the screen is not deformed. (QR codes are read from the whole camera picture, not just from the visible part in the viewfinder.)

[patmisch]

Thanks. This did seem to fix the image from being squished, but it also break the positioning of any custom overlays inside the Scanner component. Will see if I can figure out a work around.

[zjaml]

overflow: 'hidden' didn't work for me with the latest version.