How to share generated qr code in React-Native?

Question

I generated QR code using 'react-native-qrcode-svg', and I want to share this svg thru email or something like that using Share module of react-native.

import { Share } from 'react-native';
import QRCode from 'react-native-qrcode-svg';
render() {
    return (
        ....
        <QRCode
                color="#090909"
                value={this.props.myCode}
                size={150}
            />
       )
    }
....

 onPress = {()=>{
        Share.share({
             message: 'How I will send QR code image?'                          
             title: 'QR code',
        });
....

I guess that I need to get svg file handle and set it to the share module, but want to see sample code.

Answer 1

Solution. Finally able to figure out how to share qr code.

import QRCode from 'react-native-qrcode-svg';
 <QRCode
          value={JSON.stringify({test: 'testdata'})}
          getRef={c => (this.svg = c)}
        />
        <TouchableOpacity onPress={this.saveQRCode}>
          <View style={styles.instructions}>
            <Text>Share QR code</Text>
          </View>
        </TouchableOpacity>


saveQRCode = () => {
    this.svg.toDataURL(this.callback);
  };



callback(dataURL) {
    console.log(dataURL);
    let shareImageBase64 = {
      title: 'React Native',
      url: `data:image/png;base64,${dataURL}`,
      subject: 'Share Link', //  for email
    };
    Share.open(shareImageBase64).catch(error => console.log(error));
  }

Answer 2

I have implemented it in my project. It is working properly. Please follow below steps

1. install react-native-qrcode-image

   npm install git+https://github.com/Kishanjvaghela/react-native-qrcode-image.git --save

2. Install react-native-share

   npm install react-native-share --save

3. Link it with app

   react-native link react-native-share

4. Use QRCode in your component

   import QRCode from 'react-native-qrcode-image';
   import Share from 'react-native-share';
   
   class Dashboard extends React.Component {
     static navigationOptions = {
       title: Strings.dashboardTitle
     };
   
     constructor(props) {
       super(props);
       this.qrCode = '';
     }
   
     openShareScreen() {
       if (this.qrCode) {
         const shareOptions = {
           type: 'image/jpg',
           title: '',
           url: this.qrCode
         };
         Share.open(shareOptions)
           .then(res => console.log(res))
           .catch(err => console.error(err));
       }
     }
   
     render() {
       const { type, address } = this.state;
       return (
         <TouchableHighlight onPress={this.openShareScreen}>
           <View>
             <QRCode
               getBase64={base64 => {
                 this.qrCode = base64;
               }}
               value={address}
               size={150}
               bgColor="#FFFFFF"
               fgColor="#000000"
             />
           </View>
         </TouchableHighlight>
       );
     }
   }
   
   export default Dashboard;