Just implemented the BarCodeScanner component for scanning QR codes. Currently using the Stylesheet.absoluteFill per the example code. I am curious if anyone has tips for styling this component to make it a bit more attractive similar the Expo app and their QR code scanning where there is virtual aperture / viewport with transparency and / or a border. Tried experimenting with the backgroundColor using opacity but not getting the results I would like. Any tips?
Do you have a picture of what you want it to look like?
Sure. I really like the way Expo implemented it. Here is their barcode scanner:
This is what I have currently, but would love to make area outside the viewport a translucent black like Expo has:
I’m not looking at the source code now for that, but imagining how I’d do it now, I’d probably do a <Modal/> with a lot of opacity (https://github.com/react-native-community/react-native-modal) and (assuming you’re using react-navigation, set the header nav option to null for this screen.
Thanks @edgar
I didn’t even realize the Expo client app was open source. Implementation is here:
https://github.com/expo/expo/blob/master/js/Home/screens/QRCodeScreen.js
Will take a look at that and your modal library recommendation. Thanks for the help!
2 Likes
Hello there! Have a question for you about styling your QR Scanner. How did you solved your problem? Or how did you made any styling?)
Hey, i’ve solved it!
Just for anyone who wand to styling theirs barcode here is my solution:
for dimensions:
const { width } = Dimensions.get('window')
const qrSize = width * 0.7
in render:
<BarCodeScanner
onBarCodeRead={this.handleBarCodeScanned}
style={[StyleSheet.absoluteFill, styles.container]}>
<Text style={styles.description}>Scan your QR code</Text>
<Image
style={styles.qr}
source={require('../assets/img/QR.png')}
/>
<Text
onPress={() => this.props.navigation.pop()}
style={styles.cancel}>
Cancel
</Text>
</BarCodeScanner>
and style:
container: {
flex: 1,
alignItems: 'center',
},
qr: {
marginTop: '20%',
marginBottom: '20%',
width: qrSize,
height: qrSize,
},
description: {
fontSize: width * 0.09,
marginTop: '10%',
textAlign: 'center',
width: '70%',
color: 'white',
},
cancel: {
fontSize: width * 0.05,
textAlign: 'center',
width: '70%',
color: 'white',
},
Here is a result:
6 Likes
Could you give me the link to this QRcode that you styled???
1 Like
I was wondering if you could link me to your style or better yet, if you have Github, share the Github link. I’m trying to add something like this to my qr scanner project that is due this Tuesday. Thank you. Sean -
Here’s an example based on @just0110’s code above:
As you can see he’s just nesting some text and an image inside the BarCodeScanner component.
You’d need to find a suitable image to replace the React Native logo in the example, of course 
I’d probably use an SVG instead of a PNG.
1 Like
Thank you wodin! 
That helped out a lot.
1 Like
could you please give me the image inside the barcode scanner with white border
Hello everyone, I was trying to use this QR code reader and I wanted to style it I found my solution here I used a little of both solutions so I share my code in case it works for you
import React, { useState, useEffect } from “react”;
import { View, Text, StyleSheet, Dimensions, Image } from “react-native”;
import { Button, Icon } from “react-native-elements”;
import { BarCodeScanner } from “expo-barcode-scanner”;
import Colors from “…/utils/Colors”;
import { firebaseApp } from “…/utils/firebase”;
import firebase from “firebase/app”;
import “firebase/firestore”;
export default function intereactividadQR() {
const [hasPermission, setHasPermission] = useState(null);
const [scanned, setScanned] = useState(false);
useEffect(() => {
(async () => {
const { status } = await BarCodeScanner.requestPermissionsAsync();
setHasPermission(status === "granted");
})();
}, );
const handleBarCodeScanned = ({ type, data }) => {
setScanned(true);
alert(`Codigo tipo: ${type} dato obtenido: ${data} escaneo exitoso!`);
};
if (hasPermission === null) {
return <Text>Obteniendo permisos de la camera</Text>;
}
if (hasPermission === false) {
return <Text>Permiso denegado</Text>;
}
return (
<View style={styles.container}>
<BarCodeScanner
onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
style={[StyleSheet.absoluteFillObject, styles.container]}
>
<View style={styles.layerTop}>
<Text style={styles.description}>Scan your QR code</Text>
</View>
<View style={styles.layerCenter}>
<View style={styles.layerLeft} />
<View style={[styles.focused, styles.LayerFocusedAlign]}>
<Image style={styles.qr} source={require("../../assets/qr.png")} />
</View>
<View style={styles.layerRight} />
</View>
<View style={styles.layerBottom} />
</BarCodeScanner>
{scanned && (
<Button
title={"Escanear nuevamente"}
onPress={() => setScanned(false)}
buttonStyle={styles.Button}
containerStyle={styles.NewScanButton}
/>
)}
</View>
);
}
const opacity = “rgba(0, 0, 0, .8)”;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
},
barcodescaner: {
borderWidth: 3,
borderColor: "#FFF",
},
NewScanButton: {
alignSelf: "center",
top: "75%",
width: Dimensions.get("window").width * 0.5,
},
Button: {
fontSize: 20,
backgroundColor: Colors.Color_OrangeAppColor,
},
qr: {
height: 230,
width: 250,
},
description: {
fontSize: 50,
marginTop: "10%",
textAlign: "center",
color: "white",
},
layerTop: {
flex: 2,
backgroundColor: opacity,
},
layerCenter: {
flex: 2,
flexDirection: "row",
},
layerLeft: {
flex: 1,
backgroundColor: opacity,
},
focused: {
flex: 3,
},
layerRight: {
flex: 1,
backgroundColor: opacity,
},
layerBottom: {
flex: 2,
backgroundColor: opacity,
},
LayerFocusedAlign: {
alignItems: "center",
justifyContent: "center",
},
});