Share QR React Native

Question

I'm new in react/react native. I'm trying to share a QR Code as image. Generate QR works , but I want to share it as an image (whatsapp, bluetooth, etc).

import QRCode from 'react-native-qrcode-svg';
let svg = useRef();
//let svg = '';

<QRCode
        size={300}
        value={`${name}`}
        getRef={(c) => (svg = c)}
/>

I tried " get base64 string encode of the qrcode " from official documentation, but I just don't get it

//From Off Doc
getDataURL() {
 this.svg.toDataURL(this.callback);
}

callback(dataURL) {
  console.log(dataURL);
}

What I tried to do (all my code):

import React, { useRef } from 'react';
import QRCode from 'react-native-qrcode-svg';
const QR = ({ name }: any) => {
   let svg = useRef();

 const getDataURL = () => {
   svg.toDataURL(callback(dataURL));
   //console.log(svg);
 }


 callback(dataURL) {
   console.log(dataURL);
 }

return (
    <>
        <QRCode
            size={300}
            value={`${name}`}
            getRef={(c) => (svg = c)}
        />

        
            
        <Button onPress={getDataURL}
            title="Call Funct"
            color="#1FAAE2" />
        
    </>
    
);

get error svg.toDataURL is not a function . I have been in this for days, I also read another stackover queries with the same problem but solutions in those questions didn't work for me. Thank you in advance guys

Error toDataURL

console.log(svg)

Answer 1

I have changed a couple of things in your code and used it on a expo app where I installed react-native-qrcode-svg and react-native-svg

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, TextInput, Button } from "react-native";
import { useRef } from "react";
import QRCode from "react-native-qrcode-svg";

const QR = ({ name }: any) => {
  let svg = useRef<SVG>(null);

  const getDataURL = () => {
    svg?.toDataURL(callback);
    //console.log(svg);
  };

  function callback(dataURL: string) {
    console.log(dataURL);
  }

  return (
    <>
      <QRCode size={300} value={`${name}`} getRef={(c) => (svg = c)} />

      <Button onPress={getDataURL} title="Call Funct" color="#1FAAE2" />
    </>
  );
};
export default function App() {
  const input = useRef<TextInput>(null);

  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <StatusBar style="auto" />
      <QR />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Main changes from your code is defining the callback as a function

// you had 
 callback(dataURL) {
   console.log(dataURL);
 }
// but it should be
 function callback(dataURL) {
   console.log(dataURL);
 }
// or 
const callback = (dataURL) => {
   console.log(dataURL)
}

and doing the call properly on getDataURL

// you had

   svg.toDataURL(callback(dataURL));

// but it should be
   svg.toDataURL(callback);

After those changes clicking in the button returns the dataURL in the console as expected.

---

Old answer before question edit:

Your issue seems to be that svg is not defined when you call svg.toDataURL how are you calling the function? If you are doing that on the first render it is possible that the ref is not ready yet.

If you are doing that using a callback in a button in the screen then the issue should be around the code setting the ref.

Can you post your whole component?

Answer 2

My solution with typescript: I needed to add
'// @ts-ignore' because I used Typescript

import React,  { useRef } from 'react';
import QRCode from 'react-native-qrcode-svg';
import { TouchableOpacity, Text } from 'react-native';

export const Screen1 = ( ) => { 

const svg = useRef();

const getDataURL = () => {
    // @ts-ignore
    svg.current?.toDataURL(callback);
  };

const callback = (dataURL: string) => {
    console.log( dataURL );
}

return (
    <>
        <QRCode
            value={ "Some String"  }
            size={ 250 }
            color="black"
            backgroundColor="white"
            getRef={(c: any) => ( svg.current = c )}
        />
        <TouchableOpacity 
                activeOpacity={ 0.8 }
                style={ styles.Button }
                onPress={() => getDataURL() }
        >
             <Text style={ styles.Text }> Press </Text>
        </TouchableOpacity>
    </>


)

Answer 3

You get the function not found error when you testing it with web, test it with iOS simulator then it will work.