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

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

• Platform Specific Code for react-native https://reactnative.dev/docs/platform-specific-code
• Android Intent https://developer.android.com/reference/android/content/Intent#ACTION_MAIN
• Expo IntentLauncher https://docs.expo.dev/versions/latest/sdk/intent-launcher/