Necessary Pigeonholing Mechanism

    advanced-react-native-qrcode-mask
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    react-native-qrcode-mask

    React Native QR Code Mask Component for IOS and Android


    CircleCI Version MIT License All Contributors PRs Welcome

    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

    Install

    npm i advanced-react-native-qrcode-mask

    DownloadsWeekly Downloads

    46

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    75.7 kB

    Total Files

    33

    Last publish

    Collaborators

    • asiripiyajanaka