How to make your React Native app send emails

Written by Dmytro Zaichenko

React Native is an extremely popular framework for building cross-platform apps, with 42% of the market in 2020 compared to 39% for Flutter, the next most popular choice. Email is still a popular communication. So why won’t you combine these two worlds?

Communicating with your customers by using different channels is the perfect way to make them loyal and provide the best possible user experience. In this post, we will describe the benefits of setting up email sending from your app and discuss three ways to do that.

Configuring in-app email sending

What kind of emails can you send from an app?

Firstly, apps can send various types of transactional emails: confirmation emails, password reset emails, etc. It is a great way of setting everything up within an app – no need for redirects, users don’t need to visit your website and log in there, and you don’t need to make a complex sending infrastructure.

Secondly, it is very convenient to send notification emails to inform users about updates, upcoming service maintenance, and so on. Also, this is the way to double a critical message: in-app notification + email sending for a customer not to lose critical information, say, recovery keys.

Third, for fintech or car-sharing applications, in-app emails are a must since such apps send receipts and confirmation details right after the action is triggered. From this example, comes the last important details of having in-app emails.

Sending emails from your application is are a great channel for customer communication.
In an efficient way, you can integrate customer support replies, request submissions, receipt deliveries, and more right into your React Native app. As mentioned, it eliminates the necessity of redirects to web pages, which can save time for your users and improve UX.

3 ways to send emails from your React Native app

Let’s explore three different ways of how to share emails with users from your React Native application.

Configuring Linking API

The easiest way of making your application send electronic letters is with React’s Linking API. It can come in handy not only with sending emails but also with link interaction within an application, and prefilling emails for reporting errors or submitting requests.

In order to build and send an email, let’s utilize OpenURL(), the method is used for opening different links via an application. Before redirecting people to an email client, this method will always ask to confirm their intent.

Let’s imagine you need to send a quick customer satisfaction survey right after the first month of the user’s experience with your app. As you can’t utilize Linking API to send attachments, you will need to insert a link only

Here’s how an example URL will look:

mailto: <user@domain.com>
?subject=<'We need your feedback'>&
body=<'UserName, we need 2 minutes of your time to fill this quick survey https://blog.codemagic.io/how-to-make-your-react-native-app-send-emails/'>&

Along with the complete version to include in the code:

// send-email.js
import qs from 'qs';
import { Linking } from 'react-native';


export async function sendEmail(to, subject, body, options = {}) {
    const { cc, bcc } = options;

    let url = `mailto:${to}`;

    // Create email link query
    const query = qs.stringify({
        subject: subject,
        body: body,
        cc: cc,
        bcc: bcc
    });

    if (query.length) {
        url += `?${query}`;
    }

    // check if we can use this link
    const canOpen = await Linking.canOpenURL(url);

    if (!canOpen) {
        throw new Error('Provided URL can not be handled');
    }

    return Linking.openURL(url);
}


// example.js

import { sendEmail } from './send-email';

sendEmail(
    'user@domain.com',
       'We need your feedback',
    'UserName, we need 2 minutes of your time to fill this quick survey https://blog.codemagic.io/how-to-make-your-react-native-app-send-emails/',
 { cc: 'user@domain.com; user2@domain.com; userx@domain1.com' }
).then(() => {
    console.log('Your message was successfully sent!');
});

The method is one of the easiest and time-effective, but again, you can’t send attachments.

Working with your own server

For those who wish to avoid working with 3rd party providers, there is an option to set up their own server to enable in-app email sending.

One of the options includes sending a message with Nodemailer. However, this method has its downsides as in order to use it, you will need to add your SMTP server credentials, which might be a concern in terms of security.

Another option is configuring a proxy server. While it enables sending emails away from the device, it also calls for additional development and non-fast deployment.

In general, configuring your own server for sending takes much time and effort, but this is an option if you don’t want third parties to be involved in the process.

Using third-party tools

One of the most durable ways of sending messages from a React Native App is through utilizing 3rd party services.

To share emails with people in the app background, you need to configure certain triggers (for example, a click on a “sign-in” button, etc.). For this, there are a number of 3rd party tools you can utilize.

Firstly, you can combine Firebase with SendGrid and Zapier. After creating an account with Firebase, the goal is to deliver emails after the new child record appears in Firebase Database.

As you will not manage to send them directly, Zapier is the one to trigger the action from the tool you will eventually choose for that (for example, SendGrid), and add one of the “zaps” to the child record.

Secondly, you have an option to combine Firebase CloudBase, Gmail, and the already known Nodemailer. As was mentioned above, Firebase can easily create triggers for a number of different events based on customer actions within the app and send letters without redirecting people to their email apps.

Firebase CloudBase enables sending such emails with Nodemailer. For the latter to work properly, you need to have an email account that will handle sending of the letters. One of the tools to utilize is Gmail, but you are free to choose SendGrid or any other alternative.

This approach requires setup and integrations of several tools, it may cause security concerns, but still, it’s the most flexible approach to make your React Native app send emails.

Wrap up

Making an app to send emails in 2021 is worth trying to improve UX. Besides, doing it in React Native app is not a difficult task. You only need to select the right approach.

When you just want to deliver simple emails with links in the body, Linking API is your way to go. It is very simple and does not take too much time to configure.

For sending different types of triggered emails with personalized HTML templates, you’d probably need to integrate third-party tools. It requires time and money, though.

For those on a tight budget, setting up your own proxy server will be a great method to try, but you have to spend time configuring everything correctly.

Dmytro Zaichenko is a Digital Marketing Specialist at Mailtrap, an email sandbox service. He has 6+ years of experience in content making. Apart from writing, he’s passionate about networking and the NBA.