React Native Email Link

An easy way to open an email app of the user's choice, based on the apps they have installed on their device. Very helpful for magic link logins.

Currently supported apps:

Apple Mail
Gmail
Inbox
Spark
Airmail
Outlook
Yahoo Mail
Superhuman
Yandex
ProtonMail
Fastmail

Installation

1. Install the package

yarn add react-native-email-link

This package works with autolinking on RN>=0.60. If you're using an earlier version of React Native, please install version 1.4.0 of the library, or check out the legacy rnpm branch.

2. Post-install steps

Based on the platforms your app supports, you also need to:

iOS – Update Info.plist

To allow your app to detect if any of the mailbox apps are installed, an extra step is required on iOS. Your app needs to provide the LSApplicationQueriesSchemes key inside ios/{my-project}/Info.plist to specify the URL schemes with which the app can interact.

Just add this in your Info.plist depending on which apps you'd like to support. Omitting these might mean that the library can't detect some of the maps apps installed by the user.

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>message</string>
    <string>readdle-spark</string>
    <string>airmail</string>
    <string>ms-outlook</string>
    <string>googlegmail</string>
    <string>inbox-gmail</string>
    <string>ymail</string>
    <string>superhuman</string>
    <string>yandexmail</string>
    <string>fastmail</string>
    <string>protonmail</string>
</array>

Expo – Enable Config Plugin

To allow the library to work with Expo you need to enable the config plugin. This plugin will automatically configure your Expo application with the correct settings for this library to function.

To enable the config plugin, add it to the plugins array inside your app.config.js/app.config.json. For example:

{
  "name": "my app",
  "plugins": ["react-native-email-link"]
}

Want this library to work on Android too? Because the library uses native code on Android you need to follow Expo's guide for custom native code.

Usage

openInbox

import { openInbox } from "react-native-email-link";

openInbox();

`title`

Text for the top of the ActionSheet or Intent.

Type	Required	Default
string	No	'Open mail app'

`message`

Subtext under the title on the ActionSheet

Type	Required	Default	Platform
string	No	'Which app would you like to open?'	iOS

`cancelLabel`

Text for last button of the ActionSheet.

Type	Required	Default	Platform
string	No	'Cancel'	iOS

`removeText`

If true, not text will be show above the ActionSheet or Intent. Default value is false.

Type	Required	Default
boolean	No	false

`newTask`

If true, the email Intent will be started in a new Android task. Else, the Intent will be launched in the current task.

Type	Required	Default	Platform
boolean	No	true	Android

Example

import { openInbox } from "react-native-email-link";

openInbox({
  message: "Whatcha wanna do?",
  cancelLabel: "Go back!",
});

openComposer

import { openComposer } from "react-native-email-link";

openComposer();

Arguments

title
message (iOS only)
cancelLabel (iOS only)
removeText
to
cc (iOS only)
bcc (iOS only)
subject
body
encodeBody

`title`

Text for the top of the ActionSheet or Intent.

Type	Required	Default
string	No	'Open mail app'

`message`

Subtext under the title on the ActionSheet.

Type	Required	Default	Platform
string	No	'Which app would you like to open?'	iOS

`cancelLabel`

Text for last button of the ActionSheet.

Type	Required	Default	Platform
string	No	'Cancel'	iOS

`removeText`

If true, not text will be show above the ActionSheet or Intent. Default value is false.

Type	Required	Default
boolean	No	false

`to`

Recipient's email address.

Type	Required	Default
string	No	null

`cc`

Email's cc (iOS only).

Type	Required	Default
string	No	null

`bcc`

Email's bcc (iOS only).

Type	Required	Default
string	No	null

`subject`

Email's subject.

Type	Required	Default
string	No	null

`body`

Email's body.

Type	Required	Default
string	No	null

`encodeBody`

Apply encodeURIComponent to the email's body.

Type	Required	Default
boolean	No	false

Example

import { openComposer } from "react-native-email-link";

openComposer({
  to: "[email protected]",
  subject: "I have a question",
  body: "Hi, can you help me with...",
});

Get professional support for this package →
_{Custom consulting sessions available for implementation support or feature development.}

mikeduister / react-native-email-link Goto Github PK