search

moaazsidat / react-native-qrcode-scanner

A QR code scanner component for React Native.
MIT License
2.03k stars 513 forks source link

Resize camera view #144

Open liljosi opened 5 years ago

liljosi commented 5 years ago

What's happening?

How can you make the camera view smaller, it takes up the whole screen and it renders it horizontally

How can it be reproduced?

You can reproduce it by copying the example in the readme

Build details?

tannera commented 5 years ago

Maybe related to: https://github.com/moaazsidat/react-native-qrcode-scanner/issues/134

ducbka02 commented 5 years ago

See comment in https://github.com/moaazsidat/react-native-qrcode-scanner/issues/134#issuecomment-454055952

gbalduzzi commented 5 years ago

I have the same issues, i want to set a custom width/height but the scanner just fill the whole screen width even if is container is a 200x200 wrapper view

howieyoung commented 5 years ago

Got the same issue and solved it successfully I've explained it at #173, feel free to check it and hopefully it's helpful for your case.

jhoanborges commented 4 years ago

try my code

      <QRCodeScanner
      reactivate={true}
      reactivateTimeout={3000}
      style={{height:'100%'}}
      fadeIn={false}
      cameraProps={{ ratio:'1:1' }} 
        onRead={this.onSuccess}
        showMarker={true}
        customMarker={<BarcodeMask 
          edgeColor={'#009FDA'}  
        animatedLineColor={'#009FDA'}
        lineAnimationDuration={2000}
        >
        </BarcodeMask>}
        //flashMode={QRCodeScanner.Constants.FlashMode.torch}      .

        topContent={
          <Image
          style={{width:100, height:100}}
          source={require('../assets/sendero.png')}
          />

        }
        bottomContent={
          <Text style={{ fontSize: 23, fontWeight:"bold", color:"#005293" }}>QR de la subasta</Text>
        }
      />