Magic link onboarding with React Native

Open the email app on React Native
Photo by @yogasdesign

⚠️ Projects with Native Code Only: The following section only applies to projects with native code exposed. If you are using the managed expo-cli workflow, see the issue for expo support.


It's Monday and as a developer, you have a new card on your backlog.

Scenario:

As a User,
I can open the mail app,
So that I can continue the password-less onboarding

If you check the documentation you need to use Linking:

Simple right?

The problem with Linking is you need to call a mailto:

That's not what we want.

I don't want to compose an email. I just want to be able to launch the main email app. If you are familiar with Slack here is a screenshot of their onboarding.

Notice we have a button Open email app

Open the email app with React Native

When you push the button, you can select the email app of your choice. In my case, it's between Gmail and the Apple mail app.

There is a lib for that™️

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

Installation

yarn add react-native-email-link

Usage

import { openInbox } from 'react-native-email-link'

openInbox()
  • 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.

One more thing.
If you learned something new, let me know andshare this article on Twitter.

Meet the author

David is a freelance developer and trainer specializing in cross-platform application development. He helped dozens of companies to ship their MVP and automate their process.

Gravatar for dleuliette@gmail.com

David Leuliette

Freelance React Developer

twitter
github
Subscribe?

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