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.
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 Facebook login in my React-Native app but for some reason, it's throwing Cannot read property 'logInWithPermissions' of undefined.
I'm using React-Native 0.60.4.
I've downloaded FacebookSDK 5.3.0 (_Stable framework)
Attempted using Cocoapod but after some research, many people don't suggest using it because it messes up the project.
These are the steps I followed:
Downloaded FacebookSDK 5.3.0 (current latest up to 08/15/19)
Dropped the FBSDKCoreKit.framework, FBSDKLoginKit.framework and FBSDKShareKit.framework inside a folder as ~/Documents/FacebookSDK.
Also dropped those 3 framework files inside my project in XCode in the /Frameworks folder.
Just in case, I also added the path ~/Documents/FacebookSDK in the Framework Search Paths under Build Settings.
Made a Build on XCode, it's successful.
I download react-native-fbsdk from my react-native project. It downloads version 1.0.1.
I don't add libRTCFBSDK.a file in the Link binary with Libraries because it throws an error saying the FBSDKShareKit.h isn't found.
This is what I do on my AuthView.js, I add this to a simple bound onPress event in a TouchableOpacity.
const FBSDK = require('react-native-fbsdk');
const {
LoginManager,
} = FBSDK;
handleFacebookLogin() {
LoginManager.logInWithPermissions(['public_profile', 'publish_actions']).then(
(result) => {
if (result.isCancelled) {
console.log('Login cancelled')
} else {
console.log('Login success with permissions: ' + result.grantedPermissions.toString())
}
},
(error) => {
console.log('Login fail with error: ' + error)
}
)
}
Now, I notice that inside Facebook's FBLoginManager.js this is the function being called
logInWithPermissions(permissions: Array<string>): Promise<LoginResult> {
return LoginManager.logInWithPermissions(permissions);
},
Whenever I hover LoginManager, it says it's undefined. Why would this be undefined? When it's literally a const on top of the file
const LoginManager = require('react-native').NativeModules.FBLoginManager;
Can anyone help me? I've been struggling for 4 days now. I already attempted installing it with cocoapods, no success. Then doing react-native link react-native-fbsdk no success... a lot of people suggested NOT using link but doing it manually.
What else could I try? Thanks.
You must add libRTCFBSDK.a file in the Link binary with Libraries . To fix the 'FBSDKShareKit.h isn't found' issue change ~/Documents/FacebookSDK to $(HOME)/Documents/FacebookSDK
I've been looking at the Branch SDK docs for a while now and, while they do seem to cover every base, a lot of it seems vague to me.
My app is not (currently) content-oriented. In other words, it is more of a utility app than a UGC app (again, at least for now. In the future I plan to introduce more content but that's not really relevant right now).
I currently use Fabric for analytics (as well as Firebase) and I am trying to setup a basic sharing/referral system to:
A: Increase user-driven sharing+growth
B: Track said virality in Branch (and consequently Fabric)
This is what I currently am testing for the sharing action. All of the Branch docs use examples of sharing specific content- but I don't want that! I'm trying to figure out how to configure/change the setup to share the app itself, and not some content within the app. I've copied this from the React Native docs as a start, made a couple tweaks where it made sense, but now I feel lost.
inviteFriend = async () => {
// only canonicalIdentifier is required
let branchUniversalObject = await Branch.createBranchUniversalObject('ShareFromApp', {
automaticallyListOnSpotlight: true,
title: 'What do I put here...?',
contentDescription: 'This isn\'t content, I just want to share the app'
});
let shareOptions = { messageHeader: 'Check out Foobar', messageBody: 'Check out Foobar so we can connect!' }
let linkProperties = { feature: 'share', channel: 'App' }
let controlParams = {}
let {channel, completed, error} = await branchUniversalObject.showShareSheet(shareOptions, linkProperties, controlParams);
}
How do I finish setting this up for sharing the app?
I've already setup everything on the dashboard (URI Schemes, Branch Keys, Universal Links, App Links, etc...), and I also have initialized Branch in my app as suggested by the docs in App.js componentDidMount():
this._unsubscribeFromBranch = Branch.subscribe(({ error, params }) => {
if (error) {
console.error('Error from Branch: ' + error);
return;
}
// params will never be null if error is null
console.log('Branch params: ' + JSON.stringify(params));
if (params['+non_branch_link']) {
const nonBranchUrl = params['+non_branch_link'];
console.log('non-Branch link URL: ' + nonBranchUrl);
// Route non-Branch URL if appropriate.
return;
}
if (!params['+clicked_branch_link'])
return;
// Get title and url for route
let title = params.$og_title;
let url = params.$canonical_url;
let image = params.$og_image_url;
// Now push the view for this URL
this.navigator.push({ title: title, url: url, image: image });
});
(P.S. should I move this to after the authentication flow? I've already put the Branch.setIdentity(...) behind the auth flow)
These are some of the relevant npm packages I'm using
"react-native": "0.50.3"
"react": "16.0.0"
"react-native-branch": "2.1.1"
"react-native-fbsdk": "0.6.3"
"react-native-fabric": "0.5.1"
Feel free to ask for more info if I've missed anything important. Thanks! :)
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
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.