Open an email app with react-native expo for magic link onboarding

23 August 2021

Open the email app on React Native
Photo by @yogasdesign

In one of my previous articles, I shared how to open an email app with react-native. With another client, I need to execute exactly the same feature. But this time, I am working with a stack-based on expo.

I don't want to send a mail with the Linking API. I just want to launch the mail app and let users read messages. Especially the verification email we just sent during the new account flow.

Scenario:

As a user
I can launch the main email app on my device (iOS or Android)
So that I confirm my email

Pure expo.dev JavaScript solution

We are going to use 3 differents libraries:

  1. Platform from react-native for specific code
  2. react-native-email-link for iOS
  3. expo-intent-launcher for Android

Setup the libraries

Install the libraries with expo to be sure it's aligned with the version of your expo SDK.

Installation

expo install react-native-email-link expo-intent-launcher

Usage

const handleOpenEmailboxAsync = async () => {
if (Platform.OS === "ios") {
try {
await openInbox({
message: messageActionSheetiOS,
cancelLabel: "Cancel",
});
} catch (error) {
console.error(`OpenEmailbox > iOS Error > ${error}`);
}
}

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

<Button onPress={handleOpenEmailboxAsync}>Open email app</Button>
  • Works on Android.
  • On iOS you need a real device because there is no mail.app on iOS Simulator.

References

Gravatar for dleuliette@gmail.com

Hi, I’m David, a french freelance developer working remotely. I’m the author of this blog, nice to meet you!

Subscribe?

Be the first to receive insightful articles and actionable resources that help you to elevate your skills across every touch point.