I know I can deep link maps for example, I used it and it works fine. But how about FB Messenger? I have a button, that when user clicks I want it to open Messenger with a conversation with someone. How can I do it? I tried directly linking but it doesn't work.
openMessenger() {
Linking.canOpenURL('https://www.messenger.com/t/name').then(supported => {
if (supported) {
Linking.openURL('https://www.messenger.com/t/name');
} else {
console.log('erro');
}
}).catch(err => console.error('An error occurred', err));
}
also tried fb-messenger://user-thread/{user-id} and still didn't work.
btw, is there any way to ask the user which app he wants to open with? In the case of the maps, when I click the button it opens on Apple Maps on iOS, but I want it to ask which app to open instead, as I don't use Apple Maps for example.
Linking.canOpenURL('fb-messenger://').then(supported => {
if (!supported) {
console.log('Can\'t handle url: ' + url);
} else {
Linking.openURL("fb-messenger://user-thread/" + "facebook id");
}
}).catch(err => console.log(err)));
iOS
As of iOS 9, your app needs to provide the LSApplicationQueriesSchemes
key inside Info.plist or canOpenURL will always return false.
Set LSApplicationQueriesSchemes => Restart server
<key>LSApplicationQueriesSchemes</key>
<array>
<string>fbapi</string>
<string>fb-messenger-share-api</string>
<string>fbauth2</string>
<string>fbshareextension</string>
<string>fb-messenger</string>
</array>
Android
To support deep linking on Android, refer
http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents
For those looking for an answer, this library worked for me:
https://github.com/fiber-god/react-native-app-link
In case you are still wondering this is a straightforward way just to messenger to the existing react native application without any packages
Linking.openURL(http://m.me/<PAGE_NAME>)
Official Documentation
Related
developers,
I am working on a react native project that requires faceid login functionality.
Thanks to the libs and sample codes in the github repo, I implemented on my app very easily.
However, it displays the default bottom dialog when requiring the user to pass faceID auth in the android emulator.
react-native-biometrics
import ReactNativeBiometrics from 'react-native-biometrics';
//...
ReactNativeBiometrics.createSignature({
promptMessage: ' ',
payload: payload
})
.then((resultObject) => {
const { success, signature } = resultObject;
if (success) {
setMaskActive(true);
}
});
how can I remove the prompt dialog, but still keep calling ReactNativeBiometrics.createSignature() function?
Thank you.
I'm trying to implement the Web Share Api functionality on my test web app but it doesn't seem I'm able to do it. This is the code:
const newVariable: any = navigator;
{newVariable && newVariable.share && <IconButton aria-label="Share" onClick={async (e) => {
try {
const id = await shareRepository.shareTrip(this.props.todolist)
const url = "https://something.com/share/" + id
await newVariable.share({
title: 'Check my todolist for ' + this.props.todolist.trip.departure + ' - ' + this.props.todolist.trip.arrival,
text: 'Check my todolist for ' + this.props.todolist.trip.departure + ' - ' + this.props.todolist.trip.arrival,
url: url,
})
} catch (error) {
alert(error)
}
}}>
<ShareIcon />
</IconButton>}
Every time I try on both Firefox and Safari for iOS, I'm getting an error saying:
NotAllowedError: the request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
If on those browser I try to share something from google.com I get the native dialog to choose with which app to share.
I cannot understand why. On this page there is no discussion about permission: https://developers.google.com/web/updates/2016/09/navigator-share
UPDATE:
on Chrome for android works just fine, on Firefox for Android doesn't work. On Chrome, Firefox and Safari (which I believe they use safari engine all three) is only working if I pass "" which means the page itself, or "https://something.com/share/", it breaks If I pass "https://something.com/share/"+id :/
For other future users where the current answer is too specific to that code. The root issue is that the share() method must be called from a user gesture.
If the method call was not triggered by user activation, return a promise rejected with with a "NotAllowedError" DOMException.
From the Web Share API.
A user activation is any of the following:
change
click
contextmenu
dblclick
mouseup
pointerup
reset
submit
touchend
I understood what was the issue, which is absolutely annoying.
So:
const id = await shareRepository.shareTrip(this.props.todolist)
This call is the one that is causing problems. If I comment it, on iOS there is no issue.
If I keep it I have no problem at all on Android but iOS will complain.
So I need to rethink the flow of the application to pass the id from outside the 'onClick' event.
I have been using Expo to develop a react-native app, The functionality I am currently trying to implement is to share a link with friends on any platform and when they click this link it will launch my app.
After extensive research online - I've come to a blocker, following expo's documentation I defined a scheme for my app - when I press share everything works correctly a message is created and I'm able to share content but only as string.
I am using react-natives Share library to share to an app and I'm using Expo to provide me with the link.
Ideally my first goal is to get the app opening using the Expo Link before I explore further into adding more functionality to the link.
Share.share({
message: "Click Here to View More! " + Expo.Linking.makeUrl() ,
url: Expo.Linking.makeUrl(),
title: 'Sufiyaan has invited you to join this activity',
})
.then((result) =>{
console.log(result)
if(result === 'dismissedAction'){
return
}
})
.catch((error) => console.log(error))
In the root of my app I have also defined the event handlers: App.js
handleOpenURL(event) {
if (event.url && event.url.indexOf(scheme + '://') === 0) {
crossroads.parse(event.url.slice(scheme.length + 3));
}
}
componentDidMount() {
let scheme = 'nxet'
Expo.Linking.getInitialURL()
.then(url => {
console.log("App.js getInitialURL Triggered")
// this.handleOpenURL({ url });
})
.catch(error => console.error(error));
Linking.addEventListener('url', this.handleOpenURL);
}
componentWillUnmount() {
Linking.removeEventListener('url', this.handleOpenURL);
}
When I share the link to Whatsapp, Facebook Messenger or even just messages or notes it appears as myapplink://, I try to enter this into the browser and instead of asking me to open my app - it does a google search.
Please note I am attempting this on an Android Device.
Is there something I am doing incorrectly?
Any help is much appreciated. Thanks.
According to this:
https://docs.expo.io/versions/v28.0.0/workflow/linking#__next
You need to provide a link to your own website which then redirects to the slug:// link for your app in order for gmail and other android apps to work.
I have a web page where I implement ADAL.JS.
When browsing the page via the web it works perfectly; however when I try to view it on an iPhone, and I have saved it as a shortcut on the desktop using the Add to Homescreen button, things go haywire.
The initial page (index.html) shows correctly using the apple-mobile-web-app-capable meta tag; however, when the authentication is invoked, I am taken to a real browser window. Once redirected back to index.html, I am still in the separate browser window not the Web App view.
Ultimately, I want to have this as an offline web site with all page functionality running in the view produced by apple-mobile-web-app-capable. Any other ideas as to how to implement this are appreciated.
Thanks in advance.
This is one of the big problems currently existing in iOS webapps. Every link or redirection opens up in a new window.
You can fix it changing window.location.href with JavaScript.
Seem to be missing something...I get at urlNavigate not defined error...suggestions?
alert('Running Auth');
online = navigator.onLine;
authContext = new AuthenticationContext({
tenant: azureTenant,
clientId: azureClientId,
postLogoutRedirectUri: window.location,
//redirectUri: "https://shlpkpiapi.azurewebsites.net/kpiapp/test.html"
});
authContext.config.displayCall=function(url){
if (urlNavigate)
{
this.info('Navigate to:' + urlNavigate);
window.location.href=urlNavigate;
}
else
{
this.info('Navigate url is empty');
}
}
if (authContext.isCallback(window.location.hash)) {
authContext.handleWindowCallback();
var err = authContext.getLoginError();
if (err) {
alert('Error on callback')
}
}
else {
var user = authContext.getCachedUser();
if (user) {
//We have a user in cache and are using those credentials
console.log('Signed in as: ' + user.userName);
} else {
console.log('Not signed in.')
if (online)
{
alert('signing in');
authContext.login();
}
else
{
alert('currently offline');
}
}
}
Ok...I made the change and the error is gone but I don't understand how this is supposed to address the issue. When I add my page to my IPhone home screen (https://xxxxx.azurewebsites.net/app/test.html) and then click on the tile I am taken to the test.html page. On that page page there is an auth function that executes which uses adal.js and takes me to "https://login.microsoftonline.com/xxx.onmicrosoft.com/oauth2...". This shows up in the scope of my IOS Web app and has my account listed and the Use another account option. I click on my account or choose the Use another account option and I am taken to another page that is opened in Safari.
Is there an existing possibility to trigger the share functionality in local browsers on smartphones via HTML or JavaScript?
Of course there are many services which provide a share button. But when I e.g. want to share a website on facebook, I need to be logged in to facebook in the browser I am currently using.
Almost all browsers got an own share functionality build in, which triggers a system menu to choose which app you want to use to share:
This question is about: How to trigger this menu?
I know it is possible to trigger a phone call with a specified prefix in href attribute of links, like tel: or callto:. Maybe such a shortcut for this share menu is also existing? Or some javascript code? Or a totally different way how to do it?
Thanks in advance.
It is possible with a big catch. Currently only available in Chrome for Android, Samsung internet and on Safari (desktop and mobile). And support is coming to Edge and Chrome on desktop http://caniuse.com/#feat=web-share
if (navigator.share) {
navigator.share({
title: document.title,
text: "Hello World",
url: window.location.href
})
.then(() => console.log('Successful share'))
.catch(error => console.log('Error sharing:', error));
}
https://developers.google.com/web/updates/2016/10/navigator-share
I added this as all answers seems outdated by 2018-07-16.
It is possible, but only in a few browsers (MDN Reference), achieved througth the one method API in navigator:
navigator
.share({
title: document.title,
text: 'Hello World',
url: window.location.href
})
.then(() => console.log('Successful share! 🎉'))
.catch(err => console.error(err));
Google's reference: https://developers.google.com/web/updates/2016/10/navigator-share
Also, there was a thing called Web Intends which is a dead project, you should go with navigator.share instead.
It's now possible with the Web Share API!
However, it isn't widely supported as of yet. Currently, it's only available in Safari (mobile and desktop), and Chrome for Android. See Can I Use for details.
According to Introducing the Web Share API on Google Developers, there are several things to keep in mind:
your page needs to be served over HTTPS
you can only call navigator.share(…) in response to a user action, such as a click (i.e., you can't call it on page load)
you should feature-detect it in case it's not available on your users' platform (e.g., via navigator.share !== undefined)
The Google Developers article also notes that URLs shared with the Share API need not be on your own domain—you can share any URL.
Putting that all together, you could use something like this which uses the Share API if it's available, and falls back to sending an email if it's not*:
function createShareButton() {
const btn = document.createElement("button");
const title = document.title;
const text = "Check this out!";
const url = window.location.href;
btn.innerText = "share" in navigator ? "Share" : "Share via e-mail";
btn.onclick = () => {
if (navigator.share !== undefined) {
navigator
.share({
title,
text,
url
})
.then(() => console.log("Shared!"))
.catch(err => console.error(err));
} else {
window.location = `mailto:?subject=${title}&body=${text}%0A${url}`;
}
};
return btn;
}
document.title = "Demo";
document.body.appendChild(createShareButton());
*: Please do consider using a more appropriate fallback, (e.g., social sharing) depending on your use case.
Answered Apr 10 2013
To my knowledge, there is no such implementation in current browsers on mobile OS's. Since the question interested me - a google search revealed there is work being done in this direction:
https://dvcs.w3.org/hg/web-intents/raw-file/tip/spec/Overview.html
http://webintents.org/
Sorry - I do not know a workaround.
It is possible and I wrote a function to have pretty content to share and observe the asynchronous side effects:
const shareContact = async (title, content) => {
const text = `${title}
${content}`;
try {
await navigator.share({
text,
});
} catch (e) {
console.log(e);
}
};
You could use the WebView.addJavascriptInterface() method for android.
First you will need to write a class which fires the intent to open the share menu(take a look here) and then implement that class using the addJavascriptInterface() call. After that all you need to do is call the method from your Javascript.