CODEWITHSUNDEEP
react-nativeqr-code
fahmijaafar
fahmijaafar

Reputation: 185

React Native Share shows 'Can't send empty messages' error by sharing viewshot

I'm trying to share a generated QR code as a viewshot on whatsapp. I've utilized react-native-view-shot and react-native-qrcode-svg for this matter as following:

import React, { useState, useRef } from 'react';
import { StyleSheet, Text, ScrollView, TextInput, TouchableOpacity, Alert, View, Share } from 'react-native';
import QRCode from 'react-native-qrcode-svg';
import ViewShot from 'react-native-view-shot';

const App = () => {

  const viewShotRef= useRef();
  async function captureViewshot(){
    const imgURI = await viewShotRef.current.capture();
    Share.share({title: 'image', url: imgURI});
  }

  const [qr, setQr] = useState(false);
  const [link, setLink] = useState('');

  const createQr = () => {
    if (link) {
      setQr(true);

    } else {
      Alert.alert(
        'Error',
        "Please insert required field"
      );
    }
  };

  return (
    <ScrollView style={styles.container}>
        <Text style={styles.headerTitle}>Create QR Code</Text>
          <View style={{flexDirection:'row'}}>
            <TextInput
              style={styles.input}
              placeholder="Insert link here.."
              onChangeText={(link) => setLink(link)}
            />
          </View>
        <TouchableOpacity style={styles.button} onPress={() => createQr()}>
          <Text style={styles.buttonTitle}>Create</Text>
        </TouchableOpacity>
        {qr && (
          <ViewShot ref={viewShotRef} style={styles.qrcontainer} options={{format:'jpg', quality: 0.8, result:'base64'}}>
              <View><QRCode value={link} size={250} />
              <Text
                style={{
                  alignSelf: 'center',
                  fontSize: 15
                }}>
                {link}
              </Text></View></ViewShot>
        )}
        {qr && (
          <View>
          <TouchableOpacity style={styles.button} onPress={captureViewshot}>
            <Text style={styles.buttonTitle}>Share QR Code</Text>
            </TouchableOpacity>
          </View>
        )}
      </ScrollView>
  );
}; export default App;

However, when I click on share button, the application keep sending no messages error. How do I modify the code so that my viewshot(the qr code) can be shared across other platform?

Thanks for your guidance.

Upvotes: 1

Views: 531

Answers (1)

Gev
Gev

Reputation: 882

You can use rn-qr-generator to generate a QR image (example). And then pass base64 of the generated QR image as url param

RNQRGenerator.generate({
  ...
  base64: true, // set true to get base64 representation of the image
})
.then(response => {
  const { base64 } = response;
  const shareOptions = {
    type: 'image/jpg',
    title: 'image',
    message: 'message'
    url: base64
  };
  Share.open(shareOptions)
    .then(res => console.log(res))
    .catch(err => console.error(err));
})

Upvotes: 1

Related Questions