131

I do not want to compose an email. I just want to be able to launch the main email app on a user's device (iOS& Android) from a react-native app.

Scenario: I will send a verification email to the user upon signup.

2
  • We just ran into this same issue. This answer shows you how to open up a mail client picker in android, not just need something similar for ios.
    – miah
    Mar 22, 2018 at 15:47
  • This DOES NOT WORK on new Android phones that use the Gmail client. It ONLY works on OLD Android phones that use the Email client. Jan 26, 2022 at 16:39

14 Answers 14

225

React Native Open Mail Function

<Button onPress={() => Linking.openURL('mailto:[email protected]') }
      title="[email protected]" />

React Native Open Mail Function With Subject and Body

<Button onPress={() => Linking.openURL('mailto:[email protected]?subject=SendMail&body=Description') }
      title="[email protected]" />

React Native Open URL

<Button onPress={() => Linking.openURL('https://www.google.co.in/') }
      title="www.google.co.in" />

##Don't forget to import

import { Linking } from 'react-native'

Note: Not supported in iOS simulator, so you must test on a device.

5
  • 30
    openURL('mailto:...') opens an email to compose, not the email client, which jasan explicitly says he does not want to do.
    – miah
    Mar 22, 2018 at 15:12
  • 40
    Note: Not supported in iOS simulator, so you must test on a device. Jan 8, 2020 at 16:23
  • @Vishal Vaghasiya In this email URL, if I passed body with some more contain!! Then contain is cut down. Need your attention for the same Oct 12, 2020 at 9:41
  • Note that if the subject contains email it will not work, you need to decode the subject and body using URL encoding const subject = encodeURI(strings.feedbackSubject); Aug 27 at 7:48
  • Tip: If you want to use spaces in your subject or body you need to wrap your message in encodeURIComponent to replace the space to %20 e.g. mailto:[email protected]?subject=${encodeURIComponent("This is a subject")} github.com/facebook/react-native/issues/…
    – TJ-
    Nov 14 at 9:08
62

Unfortunately, none of the answers after are correct.

I do not want to compose an email. I just want to be able to launch the main email app

I would like to have the same behavior:

  1. Sign-In Screen with a button Open Email App
  2. The user opens his email app
  3. He can click on the magic link to get back in the app

More or less the same as the Slack Onboarding with the magic link.

enter image description here

I found a solution with the library react-native-email-link. You can open an email client from React Native (for 'magic link' type feature).

  • Works on Android.
  • If you want to try on iOS you need to have a real device because there is no mail.app on iOS Simulator.
3
  • 4
    This is a much more correct answer than everything else on the thread. A simple solution on iOS would be to call Linking.openURL('message://'), which opens Mail.app. The library mentioned above takes care of dealing with multiple mail apps across both mobile operating systems.
    – filipe
    May 10, 2021 at 16:53
  • 1
    I doubt it, which is why I mentioned iOS and still consider the library you suggested a superior alternative :)
    – filipe
    May 12, 2021 at 19:52
  • i think it can be solve without using library.
    – lodey
    Jun 6, 2022 at 8:04
11

Expo.io pure js/typescript solution:

import * as IntentLauncher from 'expo-intent-launcher';

// ...

  public openMailClientIOS() {
    Linking.canOpenURL('message:0')
      .then(supported => {
        if (!supported) {
          console.log('Cant handle url')
        } else {
          return Linking.openURL('message:0')
            .catch(this.handleOpenMailClientErrors)
        }
      })
      .catch(this.handleOpenMailClientErrors)
  }

  public openMailClientAndroid() {

    const activityAction = 'android.intent.action.MAIN'; // Intent.ACTION_MAIN
    const intentParams: IntentLauncher.IntentLauncherParams = {
      flags: 268435456, // Intent.FLAG_ACTIVITY_NEW_TASK
      category: 'android.intent.category.APP_EMAIL' // Intent.CATEGORY_APP_EMAIL
    };

    IntentLauncher.startActivityAsync(activityAction, intentParams)
      .catch(this.handleOpenMailClientErrors);
  }

Works in iOS with Mail, works in Android

Android Intent docs: https://developer.android.com/reference/android/content/Intent#ACTION_MAIN

Expo IntentLauncher doc: https://docs.expo.io/versions/latest/sdk/intent-launcher/

1
  • the android version requires changes to the native code by installing the expo-intent-launcher
    – RayKay91
    Jul 27, 2021 at 9:51
