react-native-qrcode-svg: Invalid QR Code
Hi,
Could anyone help me figuring out why the generation of the QR code is invalid?
Thank you!
I’m using the following dependencies:
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-qrcode-svg": "^6.0.6",
"react-native-svg": "^12.1.0",
And the code is based on this example:
import * as React from "react";
import { View, StyleSheet } from "react-native";
import SvgQRCode from "react-native-qrcode-svg";
// Simple usage, defaults for all but the value
function Simple() {
return (
<SvgQRCode
size={200}
color={"#2e78b7"}
value="Hello everyone! This is a test!"
/>
);
}
export default function QRGeneratorScreen() {
return (
<View style={styles.container}>
<View
style={{
width: "100%",
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center",
}}
>
<Simple />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "space-around",
paddingTop: 20,
alignItems: "center",
backgroundColor: "#ecf0f1",
},
});
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 1
- Comments: 18 (4 by maintainers)
Commits related to this issue
- Invalid QR code (fix) https://github.com/awesomejerry/react-native-qrcode-svg/issues/108 — committed to antennaio/react-native-qrcode-svg by antennaio 4 years ago
- Invalid QR code (fix) https://github.com/awesomejerry/react-native-qrcode-svg/issues/108 — committed to antennaio/react-native-qrcode-svg by antennaio 4 years ago
- fixed #108 invalid QR code on Android — committed to Qrysto/react-native-qrcode-svg by Qrysto 4 years ago
- fixed #108 invalid QR code on Android — committed to Qrysto/react-native-qrcode-svg by Qrysto 4 years ago
Hi, I had the same error, I could solve it by entering the library and adding the attribute:
strokeLinecap={'square'} Line 141 index.js file
this eliminates the rounded shape
and modify the algorithm in the class
./src/tranformMatrixIntoPath.js
Line 2 add const cellSize = size / matrix.length - 0.1
Line 9 add path += 'M${cellSize * j+9} ${cellSize / 2 + cellSize * i}'
this to adjust the width and Height of the squares generated by the algorithm
@EmmanuelSkapple That did the trick for me! I found it odd how the QR Code was shaped, and your solution brought it all together. Looks normal and works now. It would be great if this was the default for the package.