npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@react-native-oh-tpl/react-native-email-link

v1.15.0-0.0.2

Published

Open the mail app of the user's choice

Downloads

87

Readme

React Native Email Link

GitHub release NPM GitHub license


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:

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>mailto</string>
    <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>
    <string>szn-email</string>
</array>

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();

Arguments

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 |

defaultEmailLabel

Text for first button of the ActionSheet.

| Type | Required | Default | Platform | | ------ | -------- | ---------------------- | -------- | | string | No | 'Default email reader' | iOS |

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.

| 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

app

App to open the composer with

| Type | Required | Example | | ------ | -------- | ------------------------------------------------------------- | | string | No | An app's id that can be retrieved with getEmailClients | | | | On Android - id holds the package name, e.g. com.mail.app | | | | On iOS - id holds the app slug/name, e.g. gmail |

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 |

defaultEmailLabel

Text for first button of the ActionSheet.

| Type | Required | Default | Platform | | ------ | -------- | ---------------------- | -------- | | string | No | 'Default email reader' | iOS |

to

Recipient's email address.

| Type | Required | Default | | ------ | -------- | ------- | | string | No | null |

cc

Email's cc.

| Type | Required | Default | | ------ | -------- | ------- | | string | No | null |

bcc

Email's bcc.

| 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...",
});

getEmailClients

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

const clients = await getEmailClients();

console.log(clients)[
  {
    iOSAppName: "gmail", // iOS only
    prefix: "gmail://",
    title: "GMail",
    androidPackagename: "com.google.android.gm", // Android only
    id: "gmail", // depending on the platform, holds either the package name or the app slug value
  }
];

To utilize this feature to display an email client picker within a custom UI and subsequently use the openComposer to launch a specific app, you just need to pass the id (from response) value into the options (options.app) within the openComposer.