Merge pull request #227 from gedu/gedu/text_decoding_update

Author: mountiny

README.md

@@ -165,3 +165,46 @@ Read more details in the dedicated [README](/Example/README.md).
 ### Dependencies
 
 * [node-qrcode](https://github.com/soldair/node-qrcode)
+
+### Integrating react-native-qrcode-svg with React Native versions below 0.75
+This library works seamlessly with React Native versions 0.75 and above. However, if you're using an older version of React Native (below 0.75), you might need to apply a custom transformation to your project's metro.config.js file to ensure compatibility with the TextEncoder API.
+
+Here's how to configure the transformer for both Expo and React Native projects:
+
+#### Setting Up the Transformer:
+Make sure your project has a `metro.config.js` file. If not, create one at the root of your project.
+
+#### Expo Projects:
+```js
+const { getDefaultConfig } = require("expo/metro-config");
+
+module.exports = (() => {
+  const config = getDefaultConfig(__dirname);
+
+  const { transformer } = config;
+
+  config.transformer = {
+    ...transformer,
+    babelTransformerPath: require.resolve("react-native-qrcode-svg/textEncodingTransformation")
+  };
+
+  return config;
+})();
+```
+Merge the contents from your project's metro.config.js file with this config.
+
+#### React Native Projects:
+```js
+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);
+```
+

babel.config.js

@@ -1,3 +1,9 @@
 module.exports = {
-  presets: ["module:metro-react-native-babel-preset"],
+  presets: 
+  [
+    "module:metro-react-native-babel-preset", 
+    {
+      disableImportExportTransform: true,
+    },
+  ],
 };

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-qrcode-svg",
-  "version": "6.3.12",
+  "version": "6.3.13",
   "description": "A QR Code generator for React Native based on react-native-svg and javascript-qrcode.",
   "main": "index.js",
   "types": "index.d.ts",
@@ -36,7 +36,8 @@
     "src",
     "babel.config.js",
     "index.d.ts",
-    "index.js"
+    "index.js",
+    "textEncodingTransformation.js"
   ],
   "keywords": [
     "react-native",

package.json

@@ -1,5 +1,3 @@
-global.TextEncoder = require("text-encoding").TextEncoder;
-
 import React, { useMemo } from "react";
 import Svg, {
   Defs,

src/index.js

@@ -0,0 +1,41 @@
+const { readFileSync } = require('fs');
+const semver = require('semver');
+
+const fileToTransform = 'node_modules/react-native-qrcode-svg/src/index.js';
+
+const upstreamTransformer = (() => {
+    try {
+      return require("@expo/metro-config/babel-transformer");
+    } catch (error) {
+      try {
+        return require("@react-native/metro-babel-transformer");
+      } catch (error) {
+        return require("metro-react-native-babel-transformer");
+      }
+    }
+  })();
+
+function createTransformer(transformer) {
+    return async ({src, filename, ...rest}) => {
+      if (filename === fileToTransform) {
+        const packageJsonPath = require.resolve('react-native/package.json');
+        const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+        const ReactNativeVersion = packageJson.version;
+
+        // React Native versions below 0.75 do not include a global TextEncoder implementation.
+        // To ensure compatibility with these older versions, we add a polyfill using the 'text-encoding' library.
+        if (semver.lt(ReactNativeVersion, '0.75.0')) {
+            return transformer.transform({
+                src: `global.TextEncoder = require('text-encoding').TextEncoder;\n${src}`, 
+                filename, 
+                ...rest
+            });
+        }
+      }
+      return transformer.transform({src, filename, ...rest});
+    };
+}
+
+module.exports = {
+    transform: createTransformer(upstreamTransformer),
+};