I need to be able to open the default email app on the click of a button from a react native application. I tried using react-native-email-link but it does not have the option of adding attachments. Is there something else I can use that will allow attachments?
You can likely achieve this with expo-mail-composer:
import * as MailComposer from 'expo-mail-composer';
[...]
const canMail = await MailComposer.isAvailableAsync();
if(!canMail) {
console.warn("Can't open the mail app! You may be using the iPhone simulator or don't have a mail app installed")
return;
}
MailComposer.composeAsync({
subject: "Hello, Mail Composer!",
body: "Some body text goes here",
recipients: "somebody#example.com",
attachments: [
"https://venturebeat.com/wp-content/uploads/2017/09/stack_overflow_logo.jpg?w=1200&strip=all"
// you can also attach local files
]
});
Working Snack demo here: https://snack.expo.dev/#joem-rp/expo-mail-composer-demo
Related
When using MOBILE SHARE (navigator.share), canceling the Share flow causes an unexpected error to appear.
The message can be acknowledged and user is allowed to proceed but this error response is unexpected.
STEPS TO REPLICATE
1.Tap the SHARE icon to initiate the share dialog then:
2.a on iOS, find and tap the close [ x ] control in the upper righthand corner of the dialog to dismiss
2.b on Android, swipe the share overlay down (or whatever way to close/exit this dialog?)
3.The error "AbortError: About due to cancellation of share" appears when:
on iOS, immediately on cancellation
on Android, when attempting to re-engage the Share control.
The error message:
www.example.com says: AbordError: Share canceled
Im using this Vue plugin https://github.com/GabrielBibiano/vue-navigator-share
This is not an issue with Vue.js or any plugin, but something that navigator.share function does.
It is throwing this on canceling/dismissing share action.
Check this example on phone which supports navigator.share.
(NOTE: open this page as desktop site since phones can not run examples)
You can also see this (LOC: 303): https://chromium.googlesource.com/chromium/src/+/34eacf936ac3255925c5045c4385dc9b5f19fa78/chrome/android/javatests/src/org/chromium/chrome/browser/webshare/WebShareTest.java
const share = async () => {
try {
await navigator.share({ url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ' });
} catch (e) {
if (e.toString().includes('AbortError')) {
alert('Hello world aborted :(');
}
}
}
<button onclick="share()">share (only for phones)</button>
Click here to view screenshot here
I am using react native app auth with Azure active directory and in android after redirecting back to the app, two apps are shown (like in the above screenshot) , if i select the correct app the app works as expected, but if i select the other, the app crashes. How can i fix this issue and show only one app!
const config = {
issuer: 'https://login.microsoftonline.com/your-tenant-id',
clientId: 'your-client-id',
redirectUrl: 'urn:ietf:wg:oauth:2.0:oob',
scopes: [], // ignored by Azure AD
additionalParameters: {
resource: 'your-resource'
}
};
// Log in to get an authentication token
const authState = await authorize(config);
// Refresh token
const refreshedState = await refresh(config, {
refreshToken: authState.refreshToken,
});
Try not to put "scheme" option into app.json and use a redirectUrl like this.
<your.package.identifier>://oauthredirect
According to this AppAuth OAuthRedirect, AppAuth uses for scheme the android.package identifier. For example if your package.identifier is "your.company.app", use a redirectUrl like this: your.company.app://oauthredirect. It works for me.
I'd like for users to be able to share a link (e.g. app.com/SKFLA - this is primarily because deep links on their own aren't clickable) via Facebook etc. When clicked, this redirects to a deep link app://SKFLA. If the app is installed, this opens the app - this is all working fine so far. But if the app isn't installed, I'd like to open the app store on the relevant page. Is this achievable? Thanks!
You need UNIVERSAL LINKS
Please check
IOS https://developer.apple.com/library/archive/documentation/General/Conceptual/AppSearch/UniversalLinks.html
Android
https://developer.android.com/training/app-links/
It might also require some extra server-side setup.
Not sure about native behavior.
We used third-party service like https://branch.io/deepviews/.
There is a bunch of similar services.
If someone is still stuck in this issue and needs easiest solution, you will love node-deeplink
1.) If app is installed: Calling an app through deep linking will always call componentDidMount of root component. So you can attach a listener there. Like:
Linking.getInitialURL()
.then(url => {
if (url) {
this.handleOpenURL({ url });
}
})
.catch(console.error);
Linking.addEventListener('url', this.handleOpenURL);
handleOpenURL(event) {
if (event) {
console.log('event = ', event);
const url = event.url;
const route = url.replace(/.*?:\/\//g, '');
console.log('route = ', route);
if(route.match(/\/([^\/]+)\/?$/)) {
const id = route.match(/\/([^\/]+)\/?$/)[1];
const routeName = route.split('/')[0];
if (routeName === 'privatealbum') {
Actions.privateAlbum({ albumId: id });
}
}
}
}
2.) If app is not installed: Just set up a route in your server and node-deeplink package will handle the bridging between web browser to app store when a app is not installed in your mobile.
By this, both the cases will be handled without any struggle
I'm using Ionic Framework to build an iOS / Android app which writes sqlite data to a CSV file, then attaches that file to an Email and sends it. The following code works correctly on iOS (actual device iPhone 5).
I don't have an Android device, but in the Android emulator (nexus 5), the file sent never has a file attachment (despite the emulator showing that it does).
Is there a different way I should be writing this code?
I looked at the documentation here, but it does not clarify
https://github.com/katzer/cordova-plugin-email-composer#adding-attachments
$cordovaFile.writeFile(cordova.file.dataDirectory,
"PatientEncounters.csv",
data.join("\n"),
true)
.then(function (success) {
$cordovaEmailComposer.isAvailable().then(function() {
var emailOpts = {
to: [email],
attachments: ['' +
cordova.file.dataDirectory.replace('file://','') + "PatientEncounters.csv"],
subject: 'Patient Encounters',
body: 'A CSV containing Patient Encounters is attached',
isHtml: false
};
$cordovaEmailComposer.open(emailOpts).then(null, function () {
// user cancelled email
});
return;
}, function (error) {
return;
});
}, function () {
// not available
});
My problem was using cordova.file.dataDirectory instead of cordova.file.externalDataDirectory. The mail app in android would not allow attaching files from internal storage.
I am building an app, using cordova, for android and iphone. I have this function to share some text on facebook:
window.plugins.socialsharing.canShareVia('com.facebook.katana', 'msg', null, null, null,
function () {
window.plugins.socialsharing.shareViaFacebook("Some custom text here" + link),
null,
null,
console.log('share ok'), // success callback
function (errormsg) {
alert(errormsg);
}); // error callback
},
function () {
console.log("NO FACEBOOK AVAILABLE");
navigator.notification.alert('The Facebook app is not available on your device.', // message
console.log('facebook app not installed'), // callback
'Share', // title
'Ok' // buttonName
);
});
In iphone is all working fine, i can share the text and the link on facebook thought the native app. In android, the facebook app will open but the custom text is missing, although the link do appear.
You can see the resulting post here: https://www.dropbox.com/s/bo0ughcv9w36zec/Screen_Shot.png
I have found some posts: https://developers.facebook.com/blog/post/510/ stating the custom message will be ignored, but I'm not sure this applies, besides in ios is working properly. Any help will be appreciated. Thank you.
It seems that Facebook does not allow, in their facebook app for android, to add custom text, we can only share a link. More info can be found here: https://developers.facebook.com/bugs/332619626816423