Expo shared link is not clickable - react-native

I've been trying to create mechanism for my Expo app, that will allow users to share content of app (so I basically need linking with params, and I think I know how to do it, according to docs).
I wanted to start creating this mechanism with simple sharing, without params (just clickable link that opens app). Here's my code (executed when user presses share button):
share = async () => {
await Share.share({
message: Linking.makeUrl()
})
}
It shares link as excepted (I tried it on messenger), but shared link is not clickable. I also tried using exp://192.168.100.3:190000 that points to my PC in the same LAN (I coped that from http://localhost:19002/), where metro bundler is running, and copying Tunnel link - neither of those worked, link is just a plain text, and if user clicks on it nothing happens. But, when I scan QR code, from http://localhost:19002/ (metro bundler page) application opens as excepted.

You're doing everything just fine!
The reason why a shared link is not clickable in some apps is simply because of the mechanisms of the other apps for "detecting" links from plain text and "linkifying" them.
You see, these links are actually "deep links" (custom URL schemes).
Here's an example. If I share this link: exp://192.168.100.3:190000 over Slack, it becomes "clickable", because it looks like Slack has a mechanism to detect these custom "deep links" which lead to a mobile app:
If I share the same link over Messanger, it outputs it as a plain text. This is because Messanger doesn't have a mechanism to detect these "deep links".
In order for the link to "click", it must be rendered in an anchor tag. Messenger simply linkifies only "known" web links (http://, https://...), not custom ones.
The QR code reader in your case opens your deep link, because it has a mechanism to detect "deep links".
So, if you want a reliable way for making your links always "clickable", here's the workaround: spin-off a web site. When people generate (and share) links, they share web links https://your-server. When they open these links -> the web server redirects them with the exp://... (or your custom) scheme. If users have your app installed - the links will open with your app.

Related

How do I open the deep link in mobile browser rather than mobile app in react native

What I am trying to do is opening a deep link in mobile browse (Not in app). Deeplinking is all set up, all the links with specific domains are opening/navigating into app opened from any where else. Now here is a scenario that there are some particular links with same domain (I set up deeplinking for), I want to open that in browser because I don't have any view to show for that link in my app so I want them open in browser.
I have identified the links but when I opened these links via Linking.openUrl it navigates me to the app.
if (lowerUrl.includes(PostType.NO_DEEP_LINK)) {
Linking.openURL(lowerUrl);
return null;
}
Is there any method I can specify the Linking method to open url in mobile browser not in app although the url has a same domain that is setup for deep linkg.
Solution 1#
The best possible solution for that can be using android:pathPattern in android manifest. Basically you have to provide path pattern (a sort regex) to match the valid links.
Documentation for that can be found here.
https://developer.android.com/guide/topics/manifest/data-element
Solution # 2
One has to make RN Native Module and instead Linking.openURL(lowerUrl) to handle this kind of scenario.
To make browser native module one can take help from here.
This solution doesn't work with devices which lacks google play services like Kindle Fire, etc

Branch.io architecture query

I have the following requirement and based on the branch docs I cannot get myself a straight answer.
We want to enable deep links that if the user has the app installed that it uses them and if not redirects to download then redirects.
If the user is on a desktop they get redirected to a page to download app.
We want to control all the actual deep linking using react navigation config and wanted to know how we can pair the two!? The guides are very poorly written and makes understanding the flow a nightmare.
Some guidance and suggestions on how best to accomplish this would be great.
P.s. are the links generated that when app found it takes the prefix and replaces with appname:// ??
Your requirement for deep linking can be handled with Branch, you can set the URI schemes of the apps under the link settings of your Branch dashboard and also mention your app on PlayStore/Appstore for the user to download the app when clicked on the link.Similarly you can add the redirection URLs for the scenarios when your link is clicked on a desktop.
Alternatively you can use our React SDK to create links with all these link properties and even more. More details here.
The handling of the deep link data and redirecting the user to the desired page can be found here.
If you wish to know more about how Branch passes data through to the app and attributes app sessions, check this.

Create Waze links in web page

I want to build links in my web page to open in Waze.
I have a DB with my customers addresses (not the GPS or Lat/Long) and want to click on the link and open Waze with the directions to the address.
This should be relatively easy to do with the Waze Deeplinks feature. The deep links work differently depending on which environment you're on (see below), which should be fine in your use case.
Basically, when you link someone to https://waze.com/ul?q=some%20address, the Waze site will then take the appropriate action:
Desktop: shows a page that allows you to send the location to a mobile device
Mobile (with Waze installed): open the app and start the search with the entered arguments
Mobile (without Waze installed): open as the live map with a link to the the Play Store or App Store to install Waze
There's the argument &navigate=yes you could add to the URL to start the navigation directly. But from my experience that only seems to have an effect if you provide exact coordinates to navigate to, which you mention you don't have.

opening an Instant App by a Firebase Dynamic Link with custom parameters (App Links)

I'm searching for a way to open an Android Instant app in a mobile browser.
The app supports app links (deep linking in http/https).
My Android app is working as an instant app and can be opened by an app link in different apps that are not browsers (Gmail, Whatsapp, etc.).
I have concluded that the only way to be able to have an instant experience in browser apps is by using Firebase Dynamic Links.
The only way it works is by using short Firebase Dynamic Links (without app parameters in the link). I need to be able to build the link manually with parameters, so the app will know it's desired actions.
In order to use Firebase Dynamic Links, I've:
set up all basic requirements in my app for Firebase Dynamic Links.
set up a sub-domain and enabled it in the Firebase console (the Hosting section).
created a long dynamic link manually (described as the only way to send parameters by link).
example:
https://sub.example.com/?link=https://example.com/some-path/file?param1=value1&param2=value2&apn=package.name.com
This long link works (in mobile browsers) only if the app is installed / is in cache.
If the app is not installed, the app's play store page opens and offers to install / try it (as instant app).
I've contacted Firebase support, and got a solution:
Adding the "afl" parameter in the link with the value of the app link.
Example:
https://sub.example.com/?link=https://example.com/some-path/file?param1=value1&param2=value2&apn=package.name.com**&afl=https://example.com/some-path/file?param1=value1&param2=value2**
The Android app links work properly if the user follows the following steps:
Verify that you are logged into Google, Chrome, and Google play with the account you plan to use for the instant apps.
Go into Google Play Store settings, find the tab for Instant Apps and Enable Instant Apps enable Instant Apps
In your website add html to index.html or the equivalent file where you want to place the embedded link such as this:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
This is a link to the instant app </body>
</html>
The instant app linking will only work from links embedded within an app such as in gmail or Chrome and not from directly pasting the url in a browser navigation bar.
If you have any questions about this approach, please let me know.

How to get the URI scheme of any app for AppLinks/universal linking?

I need to open a third-party app from my react native mobile app. I understand that this is called universal linking on iOS and AppLink on Android.
I have done a lot of research for this, and I have been able to set up a link to the third party app on the app store. Now I just need to get my app to open up the app if the user has it installed. That requires the URI scheme of the other app, though.
My question is, how do I get the URI scheme to this third party app? Rather, how do I get the URI scheme of any app? I know the URI scheme of the twitter app is 'twitter://app', but the app I am trying to link to is way more niche than twitter or other popular apps, so there is no help for this sort of thing online.
Any tips?
Finding the URL scheme of an iOS app
Due to Apple's tendency for secrecy, it's not easy to find the URL scheme of an iOS app. But it can be done. Here's how I do it, using a Mac app called iMazing.
Launch iMazing, select a connected iOS device, click Apps:
In the footer of the window, click Manage Apps:
Select the app you're interested in , then select Export .IPA menu item. Note: You may need to download the app first.
The saved file will have the .ipa extension. Change the extension to .zip, and unzip the file. You now have a directory with the name matching the app's name.
Assuming "asana" is the app name, open the file "asana/Payload/asana.app/Info.plist" in a text editor, and search for a section that contains "CFBundleURLSchemes". Assuming the app contains CFBundleURLSchemes (they are optional), it should look something like this:
The URL scheme is in the <string>asana</string>, so the complete url scheme in this case is "asana://". Test that the URL launches the app by typing it into iOS Safari browser window. If it works, Safari should display an alert like this:
What About Apps Without CFBundleURLSchemes?
I haven't found a way to launch apps without CFBundleURLSchemes directly, but you can link to the app's page in the App Store, where the user can open the app with the Open button (or Get button if the app is not installed).
You will need to obtain the app page's URL from the App Store:
Open App Store, go to the app's page, click the share icon:
Click Copy Link:
The URL will look like this:
https://apps.apple.com/us/app/asana-organize-tasks-work/id489969512
Clicking on that link in Safari will bring up the app page in the App Store.
Maybe it is worth to start with some background:
There are various ways to deep link into an app, and it depends on the platform (iOS\Android\WindowsPhone...) and its version.
On iOS, up until version 9, the way to open an app was by using URI schemes, e.g. the one you added above: twitter://app. Each app declares the scheme that should be used. Therefore in order to deep link into the app you wish to open, you'll need to use the scheme that it declared. This is the same for Android until version 6.
Starting iOS9+, Apple introduced Universal Links as the method for deep linking. Here's some information: https://developer.apple.com/ios/universal-links/
In these versions, URI schemes won't longer work when using Safari browser (which is the iOS default browser) if the app is not installed. If the app is installed, however, URI schemes should allow opening the app, if everything is configured successfully. In Android there's a similar method called "AppLinks".
Having said this, the above information is for setting deep link for your app. I do not think that it is a common use case to open a third party app from your app - deep links are configured and used by the app owner (e.g. for publishing his\her app to engage users).