How to launch and open email client React-native?

Question

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.

We just ran into this same issue. [This answer](https://stackoverflow.com/a/28190257/1572077) shows you how to open up a `mail client picker` in android, not just need something similar for ios. — miah, Mar 22 '18 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. — johnrubythecat, Jan 26 '22 at 16:39

Vishal Vaghasiya · Answer 1 · 2021-01-07T04:44:15.447

220

React Native Open Mail Function

<Button onPress={() => Linking.openURL('mailto:support@example.com') }
      title="support@example.com" />

React Native Open Mail Function With Subject and Body

<Button onPress={() => Linking.openURL('mailto:support@example.com?subject=SendMail&body=Description') }
      title="support@example.com" />

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.

edited Jan 07 '21 at 04:44

answered Feb 27 '18 at 12:46

Vishal Vaghasiya

4,618
3
29
40

29

`openURL('mailto:...')` opens an email to compose, not the email client, which jasan explicitly says he does not want to do. – miah Mar 22 '18 at 15:12
39

**Note:** Not supported in iOS simulator, so you must test on a device. – Ben Butterworth Jan 08 '20 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 – Zala Janaksinh Oct 12 '20 at 09: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);` – Simon K. Gerges Aug 27 '23 at 07:48

David Leuliette · Answer 2 · 2021-08-19T07:54:46.263

61

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:

Sign-In Screen with a button Open Email App
The user opens his email app
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.

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.

edited Aug 19 '21 at 07:54

answered Apr 01 '19 at 14:35

David Leuliette

1,595
18
26

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 '21 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 '21 at 19:52
i think it can be solve without using library. – lodey Jun 06 '22 at 08:04

score 10 · Answer 3 · answered May 01 '20 at 21:01

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/

the android version requires changes to the native code by installing the expo-intent-launcher — RayKay91, Jul 27 '21 at 09:51

score 6 · Answer 4 · answered Dec 20 '18 at 13:02

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)
      })

score 2 · Answer 5 · answered Jan 02 '19 at 12:50

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:support@example.com?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

score 1 · Answer 6 · answered Oct 08 '21 at 10:33

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

const emailId= 'care@flipkart.com'

 const onPressEmailClick = (email) => {
        Linking.openURL('mailto:'+email)
      //  Linking.openURL('mailto:Care@amazon.com')
     } 

  <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>

score 0 · Answer 7 · answered Apr 06 '22 at 10:34

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.

Nikola Pavlovic · Answer 8 · 2023-02-14T08:13:45.947

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);
  }
}

score -1 · Answer 9 · answered Aug 15 '17 at 06:31

-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

answered Aug 15 '17 at 06:31

cbartondock

663
6
17

Could you please provide an example of how to achieve this with the module you mentioned? – Shaked Sayag Nov 01 '17 at 11:53

score -1 · Answer 10 · answered Sep 10 '19 at 12:45

-1

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

answered Sep 10 '19 at 12:45

Dayachand Patel

469
4
12

score -1 · Answer 11 · answered Feb 03 '20 at 20:49

-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.

answered Feb 03 '20 at 20:49

Erick Maeda

329
1
10

1

Thanks, this helped solve my problem! – Daniel Barde May 17 '22 at 08:21

score -1 · Answer 12 · answered Feb 12 '20 at 06:18

import { Linking } from 'react-native'

React Native Open Mail 

<TouchableOpacity onPress={() => Linking.openURL('mailto:support@example.com')}>
   <Text>support@example.com</Text>
</TouchableOpacity>


React Native Open Mail With Subject & Body 

<TouchableOpacity onPress={() => Linking.openURL('mailto:support@example.com?subject=sendmail&body=details')}>
   <Text>support@example.com</Text>
</TouchableOpacity>

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

score -1 · Answer 13 · edited Sep 08 '21 at 08:47

-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:support@domain.com?subject=${subject}&body=${message}`)

edited Sep 08 '21 at 08:47

prd

2,272
2
17
32

answered Sep 19 '20 at 07:13

Akshay I

3,675
1
34
57

score -4 · Answer 14 · edited May 29 '18 at 11:27

-4

<TouchableOpacity onPress={()=>{ 
  Linking.openURL('mailto:support@domain.com?subject=mailsubject&body=mailbody');
                            }}>
    <View><Text>Contact Us</Text></View>
 </TouchableOpacity>

This work for me.!

edited May 29 '18 at 11:27

David Schumann

13,380
9
75
96

answered Mar 04 '18 at 15:16

Jitender Badoni

218
1
9

How to launch and open email client React-native?

14 Answers14

React Native Open Mail Function

React Native Open Mail Function With Subject and Body

React Native Open URL

iOS work's with other email app.

Linked