the camera is full screen with a superimposed graphics which is semitransparent around the center hole

[niloufarzahiri92]

can any body help me, how can I do my code to achieve this type of scanner which I attach the photo here(the camera is full screen with a superimposed graphics which is semitransparent around the center hole ), thanks.

`import React, { Component } from 'react'; import { StyleSheet, Dimensions, TouchableOpacity, Alert, WebView, Image, } from 'react-native'; import PropTypes from 'prop-types'; import { Config } from "../../Config.js"; import I18n from "../../Libs/I18n"; function _(x) { return I18n.t(x) } import { CommonStyle, ScreensStyles } from '../../Themes/Default.js'; import { View, Text } from 'react-native-animatable'; import QRCodeScanner from 'react-native-qrcode-scanner'; import { Button, Overlay } from 'react-native-elements';

export default class QrReader extends Component {

constructor(props) { super(); console.log('QrReader props:', props);

this.state = {


}

} onSuccess = e => { console.log('e is', e);

};

render() {

return (
  <View style={styles.main}>

    <QRCodeScanner cameraStyle={styles.cameraContainer} topViewStyle={styles.zeroContainer} bottomViewStyle={styles.zeroContainer}

      onRead={(code)=>{console.log(code)}}
          />

  </View>


);

}

}

const styles = StyleSheet.create({ main: { // backgroundColor: 'blue', flex: 1, }, zeroContainer: { height: 0, flex: 0, },

cameraContainer: { height: Dimensions.get('window').height, },

})

`

[nubpro]

Save yourself some time, don't use this package. This library is not flexible enough to achieve what you want.

Suggestion: Use RNCamera which is underlying library used by this library. To achieve what u want easily, just use this https://www.npmjs.com/package/react-native-barcode-mask.

[renatobenks]

hey, @niloufarzahiri92 sorry reply to you so late than usual, we always try to help everyone here as soon as possible, but sometimes it takes a while.

Anyway, I'm not sure that I've got it your problem be facing here because it's quite confusing what are you actually trying to do with this package. Does it seem that you're actually building a credit card scanner and not a QR code scanner, right? So, if you're trying to build a credit card scanner, you shouldn't be using this package, it will not be useful. The only purpose behind this package is just allowing QR codes to be scan and nothing beyond that, even because this package is just a scanner type of react-native-camera, which you should be considering to use instead of because it will offer the camera flexibility to build any kind of scanner.

[renatobenks]

@nubpro, sorry for don't be a good fit for you, how could I help you with what you're facing with react-native-qrcode-scanner? can you provide us a feedback about what you mean with the missing of flexibility in our API and which kind of flexibility do would like to have?

we're here to try to help you with whatever kind of problem, so feel free to ask anything or even contribute to it as well, by sharing any useful thing that helps us on improving our API or maybe the way that we're doing the things here