react-native-qrcode-mask
v1.0.0
Published
React Native QR Code Mask Library
Downloads
231
Maintainers
Readme
react-native-qrcode-mask
React Native QR Code Mask Component for IOS and Android
Installation
yarn add react-native-qrcode-mask
or
npm install react-native-qrcode-mask
Usage
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
| |