rn-qrcode-svg
It's a React Native component to generate QRCode. It uses SVG (react-native-svg) to draw QRCode.
How to install this package
Because this is a React Native component, you must install it on a React Native project. Beside that, you must also install
react-native-svg package. You may use the following console command:
npm i react-native-svg rn-qrcode-svg
For iOS, there is another step:
cd ios && pod install && cd ..
Component Props
| Name | Type | Description | Default Value |
|---|---|---|---|
| bgColor | color value | The light color (canvas color) | "transparent" |
| ecl | enum("L", "M", "Q", "H") | Error correction level for QR code:
...
import QRCode, {ECL} from 'rn-qrcode-svg';
...
<QRCode ecl={ECL.M} ... />
|
"H" |
| fgColor | color value | The dark color (dots color) | "black" |
| logo | Object:
{
asBackground?: boolean,
centerized?: boolean,
height?: number | string,
href: ImageSource | string,
opacity?: number | string,
preserveAspectRatio?: string,
width?: number | string,
x?: number | string,
y?: number | string,
}
|
It's to set the logo image that you want to place on the QRCode image. This prop value
is an object containing some properties which determine the attributes of logo. The only required
property is href. This property is to set the source of image. Almost all properties
are the same as the props of svg Image
element. Two properties which do not belong to Image element:
Need to know that we can place a logo on a QRCode image because of the existence of error correction in QRCode. But, we must still set the position and dimension of logo carefully because it can cause the QRCode cannot be read. |
|
| onError | function(errorMessage) | The handler that will be called when an error happens in generating QRCode image | It will displays an alert dialog saying "Cannot generate QR Code" and logs the error message to the console. |
| size | number | The size of QRCode image | 128 |
| value | All data that can be passed to
qr
function
|
The encoded data | Required (you must set this prop) |
| version | number range[1..40] | The size of QRCode. Different from size prop, it's the size of data
matrix. There are 40 sizes available: the smallest (version 1) is 21x21 and the largest
(vesrsion 40) is 177x177. There will be an error if the chosen size is too small to accommodate
the encoded data. The data capacity is also affected by the error correction level (higher level
is less capacity). |
The smallest size that can accommodate the encoded data. |
Example
import React from 'react';
import {Button, SafeAreaView, StyleSheet, Text, TextInput, View} from 'react-native';
import QRCode from 'rn-qrcode-svg';
const styles = StyleSheet.create({
line: {
alignItems: 'center',
flexDirection: 'row',
marginHorizontal: 10,
marginVertical: 5,
},
main: {
backgroundColor: '#aaa',
flex: 1,
},
qrBox: {
alignItems: 'center',
justifyContent: 'center',
padding: 10,
},
text: {
borderWidth: 1,
flex: 1,
paddingVertical: 0,
},
});
export default function() {
const [value, setValue] = React.useState("https://reactnative.dev/docs"),
[size, setSize] = React.useState('128'),
[bgColor, setBgColor] = React.useState('transparent'),
[fgColor, setFgColor] = React.useState('black'),
[qrProp, setQrProp] = React.useState({value, size, bgColor, fgColor});
return <SafeAreaView style={styles.main}>
<View style={styles.line}>
<Text>{'value: '}</Text>
<TextInput value={value} onChangeText={setValue} style={styles.text} />
</View>
<View style={styles.line}>
<Text>{'size: '}</Text>
<TextInput value={size} onChangeText={setSize} style={styles.text} />
<Text>{' bgColor: '}</Text>
<TextInput value={bgColor} onChangeText={setBgColor} style={styles.text} />
<Text>{' fgColor: '}</Text>
<TextInput value={fgColor} onChangeText={setFgColor} style={styles.text} />
</View>
<Button title='Update' onPress={() => setQrProp({value, size, bgColor, fgColor})} />
<View style={styles.qrBox}>
<QRCode {...qrProp} />
</View>
</SafeAreaView>;
}Output:
<QRCode value="https://reactnative.dev/docs" logo={{href: require('./images/react-native.png')}} />
Output:
<QRCode
value="https://reactnative.dev/docs"
logo={{
href: require('./images/react-native.png'),
centerized: true,
height: 40,
width: 60,
}}
/>
Output:
<QRCode
value="https://reactnative.dev/docs"
logo={{
href: require('./images/react-native.png'),
asBackground: true,
height: '60%',
width: '60%',
x: '50%',
y: '60%',
}}
/>
