react-native-qrcode-svg - Amazon Vega Docs

The @amazon-devices/@amazon-devices/react-native-qrcode-svg library provides support on Vega for react-native-qrcode-svg, which is a QR Code generator based on react-native-svg and javascript-qrcode. This library is system-deployed and available to React Native for Vega apps without a separate installation process. The library is deployed as an autolinking library, which your app links to at runtime. The library is guaranteed to be compatible only with the version of React Native for Vega for which it’s built. When you uplevel your app’s version of React Native for Vega, consider the best practice of upleveling its library dependencies. For more information about this library and its API, see the README.md in the official GitHub repo.

Installation

Add the JavaScript library dependency in the package.json file. Select the tab for your React Native version.

React Native 0.72
React Native 0.83

"dependencies": {
   ...
   "@amazon-devices/react-native-qrcode-svg": "~2.0.0"
}

"dependencies": {
   ...
   "@amazon-devices/react-native-qrcode-svg": "~3.0.0"
}

Due to a known issue with React Native dependencies, you must apply the following workaround: a. Open your .npmrc file in the same directory as your app’s package.json file. If the .npmrc file doesn’t exist, you can add one. b. Add the following line:

legacy-peer-deps=true

Reinstall the dependencies using the npm install command.

Examples

The following is a example of creating a QRcode using the default settings:

import QRCode from '@amazon-devices/react-native-qrcode-svg';

// Simple usage, defaults for all but the value
render() {
  return (
    <QRCode
      value="http://awesome.link.qr"
    />
  );
};

The following is a example of creating a QR code and applying some formatting:

import QRCode from '@amazon-devices/react-native-qrcode-svg';

render() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center',backgroundColor: 'white'}}>
            <QRCode value="http://amazon.com/code?cbl-code=FTV123&client=FireTvQR" ecl="L" size={300} />
        </View>
    );
};

API support

Component API

Prop	Description	Default
`size`	Size of rendered image in pixels.	`100`
`value`	String value of the QR code. Can also accept an array of segments as defined in Manual mode. For example, `[{ data: 'ABCDEFG', mode: 'alphanumeric' }, { data: '0123456', mode: 'numeric' }, { data: [253,254,255], mode: 'byte' }]`.	`'this is a QR code'`
`logoMargin`	The logo’s distance to its wrapper.	`2`
`logoBorderRadius`	The border-radius of the logo image.	`0`
`ecl`	The error correction level.	`'M'`

Implementation details

Known issues

Your app might crash if you use the react-native-qrcode-svg library and try to import the TextEncoder property. To work around this issue, add a dependency on fast-text-encoding to your app. In your app’s package.json file, add the following code to the dependencies section:

"dependencies": {
   ...
   "fast-text-encoding": "~1.0.6"
}

In the place where you imported the react-native-qrcode-svg library, import fast-text-encoding.

import React, {useState} from 'react';
import {StyleSheet, Text, ImageBackground, View, Image} from 'react-native';
import QRCode from '@amazon-devices/react-native-qrcode-svg';
import "fast-text-encoding" // Add fast text encoding

Additional Resources

For information on other libraries, see Supported Third-Party Libraries and Services.

​Installation

​Examples

​API support

​Component API

​Implementation details

​Known issues

​Additional Resources