From 6dbaff003a544e75da7e34a8875beee122e968f5 Mon Sep 17 00:00:00 2001
From: William Cuba <wcubasalas@gmail.com>
Date: Tue, 3 Dec 2024 12:55:54 -0500
Subject: [PATCH] fix:
 https://github.com/rishichawda/react-native-qrcode-generator/issues/22
 https://github.com/rishichawda/react-native-qrcode-generator/issues/26

---
 lib/Canvas.js     | 87 ++++++++++++++++++++++++++++++++++-------------
 lib/QRCode.js     | 41 ----------------------
 package-lock.json |  2 +-
 package.json      |  4 +--
 4 files changed, 66 insertions(+), 68 deletions(-)

diff --git a/lib/Canvas.js b/lib/Canvas.js
index 721fb99..b59ca0f 100644
--- a/lib/Canvas.js
+++ b/lib/Canvas.js
@@ -7,7 +7,7 @@ var createReactClass = require("create-react-class");
 var { View, Platform } = require("react-native");
 var { WebView } = require("react-native-webview");
 
-function getRenderHTML(context, render, generator) {
+function getRenderHTML(context) {
   return `
     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
     <style>
@@ -16,27 +16,67 @@ function getRenderHTML(context, render, generator) {
     <canvas></canvas>
     <script>
         var canvas = document.querySelector('canvas');
-        (${render}).call(${context}, canvas);
-        (${generator}).call('', ${context} , canvas);
-    </script>"
-    `;
-}
+        function render(canvas) {
+          var ctx = canvas.getContext("2d");
+          var size = this.size;
+          var fgColor = this.fgColor;
+          var bgColor = this.bgColor;
+          canvas.width = size;
+          canvas.height = size;
+          canvas.style.left = (window.innerWidth - size) / 2 + "px";
+          if (window.innerHeight > size) {
+            canvas.style.top = (window.innerHeight - size) / 2 + "px";
+          }
+          ctx.fillRect(0, 0, size, size);
+          var cells = this.cells;
+          var cellWidth = this.size / cells.length;
+          var cellHeight = this.size / cells.length;
+          var nRoundedWidth = Math.round(cellWidth);
+          var nRoundedHeight = Math.round(cellHeight);
+          cells.forEach(function(row, rowIndex) {
+            row.forEach(function(column, columnIndex) {
+              var nLeft = columnIndex * cellWidth;
+              var nTop = rowIndex * cellHeight;
+              ctx.fillStyle = ctx.strokeStyle = column ? bgColor : fgColor;
+              ctx.lineWidth = 1;
+              ctx.fillRect(nLeft, nTop, cellWidth, cellHeight);
+              ctx.strokeRect(
+                Math.floor(nLeft) + 0.5,
+                Math.floor(nTop) + 0.5,
+                nRoundedWidth,
+                nRoundedHeight
+              );
+              ctx.strokeRect(
+                Math.ceil(nLeft) - 0.5,
+                Math.ceil(nTop) - 0.5,
+                nRoundedWidth,
+                nRoundedHeight
+              );
+            });
+          });
+        }
 
-function generateImage(context, canvas) {
-  if (!window.ReactNativeWebView.postMessage) {
-    setTimeout(function () {
-      generateImage.call(this, context, canvas);
-    }, 100);
-  } else {
-    const image = document.createElement("canvas");
-    const imageContext = image.getContext("2d");
-    image.width = context.size;
-    image.height = context.size;
-    imageContext.fillStyle = context.bgColor;
-    imageContext.fillRect(0, 0, context.size, context.size);
-    imageContext.drawImage(canvas, 0, 0);
-    window.ReactNativeWebView.postMessage(image.toDataURL());
-  }
+        function generateImage(context, canvas) {
+          if (!window.ReactNativeWebView.postMessage) {
+            setTimeout(function () {
+              generateImage.call(this, context, canvas);
+            }, 100);
+          } else {
+            const image = document.createElement("canvas");
+            const imageContext = image.getContext("2d");
+            image.width = context.size;
+            image.height = context.size;
+            imageContext.fillStyle = context.bgColor;
+            imageContext.fillRect(0, 0, context.size, context.size);
+            imageContext.drawImage(canvas, 0, 0);
+            window.ReactNativeWebView.postMessage(image.toDataURL());
+          }
+        }
+
+        render.call(${context}, canvas);
+        generateImage.call('', ${context} , canvas);
+    </script>
+    `;
 }
 
 var Canvas = createReactClass({
@@ -56,8 +96,6 @@ var Canvas = createReactClass({
 
   render() {
     var contextString = JSON.stringify(this.props.context);
-    var renderString = this.props.render.toString();
-    var generate = generateImage.toString();
     return (
       <View style={this.props.style}>
         <WebView
@@ -65,9 +103,10 @@ var Canvas = createReactClass({
           scalesPageToFit={false}
           contentInset={{ top: 0, right: 0, bottom: 0, left: 0 }}
           source={{
-            html: getRenderHTML(contextString, renderString, generate),
+            html: getRenderHTML(contextString),
             baseUrl: ""
           }}
+
           opaque={false}
           underlayColor={"transparent"}
           overScrollMode="never"
diff --git a/lib/QRCode.js b/lib/QRCode.js
index af82f10..8673d93 100644
--- a/lib/QRCode.js
+++ b/lib/QRCode.js
@@ -7,46 +7,6 @@ var Canvas = require("./Canvas.js");
 var qr = require("qr.js");
 var { View, ActivityIndicator } = require("react-native");
 
-function renderCanvas(canvas) {
-  var ctx = canvas.getContext("2d");
-  var size = this.size;
-  var fgColor = this.fgColor;
-  var bgColor = this.bgColor;
-  canvas.width = size;
-  canvas.height = size;
-  canvas.style.left = (window.innerWidth - size) / 2 + "px";
-  if (window.innerHeight > size) {
-    canvas.style.top = (window.innerHeight - size) / 2 + "px";
-  }
-  ctx.fillRect(0, 0, size, size);
-  var cells = this.cells;
-  var cellWidth = this.size / cells.length;
-  var cellHeight = this.size / cells.length;
-  var nRoundedWidth = Math.round(cellWidth);
-  var nRoundedHeight = Math.round(cellHeight);
-  cells.forEach(function(row, rowIndex) {
-    row.forEach(function(column, columnIndex) {
-      var nLeft = columnIndex * cellWidth;
-      var nTop = rowIndex * cellHeight;
-      ctx.fillStyle = ctx.strokeStyle = column ? bgColor : fgColor;
-      ctx.lineWidth = 1;
-      ctx.fillRect(nLeft, nTop, cellWidth, cellHeight);
-      ctx.strokeRect(
-        Math.floor(nLeft) + 0.5,
-        Math.floor(nTop) + 0.5,
-        nRoundedWidth,
-        nRoundedHeight
-      );
-      ctx.strokeRect(
-        Math.ceil(nLeft) - 0.5,
-        Math.ceil(nTop) - 0.5,
-        nRoundedWidth,
-        nRoundedHeight
-      );
-    });
-  });
-}
-
 function getDiff(x, y) {
   return Object.keys(x).some(value => x[value] !== y[value]);
 }
@@ -135,7 +95,6 @@ var QRCode = createReactClass({
               cells: qr(value).modules
             }}
             generateImage={this.props.getImageOnLoad}
-            render={renderCanvas}
             onLoad={this.props.onLoad}
             onLoadEnd={this.onLoadEnd}
             style={{ height: size, width: size }}
diff --git a/package-lock.json b/package-lock.json
index bd35ee4..8249dc4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-qrcode-generator",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 06a3332..d5b63d8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-qrcode-generator",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "react-native qrocode generator",
   "main": "index.js",
   "types": "index.d.ts",
@@ -24,6 +24,6 @@
     "qr.js": "^0.0.0"
   },
   "peerDependencies": {
-    "react-native-webview": "^9.0.1"
+    "react-native-webview": "^13.0.0"
   }
 }