Camera sizing dont work (Android)

[messenja]

I want to show camera as square in center of screen. But it always the same size. I see right styles dimensions (had to mark borders) before camera starts, but when it starts it always overflow that dimensions. Is there a solution?

import React, {Component} from 'react';
import {StyleSheet} from 'react-native';
import QRCodeScanner from 'react-native-qrcode-scanner';


class ScanScreen extends Component {
  onSuccess = e => {
    console.log('Data: ', JSON.stringify(e.data, null, 2));
  };

  render() {
    return (
      <QRCodeScanner
        onRead={this.onSuccess}
        containerStyle={styles.container}
        cameraStyle={styles.camera}
        cameraContainerStyle={styles.cameraContainer}
        cameraProps={{ratio: '4:3'}}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    borderColor: 'green',
    borderWidth: 1,
    paddingVertical: 32,
  },
  camera: {
    borderColor: 'red',
    borderWidth: 1,
    width: 300,
    height: 300,
  },
  cameraContainer: {
    flex:1,
    alignItems: 'center',
    justifyContent: 'center',
    width: 300,
    height: 300,
  },

});

export default ScanScreen;

[pakkibokati2012]

Try adding following styles to QRCodeScanner component.

containerStyle={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red',
}}
topViewStyle={{flex: 0}}
bottomViewStyle={{flex: 0}}
cameraStyle={{overflow: 'hidden'}}

[messenja]

@pakkibokati2012 i got this, but how to decrease viewport of camera? Is it posible to show it as a box with dimensions 300x300?

[pakkibokati2012]

@messenja, try applying height and width to the cameraStyle prop.

[BraveEvidence]

This will help you https://www.youtube.com/watch?v=sE0MEyFA7E4&list=PLQhQEGkwKZUrempLnmxjt7ZCZJu1W3p2i&index=10