Skip to main content

Advanced Usage

Welcome to the advanced usage guide for @masumdev/rn-qrcode and @masumdev/rn-qrcode-scanner packages. In this section, we'll explore more sophisticated implementations and features of both packages.

QRCode @masumdev/rn-qrcode Advanced Usage​

Performance Optimization Tips​

  • Size Optimization: Choose appropriate QR code size based on scanning distance and device capabilities
  • Error Correction: Use lower error correction levels (L or M) for simple data to improve generation speed
  • Caching: Implement caching mechanisms for frequently used QR codes
  • Lazy Loading: Consider lazy loading for QR codes not immediately visible

Best Practices​

  • Content Length: Keep QR code content concise to maintain readability
  • Testing: Always test QR codes across different devices and lighting conditions
  • Contrast: Maintain high contrast between QR code and background colors
  • Error Handling: Implement proper error handling for invalid inputs

Styling​

Design Principles​

  • Clarity: Ensure QR code elements are clearly defined
  • Contrast Ratio: Maintain minimum 3:1 contrast ratio
  • Size Balance: Balance between aesthetics and scannability

Variant qrcode builtin​

import { QRCode } from '@masumdev/rn-qrcode';
import { View } from 'react-native';

const CustomQRCode = () => {
  const qrValue = 'URL_ADDRESS.example.com';
  return (
    <View>
      <QRCode
        value={qrValue}
        size={200}
        color="black"
        backgroundColor="white"
        variant="WITH_LOGO" // default is BASIC
        />
    </View>
  )
}
export default CustomQRCode;
info

Choose from a range of predefined templates to quickly style your QR code.

ValueDescriptionVisual Effect
'BASIC'Simple, basic QR codeMinimalistic, clean
'TRIANGLE'Triangle-shaped QR codeTriangular, elegant
'HEART'Heart-shaped QR codeHearty, romantic
'DOT'Dotted QR code patternModern, minimalist
'WITH_LOGO'QR code with centered logoProfessional, branded
'RAIN'Rainy QR code with falling piecesRainy, atmospheric
'LINEAR_GRADIENT'Linear gradient colored QR codeSmooth, colorful
'RADIAL_GRADIENT'Radial gradient colored QR codeDynamic, radiant
'IMAGE_BACKGROUND'QR code with image backgroundCreative, unique

Custom qrcode​

import { QRCode } from '@masumdev/rn-qrcode';
import { View } from'react-native';
const CustomQRCode = () => {
  const qrValue = 'URL_ADDRESS.example.com';
  return (
    <View>
      {/* Rain Effect */}
        <View>
          <QRTitle title="Rain Qr Code" />
          <QRCode
            value="Rain Qr Code"
            size={qrSize}
            color="#2074a7"
            version={2}
            eye={{
              topLeft: {
                shape: 'square',
                size: {
                  center: 1.2,
                  inner: 1.3,
                },
                radius: {
                  radiusOuter: 20,
                  radiusInner: 13,
                  radiusCenter: 10,
                },
              },
              topRight: {
                shape: 'square',
                size: {
                  center: 1.2,
                  inner: 1.3,
                },
                radius: {
                  radiusOuter: 20,
                  radiusInner: 13,
                  radiusCenter: 10,
                },
              },
              bottomLeft: {
                shape: 'square',
                size: {
                  center: 1.2,
                  inner: 1.3,
                },
                radius: {
                  radiusOuter: 20,
                  radiusInner: 13,
                  radiusCenter: 10,
                },
              },
            }}
            piece={{
              shape: 'rain',
              size: 1,
            }}
            includeBackground
          />
        </View>
    </View>
  )
}
tip

Customize the appearance of your QR code by choosing from a range of predefined templates or creating your own custom styles.

Custom qrcode builtin with variant​

import { QRCode } from '@masumdev/rn-qrcode';
import { View } from'react-native';
const CustomQRCode = () => {
  return (
    <View>
          <QRTitle title="Triangle Qr Code" />
          <QRCode
            value="Triangle Qr Code"
            variant="WITH_LOGO" // if add this variant, then you can add logo
            logo={{
              source: require('./assets/logo.png'), // Replace with your logo image, overrden by variant
            }}
            piece={{
              shape: 'triangle',
            }}
            color="#DAA520"
            eye={{
              topLeft: { shape: 'triangle' },
              topRight: { shape: 'triangle' },
              bottomLeft: { shape: 'triangle' },
            }}
            size={qrSize}
            includeBackground
          />
        </View>
  )
}
export default CustomQRCode;
tip

Customize the appearance of your QR code by choosing from a range of predefined templates or creating your own custom styles.

Advanced Customization​

Gradient Configuration​

import { QRCode } from '@masumdev/rn-qrcode';
import { View } from 'react-native';

