sharing image, link and title using react-native-share not working

Question

I am using react-native-share to share content accross different social platform. For plain text it is working fine. But when I include image + message(contains link) + title, then it is not working.

Here is the code which I am using to do so:

 let imagePath = null;
  RNFetchBlob.config({
    fileCache: true,
  })
    .fetch('GET', FILE_URL)
    .then((resp) => {
      imagePath = resp.path();
      return resp.readFile('base64');
    })
    .then(async (base64Str) => {
      const content = `Sharing Link ${link}`;
      const base64Data = `data:image/jpeg;base64,${base64Str}`;

      const shareOption = {
        message:content,
        url: base64Data,
        title: 'This is title',
        type: 'image/jpeg',
      };
      await Share.open(shareOption);
      return RNFetchBlob.fs.unlink(imagePath);
    });
} catch (error) {
  console.error(error);
}

I tried different variations of it, what I found on SO and on other links. But non of them worked. What I've tried and didn't worked:

1. Sharing URL of images instead of base64 - Only image is shared, message got removed. And in whats app image link is not converted to image.
2. by removing message key and only passing url. (In this way image is getting shared. But it has no relevance. Because I am not able to set any kind of message or link)

I am not sure what I am missing here.

Answer 1

This is an interesting project. I have to admit up front, this is a bit of a non-answer. I apologize for that, but I wanted to let you know what I found because it seemed more useful to share my research rather than just keep it in my head and it was too big for a comment.

So I took a look at the github issues for this project to see if your issue was documented. There are 93 open issues and a lot of people complaining about varieties of things that don't work the way you would think in combination of these variables (message, base64) especially on iOS. Have you taken a look at their issue log to see if you can find better detail? Are you using iOS?

Here's a few that seem to be left open that complain about almost the exact issue you posted about. Some offer workarounds. Some lead to dead-ends. If you haven't read these, it would behoove you to get up to speed. If you do know all this, maybe I'll just leave this post up for posterity if others come across it.

https://github.com/react-native-share/react-native-share/issues/760

https://github.com/react-native-share/react-native-share/issues/966

https://github.com/react-native-share/react-native-share/issues/831

https://github.com/react-native-share/react-native-share/issues/1025