share modal

src/components/QrCode.js

@@ -0,0 +1,61 @@
+import React, { useMemo } from "react";
+import { View } from "react-native";
+import Svg, { Rect } from "react-native-svg";
+import { generateQrMatrix } from "../utils/generateQrMatrix";
+
+const DEFAULT_SIZE = 220;
+
+const QrCode = ({
+  value,
+  size = DEFAULT_SIZE,
+  color = "#FFFFFF",
+  backgroundColor = "transparent",
+  errorCorrectionLevel = "M",
+}) => {
+  const { matrix } = useMemo(() => {
+    return generateQrMatrix({ value, errorCorrectionLevel });
+  }, [value, errorCorrectionLevel]);
+
+  const cellSize = useMemo(() => {
+    if (!matrix || !matrix.length) {
+      return 0;
+    }
+    return size / matrix.length;
+  }, [matrix, size]);
+
+  return (
+    <View
+      style={{
+        width: size,
+        height: size,
+        backgroundColor,
+      }}
+    >
+      <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        {matrix.map((row, rowIndex) => {
+          return row.map((isDark, colIndex) => {
+            if (!isDark) {
+              return null;
+            }
+
+            const key = `${rowIndex}-${colIndex}`;
+
+            return (
+              <Rect
+                key={key}
+                x={colIndex * cellSize}
+                y={rowIndex * cellSize}
+                width={cellSize}
+                height={cellSize}
+                fill={color}
+              />
+            );
+          });
+        })}
+      </Svg>
+    </View>
+  );
+};
+
+export default QrCode;
+