How to make center of barcode scanner transparent?

Question

I am creating a barcode scanner using expo-barcode-scanner

I have created the below screen the whole screen is transparent

I am trying to create the below screen only the QR code square is transparent

<BarCodeScanner
  style={styles.mainContainer}>
  <TouchableOpacity
    onPress={() => {
      navigation.navigate('Home')
    }}
    style={styles.backButton}
  >
    <Entypo
      style={{ color: Colors.SAWhite }}
      name="chevron-thin-left"
      size={25}
    />
  </TouchableOpacity>

  <View style={styles.qrContainer}></View>

  <View style={styles.messageBox}>
    <FontAwesomeIcon
      name="qrcode"
      size={50}
      style={isValid ? styles.initialColor : styles.errorColor}
    />
    {isValid ? (
      <Text style={[fonts.SemiBoldTitle, styles.initialColor]}>
        {Languages.Scanner.initialMessage}
      </Text>
    ) : (
      <Text style={[fonts.SemiBoldTitle, styles.errorColor]}>
        {Languages.Scanner.errorMessage}
      </Text>
    )}
  </View>
</BarCodeScanner>

styles

const styles = StyleSheet.create({
  mainContainer: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden',
  },
  backButton: {
    alignSelf: 'flex-start',
    marginLeft: '5%',
  },
  qrContainer: {
    width: 220,
    height: 220,
    borderColor: Colors.SAWhite, //white
    borderWidth: 1,
    margin: '10%',
  },
  messageBox: {
    width: '85%',
    height: '30%',
    backgroundColor: Colors.SAWhite,
    borderColor: Colors.SABlack,
    borderWidth: 1,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'space-evenly',
  },
  initialColor: {
    color: Colors.SASecondary,//grey
    textAlign: 'center',
    marginLeft: '10%',
    marginRight: '10%',
  },
  errorColor: {
    color: Colors.SARed,
    textAlign: 'center',
    marginLeft: '10%',
    marginRight: '10%',
  }, 
})

I have tried to wrap it around a view but it also makes the center box as coloured

i have tried expo's barcode code but it is also not good implementation

Answer 1

You can build up the overlay around the transparent part using multiple absolute positioned views, leaving the center empty.

const scanOverlay = {
    position:        'absolute',
    backgroundColor: 'rgba(255,0,0,0.5)',
};

<View>
    <Camera />
    <View style={StyleSheet.absoluteFill}>
        <View style={[scanOverlay, {top: 0, left: 0, width: '25%', bottom: 0}]} />
        <View style={[scanOverlay, {top: 0, left: '25%', right: '25%', height: '25%'}]} />
        <View style={[scanOverlay, {bottom: 0, left: '25%', right: '25%', height: '25%'}]} />
        <View style={[scanOverlay, {top: 0, right: 0, width: '25%', bottom: 0}]} />
    </View>
</View>;