1.0.0 • Published 4 years ago
react-native-qrcode-mask v1.0.0
react-native-qrcode-mask
React Native QR Code Mask Component for IOS and Android
Installation
yarn add react-native-qrcode-maskor
npm install react-native-qrcode-maskUsage
import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import Camera from 'react-native-camera';
import QrCodeMask from 'react-native-qrcode-mask';
function App() {
return (
<View style={styles.container}>
<Camera>
<QrCodeMask
// lineColor='green'
lineDirection='horizontal'
height={80}
edgeColor='red'
topTitle='Bar Code Scanner'
bottomTitle='Put the barcode into the box'
/>
</Camera>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingHorizontal: 16,
},
});
export default App;Property
| Property | Type | Default | Description |
|---|---|---|---|
| width | number | 260 | |
| height | number | 200 | |
| overlayOpacity | number | 0.6 | |
| showLineAnimated | boolean | true | |
| lineThick | number | 2 | |
| lineSize | number \| string | 80% | |
| lineBorderRadius | number | 2 | |
| lineColor | string | green | |
| lineAnimationDuration | number | 1500 | ms |
| lineDirection | 'vertical' \| 'horizontal' | vertical | |
| edgeWidth | number | 20 | |
| edgeHeight | number | 20 | |
| edgeColor | string | white | |
| edgeBorderWidth | number | 2 | |
| topTitle | string | undefined | |
| topTitleColor | string | white | |
| topTitleStyle | TextStyle | undefined | |
| viewTopTitleStyle | ViewStyle | undefined | |
| renderTop | () => React.ReactNode | undefined | |
| bottomTitle | string | undefined | |
| bottomTitleColor | string | white | |
| bottomTitleStyle | TextStyle | undefined | |
| viewBottomTitleStyle | ViewStyle | undefined | |
| renderBottom | () => React.ReactNode | undefined | |
| renderFrame | () => React.ReactNode | undefined |
1.0.0
4 years ago