react-native-qr-svg 📱

A QR Code generator for React Native based on react-native-svg. Effortlessly create QR codes with a style reminiscent of modern designs.


Installation 🚀

Start by installing the necessary packages:
``sh
yarn add react-native-svg react-native-qr-svg
`

Overview 🌟

This library provides a straightforward way to generate QR codes within React Native applications. The QR codes produced have a modern aesthetic, perfect for various design contexts.

Customization 🎨

This library allows for easy customization of QR codes, enabling developers to adjust dot color, background color, frame size, and content within the code.

Example 🖼️

Props

| Property | Description | Type | Default Value |
|-----------------------------|--------------------------------------------------------------|----------------------------------------------|-------------------|
| value | The string to be converted into a QR code. | string | (Required) |
| frameSize | The size of the frame in which the QR code will fit. | number | (Required) |
| contentCells | The number of content cells in the QR code. | number | 6 |
| errorCorrectionLevel | The error correction level for the QR code. | low, medium, quartile, high, L, M, Q, H, M | M |
| backgroundColor | The background color of the QR code. | string | '#ffffff' |
| dotColor | The color of the dots (circles) in the QR code. | string | '#000000' |
| style | Style for the container of the QR code. | StyleProp | |
| contentBackgroundRectProps| Props for the background rectangle of the QR code content. | RectProps | |
| content | Additional content to be rendered within the QR code. | React.ReactNode | |
| contentStyle | Style for the additional content within the QR code. | StyleProp | |
| figureCircleProps | Props for the circular figures within the QR code. | CircleProps | |
| figurePathProps | Props for the path figures within the QR code. | PathProps | |
| renderer | Custom renderer for rendering QR code figures. | CustomRenderer | defaultRenderer |
| gradientColors | Array of colors for gradient fill of the QR code. | ColorValue[] | |
| gradientProps | Props for configuring the gradient of the QR code. | LinearGradientProps | |




Example 🛠️

Implement QR codes easily in your React Native app:

Full example use can find here.
`js
import React from 'react';

import { StyleSheet, View, Text } from 'react-native';
import {
QrCodeSvg,
plainRenderer,
} from 'react-native-qr-svg';

const SIZE = 170;
const CONTENT = 'Hello world!';

export default function App() {
return (


style={styles.qr}
value={CONTENT}
frameSize={SIZE}
contentCells={5}
content={👋}
contentStyle={styles.box}
/>
style={styles.qr}
gradientColors={['#0800ff', '#ff0000']}
value={CONTENT}
frameSize={SIZE}
/>
style={styles.qr}
value={CONTENT}
frameSize={SIZE}
contentCells={5}
content={💻}
dotColor="#ffffff"
backgroundColor="#000000"
contentStyle={styles.box}
/>
style={styles.qr}
renderer={plainRenderer}
value={CONTENT}
frameSize={SIZE}
/>
style={styles.qr}
renderer={customRenderer}
value={CONTENT}
frameSize={SIZE}
/>


);
}

const styles = StyleSheet.create({
root: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
content: {
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
justifyContent: 'center',
},
box: {
alignItems: 'center',
justifyContent: 'center',
},
icon: {
fontSize: 20,
},
qr: {
padding: 15,
},
});
``

Contributing 🤝

Want to contribute? Check out the contributing guide to learn how you can be a part of this project's development.

License

This project is licensed under the MIT License.

---

Made with create-react-native-library