I am able to create QR Code with single value by using react-native-qrcode-svg package. But not able to add multiple values like name,email, etc.

I have tried these :

Packages:

npm install react-native-svg --save
react-native link react-native-svg
npm install react-native-qrcode-svg --save

Code for generating QR Code using single value.

import * as React from 'react';
import QRCode from 'react-native-qrcode-svg';

export default class App extends React.Component {
 render() {
  return (
    <QRCode
      value="Here I want to add name, email,etc"
    />
  );
 };
}

I want to generate something like this

I am able to create QR Code with single value by using react-native-qrcode-svg package. But not able to add multiple values like name,email, etc.

I have tried these :

Packages:

npm install react-native-svg --save
react-native link react-native-svg
npm install react-native-qrcode-svg --save

Code for generating QR Code using single value.

import * as React from 'react';
import QRCode from 'react-native-qrcode-svg';

export default class App extends React.Component {
 render() {
  return (
    <QRCode
      value="Here I want to add name, email,etc"
    />
  );
 };
}

I want to generate something like this

• javascript
• reactjs
• react-native
• svg

Share Improve this question Follow edited Jul 3, 2020 at 6:54 printfjoby asked Jul 3, 2020 at 6:04 printfjobyprintfjoby 7822 silver badges1010 bronze badges 1

• 1 What's your needs? QRcode is like a string in another style, why do you want to add many things in one QRcode? If you really need it, I may remend to input like an object or JSON style string, that let you more easily to analysis it? – 高鵬翔 Commented Jul 3, 2020 at 6:16

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

You can use rn-qr-generator module to create QRCode Image with a given string. To generate a QRCode image with an object just do something like this

import RNQRGenerator from 'rn-qr-generator';
 
RNQRGenerator.generate({
  value: JSON.stringify({ email: 'some.email.', name: 'Name' })
  height: 100,
  width: 100,
  base64: false,            // default 'false'
  backgroundColor: 'black', // default 'white'
  color: 'white',           // default 'black'
})
  .then(response => {
    const { uri, width, height, base64 } = response;
    this.setState({ imageUri: uri });
  })
  .catch(error => console.log('Cannot create QR code', error));

According to the documentation here, https://www.npmjs./package/react-native-qrcode-svg, the value can be an array:

String Value of the QR code. Can also accept an array of segments as defined in Manual mode. Ex. [{ data: 'ABCDEFG', mode: 'alphanumeric' }, { data: '0123456', mode: 'numeric' }, { data: [253,254,255], mode: 'byte' }]

Hence the code should be

import * as React from 'react';
import QRCode from 'react-native-qrcode-svg';

export default class App extends React.Component {
 render() {
  return (
    <QRCode
      value="[{ name: 'my name'},{ email: '[email protected]' }]"
    />
  );
 };
}

I never used react, but shouldn't be something like

value={`"name={name},email={email},phone={phone}"`}

enough to pute the value?

<QRCode
      value={`${email},${mdp}`}
 />

if you want to read the data:

data=result.split(",")

If the QR Generator is only taking one value, but you want an object or multiple values then just pass in one value with:

value = JSON.stringify({qrobject)}

And then just do the opposite and destructure later if possible with:

value = JSON.parse({qrobject)}

before it feeds into the final function.