How to Generate QR Code in React Native

Last Updated on March 11, 2019.

Well, there are some third party libraries to scan qr code through your React Native mobile app but what about generating qr code in your app?

I went through some of the react native libraries when I got a requirement from a client to generate qr code inside the  mobile app.

After a research, I ended up using library react native qrcode svg. It is relatively new when compared to react native qrcode but unfortunately the latter is no more maintained by its author. Setting up react native qrcode svg is pretty straightforward.

First of all you have to install react native svg and have to link it.
npm install react-native-svg –save
react-native link react-native-svg

Then install react native qrcode svg using following command.
npm install react-native-qrcode-svg –save

Now, you can use the library as given below:

import QRCode from 'react-native-qrcode-svg';


render() {
  return (
    <QRCode
      value="https://reactnativeforyou.com"
    />
  );
};

That’s it, if you want to know about the props and details- you can check the official GitHub repository of react native qrcode svg library.

Leave a Reply

%d bloggers like this: