as

Settings
Sign out
Notifications
Alexa
亚马逊应用商店
AWS
文档
Support
Contact Us
My Cases
新手入门
设计和开发
应用发布
参考
支持
感谢您的访问。此页面目前仅提供英语版本。我们正在开发中文版本。谢谢您的理解。

react-native-qrcode-svg

@amazon-devices/@amazon-devices/react-native-qrcode-svg provides support on Vega for react-native-qrcode-svg which is a QR Code generator based on react-native-svg and javascript-qrcode.

This is a system-deployed library and is available to React Native for Vega apps without a separate installation process. It is deployed as an autolinking library which your app links to at runtime. Compatibility is guaranteed only between the library and the version of React Native for Vega for which it is built.

When you up level the version of React Native for Vega with which your app is built, it a best practice to also uplevel the version of the library on which it is dependent.

For more information about this library and its API, see the README.md in the Official GitHub repo.

Installation

  1. Add the JavaScript library dependency in the package.json file:

    Copied to clipboard.

    "dependencies": {
       ...
       "@amazon-devices/react-native-qrcode-svg": "~2.0.0"
    }
    
  2. Due to a known issue with React Native dependencies, you must apply the following workaround:
    1. Open your .npmrc file in the same directory as your app's package.json file. (If the .npmrc does not exist, add one).
    2. Add the following line:

      Copied to clipboard.

      legacy-peer-deps=true
      
  3. Reinstall the dependencies using npm install command.

Examples

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

Copied to clipboard.


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:

Copied to clipboard.


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 Specifies the logo's distance to its wrapper. 2
logoBorderRadius Specifies the border-radius of logo image. 0
ecl Specifies the error correction level. 'M'

Implementation details

Known issues

Your app may 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 to the dependencies section:

Copied to clipboard.

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

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

Copied to clipboard.

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

Supported versions

Package Version Based On @amazon-devices/react-native-kepler version
2.0.x 6.2.0 2.0.x

Additional Resources

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


Last updated: Sep 30, 2025