How to make center of barcode scanner transparent? - reactjs

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>;