5

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.

Tom
  • 213
  • 3
  • 12

1 Answers1

3

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)
Fiston Emmanuel
  • 4,242
  • 1
  • 8
  • 14
  • 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 https://someexamplelink.com, which I want to open the app if pressed on mobile, or the website if opened on a desktop – Tom Jan 19 '22 at 08:54
  • 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 - https://rossbulat.medium.com/deep-linking-in-react-native-with-universal-links-and-url-schemes-7bc116e8ea8b – Fiston Emmanuel Jan 19 '22 at 09:44
  • 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? – Tom Jan 19 '22 at 10:19
  • 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 – Fiston Emmanuel Jan 19 '22 at 10:27
  • Feel free to schedule a short meeting at emmbyiringiro@gmail.com for further assistance – Fiston Emmanuel Jan 19 '22 at 10:29
  • will it work with firebase dynamic links or not ? – Ali Yar Khan Jul 28 '22 at 15:11
  • @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... – Mariana Reis Silveira Aug 01 '22 at 02:09
  • Registering your deep linking schema or URL is required in order OS determine that the link corresponds to your app. – Fiston Emmanuel Aug 01 '22 at 14:33