React-native: iOS: Linking.openURL(href) cannot open universal link in app (safari instead)

[luatnd]

My app has already set up deeplink and universal linking for iOS, applinks for android. It works perfectly for months until I found a use case that Linking.openURL(href) fails on iOS.

              // If I click this url in external browser, my native app will be launch because I've already handled universal link
              const href = "https://my-universal-link-supported-domain.com/foo/bar";
              Linking.canOpenURL(href).then(supported => {
                if (supported) {
                  Linking.openURL(href);
                }
              });

Steps To Reproduce

1. Setup deeplink, universal link for ios, app-links for android
2. Execute: Linking.openURL(href)
3. Fail to open href by native app on iOS, still work on Android

Describe what you expected to happen:
iOS only: URL was opened by Safari on iOS .
URL was opened by the app normally on Android

Expected
URL was opened in the app on iOS

React Native version:

System:
    OS: macOS 10.14.4
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 52.93 MB / 8.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.11.0 - ~/.nvm/versions/node/v10.11.0/bin/node
    Yarn: 1.12.3 - ~/.nvm/versions/node/v10.11.0/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.11.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    Android SDK:
      API Levels: 23, 26, 28, 29
      Build Tools: 28.0.3
      System Images: android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom_64
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 10.2/10E125 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: ^0.60.3 => 0.60.5 
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native: 0.59.1

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.61 and verify if the issue still exists.

The "Resolution: Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

[react-native-bot]

I am closing this issue because it does not appear to have been verified on the latest release, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

[darrenyaoyao]

Hi @luatnd did you manage to solve the problem? Still having the issue in 0.61.5

[luatnd]

@darrenyaoyao It still there!
My app is on production with a massive amount of users so I cannot upgrade react-native version to 0.61.x
My safer workaround (just for my app) is:

1. Support applink schema, eg: myapp://
2. Change all universal link in your content to applink: https:// to myapp://
   Eg: ArticleDetailScreen show the content from CMS that contains links to my website, I need to change all links schema from https:// to myapp:// . Since, when user click the link on my app, they just goto myapp://... instead of https://my.website.com/...
3. Done

Because the link is for internal use only, this workaround is possible.

[GioLogist]

This problem exists throughout all versions of RN, as far as I can tell.

The workaround above definitely works. It's just not ideal for situations where your app is cross platform and Android + iOS have different schemes.

Also, it means you have to support at the very least 2 URL types (universal scheme + deep link scheme).

[brandonpearcy]

+1 Just ran into this issue. When users tap universal links in my app which should actually be handled by my app end up being routed out to Safari. If the same universal links are opened anywhere else on iOS, they will (correctly) bring the user into the app (e.g., Slack, Safari, Notes)

It seems to be an issue in Linking.openURL, but I can't really offer any other insights. The behavior is correct on Android.

$ react-native info
System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 177.45 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.15.1 - ~/.nvm/versions/node/v8.15.1/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v8.15.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5692245
    Xcode: 11.2.1/11B500 - /usr/bin/xcodebuild
  npmPackages:
    react-native: 0.61.5 => 0.61.5 
  npmGlobalPackages:
    react-native-log-ios: 1.0.1

[GioLogist]

If the same universal links are opened anywhere else on iOS, they will (correctly) bring the user into the app (e.g., Slack, Safari, Notes)

Agreed.

@hramos any chance we can get this re-opened, or should I open a separate issue?

[brandonpearcy]

I'll open a new one now and link back to this one!

[luatnd]

Agreed.

@hramos any chance we can get this re-opened, or should I open a separate issue?

Yep as bot suggested, we would follow #27486 🤣

[luatnd]

This problem exists throughout all versions of RN, as far as I can tell.

The workaround above definitely works. It's just not ideal for situations where your app is cross platform and Android + iOS have different schemes.

Also, it means you have to support at the very least 2 URL types (universal scheme + deep link scheme).

I decided to support both - for better sharing experiences, especially a link on facebook must be opened by my app directly instead of In-App browser

[hramos]

Lets use #27486. I'll link these issues together.

Duplicate of #27486.