Property 'TextEncoder' doesn't exist

[syuanlj]

[ashindiano]

I am facing the same issue too

[ZaurRza]

same error

[farm16]

@syuanlj same here, but can you provide more info regarding which version you are using. also the output of npx react-native info can help

[osamaabdalla]

This solution worked for me:

1. First, install the text-encoding package by running the following command:

   npm install --save text-encoding

2. Then, import it into the file where you are using the QRCode:

   import 'text-encoding';

this is influenced by: facebook/hermes#948 (comment)

[12ya]

created a pull request.
who can't wait for merge just change this in package.json
"react-native-qrcode-svg": "https://github.com/12ya/react-native-qrcode-svg"

[syuanlj]

This solution worked for me:

1. First, install the text-encoding package by running the following command:

   npm install --save text-encoding

2. Then, import it into the file where you are using the QRCode:

   import 'text-encoding';

this is influenced by: facebook/hermes#948 (comment)

[urvindevstree]

This solution worked for me:

Navigate to node_module/qrcode/lib/core/byte-data.js file.

1. Please update below line :
   this.data = new TextEncoder().encode(data) to this.data = stringToUtf8Uint8Array(data).

2. Add this function in same file :

function stringToUtf8Uint8Array(str) {
  const utf8 = encodeURIComponent(str)
    .replace(/%([0-9A-F]{2})/g, (_, p1) => String.fromCharCode('utf-8'));
  const arr = new Uint8Array(utf8.length);
  for (let i = 0; i < utf8.length; i++) {
    arr[i] = utf8.charCodeAt(i);
  }
  return arr;
}

[arnoldosilva]

this works for me

add transformer on metro:

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const defaultConfig = getDefaultConfig(__dirname);

const config = {
transformer: {
babelTransformerPath: require.resolve("react-native-qrcode-svg/textEncodingTransformation"),
},
};

module.exports = mergeConfig(defaultConfig, config);