{"id":11793,"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`.","status":"active","version":"6.3.21","language":"javascript","source_language":"en","source_url":"https://github.com/Expensify/react-native-qrcode-svg","tags":["javascript","react-native","qrcode","svg","typescript"],"install":[{"cmd":"npm install react-native-qrcode-svg","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-qrcode-svg","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-qrcode-svg","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for rendering QR codes as SVG graphics within React Native. It is a peer dependency.","package":"react-native-svg","optional":false},{"reason":"Standard React peer dependency for any React Native application.","package":"react","optional":false},{"reason":"Standard React Native peer dependency.","package":"react-native","optional":false}],"imports":[{"note":"The primary component for rendering QR codes is a default export. CommonJS `require` is not recommended for modern React Native projects due to potential bundle size and tree-shaking issues.","wrong":"const QRCode = require('react-native-qrcode-svg');","symbol":"QRCode","correct":"import QRCode from 'react-native-qrcode-svg';"},{"note":"Use `import type` for type definitions to ensure they are stripped from the JavaScript output, preventing runtime errors or unexpected behavior.","wrong":"import { QRCodeProps } from 'react-native-qrcode-svg';","symbol":"QRCodeProps","correct":"import type { QRCodeProps } from 'react-native-qrcode-svg';"},{"note":"The `toDataURL` method, called via a ref, accepts a callback function that receives the generated base64 data URL string. Ensure your ref type correctly handles `QRCode` component instance.","symbol":"toDataURL callback","correct":"svgRef.toDataURL((dataURL: string) => { /* handle dataURL */ });"}],"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."},"warnings":[{"fix":"Review QR code outputs after upgrading. If specific QR code values exhibit unexpected behavior, consult `node-qrcode` documentation for differences.","message":"Version 5.0.0 changed the underlying matrix generator from `javascript-qrcode` to `node-qrcode`. While generally compatible, this could subtly alter QR code output for specific inputs or introduce different error correction behaviors. Always test thoroughly after upgrading to v5.x or higher.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Ensure your `react-native-svg` package meets the minimum peer dependency requirement specified in `package.json` for your `react-native-qrcode-svg` version. Upgrade `react-native-svg` if necessary, and re-link native modules if on older React Native versions (`npx react-native link react-native-svg`) or run `pod install` for iOS on newer versions.","message":"Peer dependency `react-native-svg` has had significant minimum version bumps (e.g., to `^6.5.2` and then `>=14.0.0`). Running with an older version of `react-native-svg` will likely result in runtime errors or compilation failures due to incompatible APIs or missing features.","severity":"breaking","affected_versions":">=5.1.1 (for ^6.5.2), >=6.x (for >=14.0.0)"},{"fix":"Be aware of this platform difference. If consistent rounded logos are critical, you may need to pre-process your logo image to include the desired border radius before passing it to the `QRCode` component, or implement platform-specific rendering.","message":"The `logoBorderRadius` prop for rounding the logo corners is currently only supported on iOS. On Android, the logo will render without rounded corners.","severity":"gotcha","affected_versions":">=5.0.3"},{"fix":"If you need the logo included in the `toDataURL` output, you will need to manually combine the QR code Data URL with your logo using a separate image manipulation library or API after both are generated, or render the QR code with the logo to an offscreen view and capture that view instead.","message":"The `toDataURL` method, used to get a base64 string of the QR code, currently does not include the embedded logo in the generated image. Only the QR code matrix is captured.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"For React Native 0.60+ (iOS): navigate to your `ios` directory and run `pod install`. For Android: ensure `new SvgPackage()` is added to `MainApplication.java`. For React Native <= 0.59: run `react-native link react-native-svg`.","cause":"This error typically indicates that `react-native-svg`'s native modules are not correctly linked or installed for your project's platform.","error":"Invariant Violation: requireNativeComponent: \"RNSVGPath\" was not found in the UIManager."},{"fix":"Try reducing the length of the `value` string, increasing the `size` prop of the `QRCode` component, or lowering the `ecl` prop (e.g., from 'H' to 'M' or 'L').","cause":"The input `value` string or data array is too large to be encoded into a QR code with the current `size` and `ecl` (Error Correction Level) settings. Higher error correction levels reduce the data capacity.","error":"Error: Value too big for QR code."},{"fix":"Ensure that the `getRef` prop correctly assigns the component instance (e.g., `getRef={(c) => (this.svg = c)}`). If calling `toDataURL` in a function, add a check `if (this.svg)` before calling the method. For functional components, use `useRef` and ensure the ref is assigned to a mutable object.","cause":"This usually happens when you try to call `this.svg.toDataURL()` before the `QRCode` component has mounted and assigned its ref, or if the ref assignment failed.","error":"TypeError: Cannot read property 'toDataURL' of null"}],"ecosystem":"npm"}