How to reduce size on QR code scanner, customize QR code scanner

Question

How can I reduce the size of my QR Code scanner. When I am trying to apply style prop, its not working
In below code my scanner is working but it is coming on full screen , I have to reduce its height and width

 import React, { Component } from 'react';

    import {
      AppRegistry,
      StyleSheet,
      Text,
      TouchableOpacity,
      Linking,
      View,
    } from 'react-native';
    import {  Dimensions } from "react-native";

    const SCREEN_HEIGHT = Dimensions.get("window").height;
    const SCREEN_WIDTH = Dimensions.get("window").width;
    const scanBarWidth = SCREEN_WIDTH * 0.46;

    import QRCodeScanner from 'react-native-qrcode-scanner';

    export default class OpenTicket extends Component {
      onSuccess(e) {
    //    console.log(e.data);
        this.props.navigation.navigate('OpenApplianceIssue', {
          data: e.data,
          } );
      }


      render() {
        return (
    // this below scanner size I have to reduce 

          <QRCodeScanner style={{height: 50, width: 50, 
             borderRadius: 10}}
            onRead={this.onSuccess.bind(this)}
            cameraStyle={{ height: SCREEN_HEIGHT }}
            cameraProps={{captureAudio: false}}
            bottomContent={
                <Text style={styles.buttonText}>SCAN ITEM</Text>


            }

          />
        );
      }
    }

    const styles = StyleSheet.create({
      centerText: {
        flex: 1,
        fontSize: 18,
        padding: 32,
        color: '#777',
      },
      textBold: {
        fontWeight: '500',
        color: '#000',
      },
      buttonText: {
        fontSize: 21,
        color: 'rgb(0,122,255)',
      },
      buttonTouchable: {
        padding: 16,
      },
    });

// I have attached my full code for this what am using. // Thanks ..

Answer 1

you can use cameraStyle with constant height not entire screen height here is my working props:

containerStyle={{height:300}}
cameraStyle={[{height:300}]}

Answer 2

you may follow this inside your QRCodeScanner tag.

cameraContainerStyle={{ width: 275, borderWidth: 1, borderColor: 'white', alignSelf: 'center', }} cameraStyle={{ width: '97%', alignSelf: 'center', }}