Added a rough version of sharing and importing quotes (importing not implemented)

android/app/src/main/java/com/quoteit/MainApplication.java

@@ -4,6 +4,8 @@
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.gevorg.reactlibrary.RNQrGeneratorPackage;
+import com.reactnativecommunity.webview.RNCWebViewPackage;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;

android/settings.gradle

@@ -1,4 +1,8 @@
 rootProject.name = 'quoteit'
+include ':rn-qr-generator'
+project(':rn-qr-generator').projectDir = new File(rootProject.projectDir, '../node_modules/rn-qr-generator/android')
+include ':react-native-webview'
+project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
 includeBuild('../node_modules/react-native-gradle-plugin')

ios/Podfile

@@ -19,6 +19,10 @@ target 'quoteit' do
     :app_path => "#{Pod::Config.instance.installation_root}/.."
   )
 
+  pod 'react-native-webview', :path => '../node_modules/react-native-webview'
+
+  pod 'RNQrGenerator', :path => '../node_modules/rn-qr-generator'
+
   target 'quoteitTests' do
     inherit! :complete
     # Pods for testing

package.json

@@ -20,6 +20,7 @@
     "@react-navigation/stack": "^6.2.1",
     "react": "17.0.2",
     "react-native": "0.68.2",
+    "react-native-canvas": "^0.1.39",
     "react-native-gesture-handler": "^2.4.2",
     "react-native-haptic-feedback": "^1.13.1",
     "react-native-iap": "^12.7.3",
@@ -30,6 +31,8 @@
     "react-native-splash-screen": "^3.3.0",
     "react-native-svg": "^12.3.0",
     "react-native-view-shot": "^3.1.2",
