Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Removed the text-encondig code line #227

Merged
merged 3 commits into from
Dec 27, 2024
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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");
mountiny marked this conversation as resolved.
Show resolved Hide resolved

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);
```

8 changes: 7 additions & 1 deletion babel.config.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
module.exports = {
presets: ["module:metro-react-native-babel-preset"],
presets:
[
"module:metro-react-native-babel-preset",
{
disableImportExportTransform: true,
},
],
};
5 changes: 3 additions & 2 deletions package.json
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please update lock file as well.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same for the example app.

Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -36,7 +36,8 @@
"src",
"babel.config.js",
"index.d.ts",
"index.js"
"index.js",
"textEncodingTransformation.js"
],
"keywords": [
"react-native",
Expand Down
2 changes: 0 additions & 2 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
global.TextEncoder = require("text-encoding").TextEncoder;

import React, { useMemo } from "react";
import Svg, {
Defs,
Expand Down
41 changes: 41 additions & 0 deletions textEncodingTransformation.js
Original file line number Diff line number Diff line change
@@ -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),
};
Loading