Registry /
serialization / react-native-qrcode-svg
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
QRCode
✓ import QRCode from 'react-native-qrcode-svg';
✗ const QRCode = require('react-native-qrcode-svg');
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.
QRCodeProps
✓ import type { QRCodeProps } from 'react-native-qrcode-svg';
✗ import { QRCodeProps } from 'react-native-qrcode-svg';
Use `import type` for type definitions to ensure they are stripped from the JavaScript output, preventing runtime errors or unexpected behavior.
toDataURL callback
✓ svgRef.toDataURL((dataURL: string) => { /* handle dataURL */ });
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.
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;
Debug
Known issues
breakingVersion 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.fixReview QR code outputs after upgrading. If specific QR code values exhibit unexpected behavior, consult `node-qrcode` documentation for differences.
affects: >=5.0.0
breakingPeer 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.fixEnsure 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.
affects: >=5.1.1 (for ^6.5.2), >=6.x (for >=14.0.0)
gotchaThe `logoBorderRadius` prop for rounding the logo corners is currently only supported on iOS. On Android, the logo will render without rounded corners.fixBe 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.
affects: >=5.0.3
gotchaThe `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.fixIf 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.
affects: All versions
Errors
Common errors & fixes
Invariant Violation: requireNativeComponent: "RNSVGPath" was not found in the UIManager.
This error typically indicates that `react-native-svg`'s native modules are not correctly linked or installed for your project's platform.
fixFor 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`.
Error: Value too big for QR code.
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.
fixTry 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').
TypeError: Cannot read property 'toDataURL' of null
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.
fixEnsure 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. Audit
Dependencies
react-native-svgrequiredRequired for rendering QR codes as SVG graphics within React Native. It is a peer dependency.
reactrequiredStandard React peer dependency for any React Native application.
react-nativerequiredStandard React Native peer dependency.