const GradientQRCode = () => {
  return (
    <View>
      <QRCode
        value="https://example.com"
        size={200}
        variant="LINEAR_GRADIENT"
        gradient={{
          type: 'linear',
          colors: ['#FF0080', '#7928CA'],
          rotation: 45,
        }}
        eye={{
          topLeft: { shape: 'circle', color: '#FF0080' },
          topRight: { shape: 'circle', color: '#7928CA' },
          bottomLeft: { shape: 'circle', color: '#FF0080' },
        }}
      />
    </View>
  );
};

Advanced Eye Patterns​

const CustomEyeQRCode = () => {
  return (
    <QRCode
      value="https://example.com"
      size={250}
      eye={{
        topLeft: {
          shape: 'rounded',
          size: { inner: 1.5, outer: 1.2 },
          color: '#2074a7',
        },
        topRight: {
          shape: 'diamond',
          size: { inner: 1.5, outer: 1.2 },
          color: '#2074a7',
        },
        bottomLeft: {
          shape: 'leaf',
          size: { inner: 1.5, outer: 1.2 },
          color: '#2074a7',
        },
      }}
    />
  );
};

Performance Optimization​

  • Use appropriate error correction levels based on your use case
  • Implement caching for frequently used QR codes
  • Consider lazy loading for multiple QR codes
  • Optimize image assets used in logos or backgrounds

Accessibility Considerations​

  • Maintain sufficient contrast ratios (minimum 4.5:1)
  • Provide alternative text for QR codes
  • Ensure adequate touch target size for interactive elements
  • Support screen reader compatibility
tip

When using multiple components, make sure to properly handle the scroll events for each component.

QRCodeScanner @masumdev/rn-qrcode-scanner Advanced Usage​

Scanner Configuration Best Practices​

  • Camera Resolution: Choose appropriate resolution based on device capabilities
  • Frame Rate: Balance between performance and scanning accuracy
  • Scanning Area: Define optimal scanning area for better user experience
  • Error Handling: Implement robust error handling for various scenarios

Advanced Scanning Features​

  • Multi-Format Support: Handle different QR code formats
  • Batch Scanning: Process multiple QR codes in sequence
  • Custom Validation: Implement complex validation rules
  • Performance Optimization: Optimize scanning for different conditions

Advanced Scanner Implementation​

Batch Scanning with Validation​

import {
  OnSuccessfulScanProps,
  QRCodeScanner,
  QRCodeValidator,
} from '@masumdev/rn-qrcode-scanner';
import { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';

const QRCodeScannerScreen = () => {
  const [scannedMember, setScannedMember] = useState<string | null>(null);

  const handleSuccessfulScan = (data: OnSuccessfulScanProps) => {
    if (data.code) {
      setScannedMember(data.code);
    }
    console.log(data);
  };

  const validateQRCode: QRCodeValidator = (code: string) => {
    Example: Only accept URLs starting with https://
    if (code.startsWith('https://')) {
      return { valid: true, code };
    }

    // Example: Accept product codes with specific format
    if (/^PROD-\d{6}$/.test(code)) {
      return { valid: true, code };
    }

    if (code) {
      return { valid: true, code, message: 'Success' };
    }

    return {
      valid: false,
      message:
        'Invalid QR code format. Expected HTTPS URL or product code (PROD-XXXXXX).',
    };
  };

  return (
    <View style={StyleSheet.absoluteFill}>
      <QRCodeScanner
        // Core functionality
        core={{
          onSuccessfulScan: handleSuccessfulScan,
          validate: validateQRCode,
        }}
        // Scanning behavior
        scanning={{
          cooldownDuration: 3000,
          scanningArea: {
            // tolerance: 80,∂
          },
        }}
        // UI Controls
        uiControls={{
          showControls: true,
          showStatus: true,
          showTorchButton: false, // We're using custom controls
        }}
        // Appearance
        appearance={{
          theme: 'light',
          overlayStyle: {
            backgroundColor: 'rgba(0, 0, 0, 0.8)',
            opacity: 0.9,
          },
          frameStyle: {
            width: 280,
            height: 280,
            borderRadius: 20,
          },
          cornerStyle: {
            color: '#00AAFF',
            width: 4,
            length: 30,
          },
          statusStyle: {
            backgroundColor: 'rgba(0, 0, 0, 0.7)',
            textColor: '#FFFFFF',
            borderRadius: 12,
            padding: 10,
            fontWeight: '600',
          },
        }}
      />

      {scannedMember && (
        <View style={styles.bottomContainer}>
          <View style={styles.infoContainer}>
            <Text style={styles.memberText}>{scannedMember}</Text>
          </View>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  bottomContainer: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
  },
  infoContainer: {
    backgroundColor: 'white',
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    padding: 24,
  },
  memberText: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 8,
  },
});

export default QRCodeScannerScreen;
Video Tutorial