Styling the BarCodeScanner

#1

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?

0 Likes

#2

Do you have a picture of what you want it to look like?

0 Likes

#3

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:

0 Likes

#4

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.

0 Likes

#5

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!

1 Like

#6
0 Likes

#7

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?)

0 Likes

#8

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:

4 Likes