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