6

To open email app on iOS:

 Linking.canOpenURL('message:')
    .then(supported => {
        if (!supported) {
          console.log('Cant handle url')
        } else {
          return Linking.openURL('message:')
        }
      })
      .catch(err => {
        console.error('An error occurred', err)
      })
2

You can use this method to send open any email client and send an email with some data.

export const sendEmailViaEmailApp = (toMailId, subject, body) => {
  if (!isUndefined(toMailId)) {
    let link = `mailto:${toMailId}`;
  if (!isUndefined(subject)) {
    link = `${link}?subject=${subject}`;
  }
 if (isUndefined(subject)) {
   link = `${link}?body=${body}`;
 } else {
   link = `${link}&body=${body}`;
 }

Linking.canOpenURL(link)
  .then(supported => {
    if (supported) {
      // 'mailto:[email protected]?subject=Billing Query&body=Description'
      Linking.openURL(link);
    }
  })
  .catch(err => console.error('An error occurred', err));
} else {
  console.log('sendEmailViaEmailApp -----> ', 'mail link is undefined');
 }
};

Place this method inside a utils class and use this method where ever you want

1
import { View,Linking,Text, Image,TouchableOpacity } from 'react-native';

const emailId= '[email protected]'

 const onPressEmailClick = (email) => {
        Linking.openURL('mailto:'+email)
      //  Linking.openURL('mailto:[email protected]')
     } 

  <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "center" }} >

  <Text style={{ textAlign: "center", marginTop: 15, color: "black" }} >
           {"For any query mail us "}
  </Text>

    <TouchableOpacity
      onPress={() => onPressEmailClick(emailId)} >
      <Text style={{ textAlign: "center", marginTop: 15, color: "black", textDecorationLine: 'underline' }} >
           {emailId}
       </Text>
   </TouchableOpacity>
0

You can open the gmail app using this as your URL googlegmail://, its gmail's scheme. The first time your app opens gmail it will open an alert saying " wants to open gmail", the user can then tap ok or cancel. This behaviour only happens once.

This won't open the email composer but just straight to the user's primary inbox.

0

I have found a way to open mail account, not compose mail. Since you need physcial iOS device, I have tested only on Android (Samsung S9+) and it works.

import { openInbox } from "react-native-email-link";
import * as IntentLauncher from 'expo-intent-launcher';

const openMail = async () => {
  if (Platform.OS === "ios") {
    try {
      await openInbox({ title: "Open mail app" });
    } catch (error) {
      console.error(`OpenEmailbox > iOS Error > ${error}`);
    }
  }

  if (Platform.OS === "android") {
    const activityAction = "android.intent.action.MAIN";
    const intentParams = {
      category: "android.intent.category.APP_EMAIL",
    };
    IntentLauncher.startActivityAsync(activityAction, intentParams);
  }
}
-1

I think the following npm module should have what you're looking for. Unfortunately it uses native libraries so you'll have to run some react-native links.

https://www.npmjs.com/package/react-native-mail

1
  • Could you please provide an example of how to achieve this with the module you mentioned? Nov 1, 2017 at 11:53
-1

Use react-native-mail for launch email client. It will automatically open email client. https://www.npmjs.com/package/react-native-mail

-1

If you want a wrapper that works with Android and iOS. https://www.npmjs.com/package/react-native-email-action

iOS work's with other email app.

1
  • 1
    Thanks, this helped solve my problem! May 17, 2022 at 8:21
-1
import { Linking } from 'react-native'

React Native Open Mail 

<TouchableOpacity onPress={() => Linking.openURL('mailto:[email protected]')}>
   <Text>[email protected]</Text>
</TouchableOpacity>


React Native Open Mail With Subject & Body 

<TouchableOpacity onPress={() => Linking.openURL('mailto:[email protected]?subject=sendmail&body=details')}>
   <Text>[email protected]</Text>
</TouchableOpacity>

this will only work in real device. not working in iOS simulator.

-1

For open mail app, I've used like this and it's working for me

const subject = "Mail Subject";
const message = "Message Body";
Linking.openURL(`mailto:[email protected]?subject=${subject}&body=${message}`)
0
-4
<TouchableOpacity onPress={()=>{ 
  Linking.openURL('mailto:[email protected]?subject=mailsubject&body=mailbody');
                            }}>
    <View><Text>Contact Us</Text></View>
 </TouchableOpacity>

This work for me.!

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.