How to launch and open email client React-native?

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.

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.

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.

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.

You can use react natives Linking module for this purpose. Here is a link to the module https://facebook.github.io/react-native/docs/linking.html.

Example: Linking.openURL('mailto:[email protected]?subject=example&body=example')

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

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/

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

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.
 

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

<TouchableOpacity onPress={()=>{ 
  Linking.openURL('mailto:[email protected]?subject=mailsubject&body=mailbody');
                            }}>
    <View><Text>Contact Us</Text></View>
 </TouchableOpacity>

This work for me.!

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

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.

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

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>

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.