qr code - Generate Qr using device id in react native

Question

I'm trying to Generate Qr code based on user device id buut i'm getting blank output what could be the error ?

import React from "react";

import { StyleSheet, View } from "react-native";
import DeviceInfo from "react-native-device-info";
import QRCode from "react-native-qrcode-svg";
import Button from "../components/Button";

function QrGenerator() {
  let deviceId = DeviceInfo.getDeviceId();
  console.log(deviceId);
  return (
    <View style={styles.MainContainer}>
      <QRCode
        value={"999" + deviceId}
        size={250}
        bgColor="#000"
        fgColor="#fff"
      />

      <Button
        title="Back"
        style={styles.Tbutton}
        onPress={() => {
          this.props.navigation.navigate("splash");
        }}
      />
    </View>
  );
}
export default QrGenerator;

const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    margin: 10,
    alignItems: "center",
    paddingTop: 200,
  },
  Tbutton: {
    marginTop: 30,
    marginBottom: 8,
    padding: 13,
    borderRadius: 10,
  },
});

also another in my program there is error that is Invariant Violation: Native module cannot be null. i tied to delete node module and re install but getting same error.

Answer 1

You can use rn-qr-generator module to create QRCode Image with a given string. To generate a QRCode image with an object just do something like this

import RNQRGenerator from 'rn-qr-generator';
 
RNQRGenerator.generate({
  value: deviceId,
  height: 100,
  width: 100,
  base64: false,            // default 'false'
  backgroundColor: 'black', // default 'white'
  color: 'white',           // default 'black'
})
  .then(response => {
    const { uri, width, height, base64 } = response;
    this.setState({ imageUri: uri });
  })
  .catch(error => console.log('Cannot create QR code', error));