react-native-qrcode-component v1.0.1

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

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