Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Barcode Scanner on React Native (with expo), stylized with opaque edges
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { BarCodeScanner } from 'expo';
export default class App extends React.Component {
render() {
return (
<BarCodeScanner
onBarCodeRead={(scan) => alert(scan.data)}
style={[StyleSheet.absoluteFill, styles.container]}
>
<View style={styles.layerTop} />
<View style={styles.layerCenter}>
<View style={styles.layerLeft} />
<View style={styles.focused} />
<View style={styles.layerRight} />
</View>
<View style={styles.layerBottom} />
</BarCodeScanner>
);
}
}
const opacity = 'rgba(0, 0, 0, .6)';
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column'
},
layerTop: {
flex: 2,
backgroundColor: opacity
},
layerCenter: {
flex: 1,
flexDirection: 'row'
},
layerLeft: {
flex: 1,
backgroundColor: opacity
},
focused: {
flex: 10
},
layerRight: {
flex: 1,
backgroundColor: opacity
},
layerBottom: {
flex: 2,
backgroundColor: opacity
},
});
@adokce
Copy link

adokce commented Aug 13, 2020

This is great, thanks

@Roshdy
Copy link

Roshdy commented Aug 15, 2020

Thanks a bunch

@JasonXD-CS
Copy link

JasonXD-CS commented Oct 1, 2020

Thank you so much!

@stasgm
Copy link

stasgm commented Oct 7, 2020

For what 'width'?

@XamuelUG
Copy link

XamuelUG commented Jun 6, 2021

Thanks.
"some border-radius on focused" ???

@rahuldasgupta
Copy link

rahuldasgupta commented Jun 27, 2021

thank you!

@IgorMing
Copy link
Author

IgorMing commented Sep 22, 2021

For what 'width'?

I just removed it, thank you!

@RonaldoAlencar
Copy link

RonaldoAlencar commented Oct 3, 2021

thank you!

@rbq10
Copy link

rbq10 commented Apr 27, 2022

How can I modify it for a square instead of rectangle?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment