{"library":"react-native-qrcode-svg","title":"React Native QR Code SVG Generator","description":"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`.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-qrcode-svg"],"cli":null},"imports":["import QRCode from 'react-native-qrcode-svg';","import type { QRCodeProps } from 'react-native-qrcode-svg';","svgRef.toDataURL((dataURL: string) => { /* handle dataURL */ });"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { Component } from 'react';\nimport { View, Text, TouchableOpacity, Alert, StyleSheet } from 'react-native';\nimport QRCode from 'react-native-qrcode-svg';\n\nclass QRCodeGenerator extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      qrValue: 'https://checklist.day/example-qr-code',\n      dataURL: '',\n    };\n    this.svg = null; // Ref to the QRCode component\n  }\n\n  // Callback for when the data URL is generated\n  callback = (dataURL) => {\n    console.log('Generated Data URL (first 100 chars):', dataURL.substring(0, 100) + '...');\n    this.setState({ dataURL });\n    Alert.alert('QR Code Data URL Generated', 'Check console for base64 string.');\n  };\n\n  // Function to trigger data URL generation\n  generateDataURL = () => {\n    if (this.svg) {\n      // The toDataURL method does not include the logo by default.\n      this.svg.toDataURL(this.callback);\n    } else {\n      Alert.alert('Error', 'QR Code ref not available. Ensure component is mounted.');\n    }\n  };\n\n  render() {\n    // For a local image, ensure the path is correct, e.g., require('../assets/logo.png');\n    // For this example, we'll use a placeholder for `logo` prop\n    const logoPlaceholder = { uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=' }; // Tiny transparent base64 image\n\n    return (\n      <View style={styles.container}>\n        <Text style={styles.title}>Dynamic QR Code Example</Text>\n        <QRCode\n          value={this.state.qrValue}\n          size={250}\n          color=\"#003366\" \n          backgroundColor=\"#F0F8FF\" \n          enableLinearGradient={true}\n          linearGradient={['#0000FF', '#ADD8E6']} \n          gradientDirection={[0, 0, 1, 1]} \n          logo={logoPlaceholder} \n          logoSize={50}\n          logoBorderRadius={10} \n          logoBackgroundColor=\"transparent\"\n          quietZone={10}\n          ecl=\"H\" \n          getRef={(c) => (this.svg = c)}\n          onError={(error) => console.error('QR Code rendering error:', error)}\n        />\n        <TouchableOpacity\n          onPress={this.generateDataURL}\n          style={styles.button}>\n          <Text style={styles.buttonText}>Get QR Code Data URL</Text>\n        </TouchableOpacity>\n        {this.state.dataURL ? (\n          <Text style={styles.dataUrlStatus}>\n            Data URL generated (check console for full string).\n          </Text>\n        ) : null}\n      </View>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: 20,\n    backgroundColor: '#fff',\n  },\n  title: {\n    fontSize: 20,\n    fontWeight: 'bold',\n    marginBottom: 25,\n    color: '#333',\n  },\n  button: {\n    marginTop: 30,\n    paddingVertical: 12,\n    paddingHorizontal: 25,\n    backgroundColor: '#007bff',\n    borderRadius: 8,\n    elevation: 2,\n  },\n  buttonText: {\n    color: 'white',\n    fontSize: 16,\n    fontWeight: '600',\n  },\n  dataUrlStatus: {\n    marginTop: 20,\n    fontSize: 14,\n    color: '#555',\n    textAlign: 'center',\n  },\n});\n\nexport default QRCodeGenerator;\n","lang":"typescript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}