QRCode Generator for React Native
QR Code is quick response code which is a 2 dimensional bar code system which holds information.
In order to generate QR Code I tried two npm packages
1.react-native-qrcode-image
2. react-native-qrcode-svg
- react-native-qrcode-image worked but with some work around as its using few updated internal dependency that’s not updated.
Run these commands :
npm install — save react-native-qrcode-image
npm install — save react-native-webview
After that you will get this error
import QRCode from 'react-native-qrcode-image';
import { WebView } from 'react-native-webview' // Add these<QRCode
value={this.state.text.length > 0 ? this.state.text : "Any random string"}
size={200}
bgColor='#000000'
fgColor='#FFFFFF'/>
Then you will get this error as the node module has a class called QRCode.js. It uses a package called Buffer, but your package json doesn’t have it so
Add “buffer”: “5.0.6” in package.json
and
import { Buffer } from ‘buffer’
in QRCode.js in react-native-qrcode-image libraries.
Run the project and it will work fine. But every time you will update the node using npm install or update you have to make these changes again
2. react-native-qrcode-svg : This is the best solution I found and works like charm, so I decided to move ahead with this.
Steps to follow:
npm install react-native-qrcode-svg — save
react-native link react-native-svg
The same above code for QRCode will work and it doesn’t even need webview to be imported.
Find the github link to the project here. https://github.com/mushtaque87/ReactNative_QRCode
Next I will write an article on how to read a QR code and fetch the data out of it.
