I am using React Native and having styling problems with an imported tag, QRCodeScanner. I do not know how to style the background around it and the scanner itself. Where do I change the backgroundColor, how do I make the scanner smaller, and how do I change the position of the scanner?
Here is my code:
'use strict';import React, { Component } from 'react';import { View, AppRegistry, StyleSheet, Text, TouchableOpacity, Linking} from 'react-native';import QRCodeScanner from 'react-native-qrcode-scanner';import { RNCamera as Camera } from 'react-native-camera';class ScanScreen extends Component { onSuccess = e => { Linking.openURL(e.data).catch(err => console.error('An error occured', err) ); }; render() { const {navigate} = this.props.navigation; return (<View style={styles.background}><QRCodeScanner onRead={this.onSuccess} flashMode={Camera.Constants.FlashMode.torch} topContent={<Text></Text> } bottomContent={<Text></Text> } /></View> ); }}const styles = StyleSheet.create({ centerText: { flex: 1, fontSize: 18, padding: 32, color: '#000000' }, textBold: { fontWeight: '500', color: '#000' }, buttonText: { fontSize: 21, color: 'rgb(0,122,255)' }, buttonTouchable: { padding: 16 }, background: { backgroundColor: "#5c9dff", // marginBottom: 100 }});export default ScanScreen;And this is the simulator from React Native:
Thanks.