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.

Usage no npm install needed!

<script type="module">
  import reactNativeQrcodeComponent from 'https://cdn.skypack.dev/react-native-qrcode-component';
</script>

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 :)