React Native QR Code SVG Generator

6.3.21 · active · verified Sun Apr 19

react-native-qrcode-svg is an actively maintained library for generating QR codes directly within React Native applications. It leverages `react-native-svg` for efficient vector-based rendering and `javascript-qrcode` (or `node-qrcode` since v5.0.0) for the underlying QR matrix generation. The current stable version is 6.3.21, with a release cadence that indicates active development and feature enhancements, as seen in recent updates like v6.1.1 and v5.2.0. This package differentiates itself by offering features specific to mobile UI, such as embedding custom logos (from base64 strings or local files), supporting linear gradients for QR code styling, and providing an API to extract the QR code as a base64 Data URL. It is a robust solution for integrating scannable QR codes directly into React Native projects, without relying on webviews or complex native modules beyond `react-native-svg`.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates rendering a QR code with various styling options including gradients and a logo placeholder. It also shows how to use the `getRef` prop to access the underlying SVG component and generate a base64 Data URL of the QR code (excluding the logo) for further processing or saving.

import React, { Component } from 'react';
import { View, Text, TouchableOpacity, Alert, StyleSheet } from 'react-native';
import QRCode from 'react-native-qrcode-svg';

class QRCodeGenerator extends Component {
  constructor(props) {
    super(props);
    this.state = {
      qrValue: 'https://checklist.day/example-qr-code',
      dataURL: '',
    };
    this.svg = null; // Ref to the QRCode component
  }

  // Callback for when the data URL is generated
  callback = (dataURL) => {
    console.log('Generated Data URL (first 100 chars):', dataURL.substring(0, 100) + '...');
    this.setState({ dataURL });
    Alert.alert('QR Code Data URL Generated', 'Check console for base64 string.');
  };

  // Function to trigger data URL generation
  generateDataURL = () => {
    if (this.svg) {
      // The toDataURL method does not include the logo by default.
      this.svg.toDataURL(this.callback);
    } else {
      Alert.alert('Error', 'QR Code ref not available. Ensure component is mounted.');
    }
  };

  render() {
    // For a local image, ensure the path is correct, e.g., require('../assets/logo.png');
    // For this example, we'll use a placeholder for `logo` prop
    const logoPlaceholder = { uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=' }; // Tiny transparent base64 image

    return (
      <View style={styles.container}>
        <Text style={styles.title}>Dynamic QR Code Example</Text>
        <QRCode
          value={this.state.qrValue}
          size={250}
          color="#003366" 
          backgroundColor="#F0F8FF" 
          enableLinearGradient={true}
          linearGradient={['#0000FF', '#ADD8E6']} 
          gradientDirection={[0, 0, 1, 1]} 
          logo={logoPlaceholder} 
          logoSize={50}
          logoBorderRadius={10} 
          logoBackgroundColor="transparent"
          quietZone={10}
          ecl="H" 
          getRef={(c) => (this.svg = c)}
          onError={(error) => console.error('QR Code rendering error:', error)}
        />
        <TouchableOpacity
          onPress={this.generateDataURL}
          style={styles.button}>
          <Text style={styles.buttonText}>Get QR Code Data URL</Text>
        </TouchableOpacity>
        {this.state.dataURL ? (
          <Text style={styles.dataUrlStatus}>
            Data URL generated (check console for full string).
          </Text>
        ) : null}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 25,
    color: '#333',
  },
  button: {
    marginTop: 30,
    paddingVertical: 12,
    paddingHorizontal: 25,
    backgroundColor: '#007bff',
    borderRadius: 8,
    elevation: 2,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '600',
  },
  dataUrlStatus: {
    marginTop: 20,
    fontSize: 14,
    color: '#555',
    textAlign: 'center',
  },
});

export default QRCodeGenerator;

view raw JSON →