Expo linking with custom scheme does not redirect back to app

1.3k Views Asked by At

I have followed the instructions here for integrating expo linking with custom build (I have a standalone app created with eas build). Since it is a custom build I have edited my app.json file the following way:

{
  "expo": {
    "name": "My Testing App",
    "slug": "my-testing-app",
    "scheme": "mytestingapp",

....

Then somewhere in the code, I have a page with content I would like to share. So I use react native share component:

const onShare = async () => {
    let url;
    try{
      url = await createUrl(contentId);
      console.log("url: ", url);
      //my url looks like this: mytestingapp://content?contentId=someId
    }catch(error){
      console.log("Error, while creating short url: ", error);
    }
    try {
      const result = await Share.share({
        message: "My url " + url,
        url: url
      });
    } catch (error) {
      console.log("error on share: ", error);
    }
  };

As expected, my url looks like this mytestingapp://content?contentId=someId which is ok. However, when I send it via text, obv, the text app does not recognize it as a deep link, and it is not clickable.

Am I correct in saying, that the link (in the form it is now) is usefull, only for sharing via the app? That is, if I send it via text message (on the app) it will redirect me back to the correct place, but if I send it as a text via some other app, it will do nothing?

I want to be able to send it as a url, so that when users click on this url, they get redirected to my app OR to the app store so they can download it. As per my understanding (please correct me if I am wrong), I should have a website (like hosting something like mytestingpp.com), then change the expo scheme to scheme: https, so that my url looks something like https://mytestingapp.com/content?contentId=someId, so that this url will redirect me back to my app (or to the app store).

Am I correct in my understanding? I have read too many materials and they all say that when we have stand stand-alone app, we should use a custom scheme, but obviouls custom scheme urls, are not detected as urls but as regular strings.

1

There are 1 best solutions below

0
On

As you mentioned, if you need to share content outside the app you need universal Linking not deep linking.

You should create a simple page that automatically handles deep linking with the app.

index.html

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <script src="js/platform.js"></script>
    <script src="js/script.js"></script>
    <title> TITLE HERE</title>
  </head>

  <body>
  </body>
</html>

js/script.js

const APP_STORE_LINK = "APP_APPLE_STORE_URL";
const PRAY_STORE_LINK =
  "https://play.google.com/store/apps/details?id=PACKAGE_NAME";

const WEB_LINK = "https://mytestingapp.com/content";

const APP_SCHEME = "mytestingapp://";

const launchApp = (deepLink = "", fallBack = WEB_LINK) => {
  setTimeout(function () {
    window.location.replace(fallBack);
  }, 2000);

  window.open(deepLink);
};

const getDeviceOs = () => platform.os.family.toLowerCase();

const getAppInstallLink = () => {
  const deviceOs = String(platform.os.family).toLowerCase();

  if (deviceOs.includes("ios")) {
    return APP_STORE_LINK;
  }

  if (deviceOs.includes("android")) {
    return PRAY_STORE_LINK;
  }

  return WEB_LINK;
};

window.addEventListener("load", (event) => {
  const storeLink = getAppInstallLink();
  const queryString = window.location.search;

  const deepLink = APP_SCHEME + "content" + "?" + queryString;

  return launchApp(deepLink, storeLink);
});


js/platform.js

Copy code from here - https://github.com/bestiejs/platform.js/blob/master/platform.js