Deep Linking not working in React Native app on Android

Question

I have setup my React Native app to use Deep Linking with expo-linking, but for some reason it just does not work on Android (yet to implement on iOS). Opening the link just opens it in the web browser, and doesn't open the app as it should. Any idea why?

app.json

"android": {
  "adaptiveIcon": {
    "foregroundImage": "./assets/adaptive-icon.png",
    "backgroundColor": "#FFFFFF"
  },
  "package": "com.example.myapp",
  "intentFilters": [
    {
      "action": "VIEW",
      "data": [
        {
          "scheme": "https",
          "host": "testlink.com",
        }
      ],
      "category": [
        "BROWSABLE",
        "DEFAULT"
      ]
    }
  ]
},

This did not update the AndroidManifest, so I manually edited it:

AndroidManifest.xml

<intent-filter>
  <action android:name="android.intent.action.MAIN"/>
  <category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
<intent-filter>
   <action android:name="android.intent.action.VIEW"/>
   <category android:name="android.intent.category.DEFAULT"/>
   <category android:name="android.intent.category.BROWSABLE"/>
   <data android:scheme="https" android:host="testlink.com"/>
</intent-filter>

App.js

const linking = {
    prefixes: ["https://testlink.com"],    
};

useEffect(() => {
    Linking.addEventListener("url", handleDeepLink);

    return () => {
        Linking.removeEventListener("url", handleDeepLink);
    };
}, []);

return (
    <NavigationContainer /*linking={linking}*/>
        ....
    </NavigationContainer>
);

This worked fine with just the normal expo links, but is not working now I want a custom URL so that it opens in web browser on a computer, or on the app if it is installed.

Gigantopithecus

Answer 1

At the core, the iOS Safari browser has built-in deep linking which makes it possible to deep-link to custom app schema- myapp:///link-to-resources. Chromium-based browsers used mostly on android don't support custom app schema in URL input field.

The work-around is a setup simple web page that can redirect your app custom schema using Browser DOM Window API.

 const launchApp = (deepLink = "", fallBack = "") => {
  var now = new Date().valueOf();
  setTimeout(function () {
    if (new Date().valueOf() - now > 100) return;
    window.location = fallBack;
  }, 25);
  window.location = deepLink;
}


 const deepLink = "myapp:///path_to_ressource/";
 const fallbackLink = "http://play.google.com/store/apps/details?id=com.yourcompany.appname"

launchApp(deepLink,fallbackLink)

Madra

Does this apply in the case though where I want my deep link to be the same as my fallback link? So, say the link I have is someexamplelink.com, which I want to open the app if pressed on mobile, or the website if opened on a desktop – Gigantopithecus

This is called a universal link, you need to register URL patterns so OS (Android or iOS). On Android is simple but on iOS, you need to prove ownership of that domain on the Apple developer website - rossbulat.medium.com/… – Madra

Yeah that is what I thought I had implemented with the code above, but that does not work on Android still - do I need your code still for it to work? – Gigantopithecus

Chrome and other browsers except safaris can't not open myapp:///path_to_ressource schema. You need to redirect to the web page and use Browser window API – Madra

Feel free to schedule a short meeting at [email protected] for further assistance – Madra

will it work with firebase dynamic links or not ? – Countersink

@ShyPenguin Do you know how I can check if user has the app installed or not? When I use your script, the fallbackLink opens, even if I have the app installed. However, if I delete the fallbackLink, the deeplink opens... – Izzy

Registering your deep linking schema or URL is required in order OS determine that the link corresponds to your app. – Madra