1.0.0 • Published 3 years ago

react-native-email-intent v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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

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:

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>
</array>

Using Expo? Read the instructions to make it work on iOS.

When switching to Android 11/Android SDK 30 (i.e. using Expo SDK 41), this library doesn't work out of the box anymore. The reason is the new Package Visibilty security feature. We'll have to update our AndroidManifest.xml to explicitly allow querying for other apps.

You can do so by coping the <queries> statement below, and pasting it in the top level of your AndroidManifest (i.e. within the <manifest> ... </manifest>).

<queries>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="mailto"/>
  </intent>
</queries>

Read the instructions here to make it work on iOS.

Usage

openInbox

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

openInbox();

Arguments

title

Text for the top of the ActionSheet or Intent.

TypeRequiredDefault
stringNo'Open mail app'

message

Subtext under the title on the ActionSheet

TypeRequiredDefaultPlatform
stringNo'Which app would you like to open?'iOS

cancelLabel

Text for last button of the ActionSheet.

TypeRequiredDefaultPlatform
stringNo'Cancel'iOS

removeText

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

TypeRequiredDefault
booleanNofalse

newTask

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

Read more about Android tasks here.

TypeRequiredDefaultPlatform
booleanNotrueAndroid

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

Text for the top of the ActionSheet or Intent.

TypeRequiredDefault
stringNo'Open mail app'

message

Subtext under the title on the ActionSheet.

TypeRequiredDefaultPlatform
stringNo'Which app would you like to open?'iOS

cancelLabel

Text for last button of the ActionSheet.

TypeRequiredDefaultPlatform
stringNo'Cancel'iOS

removeText

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

TypeRequiredDefault
booleanNofalse

to

Recipient's email address.

TypeRequiredDefault
stringNonull

cc

Email's cc (iOS only).

TypeRequiredDefault
stringNonull

bcc

Email's bcc (iOS only).

TypeRequiredDefault
stringNonull

subject

Email's subject.

TypeRequiredDefault
stringNonull

body

Email's body.

TypeRequiredDefault
stringNonull

encodeBody

Apply encodeURIComponent to the email's body.

TypeRequiredDefault
booleanNofalse

Example

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

openComposer({
  to: "support@example.com",
  subject: "I have a question",
  body: "Hi, can you help me with...",
});