react-native-qrcode-composer

React Native QR Code Composer

React Native QR Code Composer is an advanced, highly customizable library designed to seamlessly integrate QR codes into your React Native applications. Leveraging the robustness of qrcode and the versatility of react-native-svg, this library offers unparalleled flexibility and ease of use, ensuring your QR code implementations are both beautiful and functional.

Android	iOS

Getting Started

To install the library, you can use npm or yarn:

npm install react-native-qrcode-composer

or

yarn add react-native-qrcode-composer

Peer Dependencies

React Native QR Code Composer is designed to work seamlessly within the React Native ecosystem. However, it relies on several peer dependencies that need to be installed in your project. Ensure you have the following packages installed:

• React
• React Native
• React Native SVG

Usage

Here's a basic example of how to use the library:

import QRCode from 'react-native-qrcode-composer';
import Logo from 'assets/logo.svg';
import logo from 'assets/logo.png';

// ...

// Basic QR Code Example
<QRCode value="https://github.com/afonsograca/react-native-qrcode-composer" />

// Advanced Usage with SVG and PNG logos
<QRCode value="QR code with SVG logo" logo={Logo} />
<QRCode value="QR code with PNG logo" logo={logo} />

Props

The react-native-qrcode-composer library provides several props that you can use to customize the QR code and its appearance. These props allow you to specify the content of the QR code, its size, and the logo that appears in the center of the QR code, among other things. You can also specify a function that is called when an error occurs.

The following sections provide more details about these props and how to use them.

QRCodeProps

Property	Type	Optional	Default	Description
value	string	Yes	'QR code message'	The content to be encoded in the QR code
size	number	Yes	100	The size of the QR code in pixels
logo	LogoProp	Yes	undefined	A custom logo to be displayed at the center of the QR code
logoStyle	LogoStyle	Yes	undefined	The style of the logo
style	QRCodeStyle	Yes	undefined	The style of the QR code container
getRef	React.Ref<Svg>	Yes	undefined	A ref to the QR code SVG element for direct access
onError	(error: Error) => void	Yes	undefined	Callback function triggered if an error occurs during rendering
testID	string	Yes	'react-native-qrcode-composer'	Identification prefix for the internal parts of the component

LogoStyle

Property	Type	Optional	Default	Description
size	number	Yes	20% of the QR code size	The size of the logo in pixels
backgroundColor	string	Yes	transparent	The background color of the logo
margin	number	Yes	0	The margin around the logo in pixels
borderRadius	number	Yes	0	The border radius of the logo's corners

QRCodeStyle

Property	Type	Optional	Default	Description
color	string	Yes	black	The color of the QR code pattern
backgroundColor	string	Yes	white	The background color of the entire QR code
quietZone	number	Yes	0	The margin around the QR code
cornerRadius	number	Yes	0	The corner radius applied the QR code's quiet zone
errorCorrectionLevel	ErrorCorrectionLevel	Yes	M	The error correction level, enhancing robustness
linearGradient	[ColorValue, ColorValue]	Yes	undefined	The colors for a linear gradient effect
gradientDirection	[NumberProp, NumberProp, NumberProp, NumberProp]	Yes	['0%', '0%', '100%', '100%']	The directions for gradient application
detectionMarkerOptions	DetectionMarkerOptions	Yes	undefined	Options for styling the detection markers
patternOptions	PatternOptions	Yes	undefined	Options for modifying the QR pattern

DetectionMarkerOptions

Property	Type	Optional	Default	Description
connected	boolean	Yes	true	Indicates if the blocks that make up the marker are connected
cornerRadius	number	Yes	0	Corner radius applied to the detection markers. Note: This does not take precedence over outerCornerRadius or innerCornerRadius
outerCornerRadius	number	Yes	0	Specific corner radius for the outer part of the markers
innerCornerRadius	number	Yes	0	Specific corner radius for the inner part of the markers

PatternOptions

Property	Type	Optional	Default	Description
connected	boolean	Yes	false	Indicates if the blocks in the QR code pattern are connected
cornerRadius	number	Yes	0	Corner radius for each block in the QR code pattern

Try it out

We have provided an example app for you to try out the library. You can find it in the /example directory of the repository. To run the example app, navigate to its directory and run:

yarn
yarn start

Contributing

Interested in contributing? Check out how you can make a difference in our contributing guide.

Please note that this project is adheres to a Contributor Code of Conduct. By participating in it you agree to abide by its terms.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

This project owes its gratitude to:

• The developers of qrcode and react-native-svg for creating such robust foundations.
• react-native-qrcode-svg for initial inspiration.
• All the contributors who have helped extend and maintain this library.
• The community testers who provided valuable feedback.

Changelog

[0.2.0] - 2024-06-21

Added

• The ability to add a corner radius to the QR code's quiet zone