navigator.share (Web Share api) share React App text, not the text I put

Question

I'm using React (not React Native) and I'm trying to use Web Share Api to share some text and an url through my app. However, when I open any app to share, it changes from the text I've put to a default text from React local development.

Yes, I'm using HTTPS. Yes, I'm in a browser that supports Web Share Api (Safari 13.0.4). It does share correctly, but just not using the text I provided and yes a generic text of: "React App localhost this website was created using create-react-app"

This is the function I use to share:

const handleClick = () => {
    if (navigator.share) {
      navigator
        .share({
          title: "Something",
          text: "Hello, please come visit my website",
          url: "www.website.com.br",
        })
        .then(() => {
          console.log("Successfully shared");
        })
        .catch((error) => {
          console.error("Something went wrong", error);
        });
    }
  };

Why is React overriding my share and how can I avoid that? Here's a gif of it happening

mvaldetaro mvaldetaro · Accepted Answer · 2021-03-23T21:49:43

This is not a problem with the Web Share API or its implementation. The Notes application supports only the url attribute, and displays a sample based on the url's metadata.

navigator.share (Web Share api) share React App text, not the text I put

1 Answers