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
},
});
@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?

@LuuCongQuangVu
Copy link

LuuCongQuangVu commented Aug 22, 2022

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