README
react-native-qrcode-component
React Native component for generating and displaying qr codes. Uses js library node-qrcode for generating qr code data. Uses pure react-native solution to display generated code, does not need additional dependencies to render code on screen.
Saving code as image
Library will use react-native-view-shot to save generated code as image. If you need this feature you should install and link this library in your project.
NOTE: This is needed only if you want to save code as image, code can be generated without this dependency.
Usage
Install module:
npm install --save react-native-qrcode-component
or
yarn add react-native-qrcode-component
Import component and use it in your app:
import QRCode from 'react-native-qrcode-component';
export default function App() {
const qrRef = useRef();
const saveQrAsImg = async () => {
const uri = qrRef.current.saveImg();
console.log('QR code img uri: ', uri);
}
return (
<View>
<QRCode
value="https://github.com/msadura/react-native-qrcode-component"
size={200}
ref={qrRef}
/>
</View>
);
}
QRCode props
Props | Type | Description | Default |
---|---|---|---|
value |
string |
Value of code to be generated. | '' |
size |
Integer |
Used as height andf width of generated QR code. | 200 |
color |
string |
Qr code main color. | black |
backgroundColor |
string |
QR code background color (empty blocks). | white |
errorCorrection |
low, medium, quartile, high |
Error correction level. See node-qrcode docs for more details. | medium |
outerSpacing |
number |
Margin around generated QR code. Will also be used as spacing when saving as image | 0 |
QRCode instance methods
saveImg
- Async method to generate image out of current QR code and return temp image uri.
React Native Epicode Academy
This package is a part of React Native Epicode Academy YouTube series.
If you appreciate my work you can buy me a coffe here :)