+    "react-native-webview": "^12.1.0",
+    "rn-qr-generator": "^1.3.1",
     "shuffle-array": "^1.0.1"
   },
   "devDependencies": {

src/components/InteractiveQuote.js

@@ -13,20 +13,40 @@ import Share from "react-native-share"
 
 import Storage from "../scripts/storage"
 
+import Canvas from "react-native-canvas"
+
 import { colors, screen } from "../constants"
+import { embedImage } from "../scripts/embedImage"
 
 const InteractiveQuote = ({ navigation, quote, quotee, timestamp, font, color, scale, favorite, renderHeight, last, onMutate }) => {
+    const [canvas1, setCanvas1] = useState(null)
+    const [canvas2, setCanvas2] = useState(null)
     const sharableImageRef = useRef()
+    const handleEmbed1 = cnvs => {
+        if (!cnvs) return
+        setCanvas1(cnvs)
+    }
+
+    const handleEmbed2 = cnvs => {
+        if (!cnvs) return
+        setCanvas2(cnvs)
+    }
+
 
     const handleShare = () => {
         captureRef(sharableImageRef, {
             format: "jpg"
         }).then(url => {
-            try {
-                Share.open({ url, failOnCancel: false })
-            } catch(error){
-                console.warn(error)
-            }
+
+            embedImage(url, quote, quotee, canvas1, canvas2).then(imgUrl => {
+                try {
+                    Share.open({ imgUrl, failOnCancel: false })
+                } catch (error) {
+                    console.warn(error)
+                }
+            })
+
+
         })
     }
 
@@ -76,6 +96,8 @@ const InteractiveQuote = ({ navigation, quote, quotee, timestamp, font, color, s
 
     return (
         <TouchableWithoutFeedback>
+            <Canvas ref={handleEmbed1} style={{ backfaceVisibility: "hidden" }} />
+            <Canvas ref={handleEmbed2} style={{ backfaceVisibility: "hidden" }} />
             <View style={{ ...styles.container, borderBottomWidth: last ? 0 : 4 }}>
                 <View ref={sharableImageRef} style={{ ...styles.graphicContainer, height: renderHeight + 40 }}>
                     <StaticQuoteGraphic quote={quote} quotee={quotee} timestamp={timestamp} font={font} color={color} scale={scale} renderHeight={renderHeight} />
@@ -136,7 +158,8 @@ const styles = StyleSheet.create({
         fontSize: 14,
         fontWeight: "700",
         color: colors.extraLight
-    }
+    },
+
 })
 
 export default InteractiveQuote

src/scripts/embedImage.js

@@ -0,0 +1,108 @@
+import RNQRGenerator from 'rn-qr-generator';
+import { ImageData } from 'react-native-canvas';
+import Image from "react-native"
+
+// Implementation of https://github.com/elis/ImageHash/blob/master/main.js
+
+export const embedImage = (image, quote, quotee, canvas1, canvas2) => {
+
+    let result;
+
+    RNQRGenerator.generate({
+        value: quote + ";" + quotee,
+        height: 100,
+        width: 100,
+    }).then(embedImg => {
+
+        canvas.height = Image.getSize(image).height
+        canvas.width = Image.getSize(image).width
+
+        const ctx1 = canvas1.getContext("2d")
+
+        ctx1.drawImage(image, 0, 0)
+
+        ctx.getImageData(0, 0, canvas.width, canvas.height).then((originalData) => {
+
+
+            canvas2.height = embedImg.height
+            canvas2.width = embedImg.width
+            const ctx2 = canvas2.getContext("2d")
+
+
+            ctx2.drawImage(embedImg.uri, 0, 0)
+
+            ctx.getImageData(0, 0, canvas.width, canvas.height).then((embedData) => {
+                let blackCount = 0;
+                let whiteCount = 0;
+
+                for (let i = 0; i < embedData.data.length; i++) {
+
+                    for (let j = 0; j < embedData.data.height; j++) {
+                        const idx = (i + j * embedData.data.width) * 4;
+
+                        const { r, g, b } = {
+                            r: embedData.data[idx],
+                            g: embedData.data[idx + 1],
+                            b: embedData.data[idx + 2]
+                        }
+
+                        const { or, og, ob } = {
+                            or: originalData.data[idx],
+                            og: originalData.data[idx + 1],
+                            ob: originalData.data[idx + 2]
+                        }
+
+                        const isBlack = (r <= 50) && (g <= 50) && (b <= 50)
+                        if (isBlack) ++blackCount;
+                        else ++whiteCount;
+
+
+                        const isOdd = ((or + og + ob) % 2);
+
+                        const fixedPixel = fixPixel([or, og, ob], isOdd)
+
+
+
+                        embedData.data[idx + 0] = fixedPixel[0];
+                        embedData.data[idx + 1] = fixedPixel[1];
+                        embedData.data[idx + 2] = fixedPixel[2];
+
+                    }
+
+                }
+
+                const data = Object.values(embedData.data);
+                const imgData = new ImageData(canvas2, data, 0, 0);
+                ctx1.putImageData(imgData, 0, 0)
+
+                result = ctx1.toDataURL("image/jpeg")
+            })
+        })
+
+    }).catch(error => console.error("Cannot generate QR code", error))
+
+    return result;
+}
+
+
+const fixPixel = (pixel, needOdd) => {
+    const r = pixel[0], g = pixel[1], b = pixel[2];
+
+    const isOdd = !((r + g + b) % 2);
+
+    if ((needOdd && !isOdd) || (!needOdd && isOdd)) {
+        if (r <= g && r <= b) {
+            if (r == 0) r++;
+            else r--;
+        }
+        else if (g <= r && g <= b) {
+            if (g == 0) g++;
+            else g--;
+        } else if (b <= r && b <= g) {
+            if (b == 0) b++;
+            else b--;
+        }
+
+    }
+    return [r, g, b];
+}

src/scripts/readEmbed.js

@@ -0,0 +1,88 @@
+import RNQRGenerator from 'rn-qr-generator';
+
+export const readEmbed = (image, canvas) => {
+
+    let qrData;
+
+    canvas.height = Image.getSize(image).height
+    canvas.width = Image.getSize(image).width
+
+    const ctx = canvas.getContext("2d")
+
+    ctx.drawImage(image, 0, 0)
+
+    ctx.getImageData(0, 0, canvas.width, canvas.height).then((imgData) => {
+
+        for (let i = 0; i < canvas.width; i++) {
+            for (let j = 0; j < canvas.height; i++) {
+                const idx = (i + j * canvas.width) * 4;
+
+                const { r, g, b } = {
+                    r: data.data[idx],
+                    g: data.data[idx + 1],
+                    b: data.data[idx + 2]
+                }
+
+                var isOdd = !!((r + g + b) % 2);
+
+                imageData.data[idx + 0] = isOdd ? 255 : 0;
+                imageData.data[idx + 1] = isOdd ? 255 : 0;
+                imageData.data[idx + 2] = isOdd ? 255 : 0;
+            }
+        }
+
+        const data = Object.values(imgData.data);
+        const iData = new ImageData(canvas, data, 0, 0);
+        ctx.putImageData(iData, 0, 0)
+
+        qrData = canvas.toDataURL("image/png")
+
+
+
+
+
+
+
+    })
+
+    return qrData;
+
+
+}
+
+export const extractInfo = (image, canvas) => {
+    let result = {
+        qoute: "",
+        quotee: "",
+    };
+    readEmbed(image, canvas).then((qrData) => {
+        RNQRGenerator.detect({
+            uri: qrData,
+        })
+            .then(response => {
+                const { values } = response; // Array of detected QR code values. Empty if nothing found.
+
+                if (values.length) {
+                    const val = values[0]
+
+                    const splitIndex = val.lastIndexOf(";")
+
+                    const quote = val.substring(0, splitIndex)
+                    const quotee = val.substring(splitIndex + 1)
+
+                    result = {
+                        quote,
+                        quotee
+                    }
+                }
+
+            })
+            .catch(error => {
+                console.log('Cannot detect QR code', error);
+
+            });
+    })
+
+    return result;
+
+}