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

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%',
    }}
/>