CODEWITHSUNDEEP
javascriptreactjsreact-nativesvg
printfjoby
printfjoby

Reputation: 78

How to generate a QR Code with multiple values like name, email, etc in React Native

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 want to generate something like this

Upvotes: 1

Views: 7098

Answers (5)

Ahmedakhtar11
Ahmedakhtar11

Reputation: 1468

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.

Upvotes: 0

Saber
Saber

Reputation: 11

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

if you want to read the data:

data=result.split(",")

Upvotes: 0

Gev
Gev

Reputation: 882

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.com', 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));

Upvotes: 2

Chilarai
Chilarai

Reputation: 1888

According to the documentation here, https://www.npmjs.com/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]' }]"
    />
  );
 };
}

Upvotes: 1

6502
6502

Reputation: 114559

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

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

enough to compute the value?

Upvotes: 0

Related Questions