advanced-react-native-qrcode-mask

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

---

Credits

• @Nghi-NV