66 lines
1.5 KiB
JavaScript
66 lines
1.5 KiB
JavaScript
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(() => {
|
|
try {
|
|
return generateQrMatrix({ value, errorCorrectionLevel });
|
|
} catch (error) {
|
|
console.error("qr.code.generate.error", error);
|
|
return { matrix: [] };
|
|
}
|
|
}, [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;
|