Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tschoffelen/react-native-email-link

📭 Open an email client from React Native (for 'magic link' type functionality).
https://github.com/tschoffelen/react-native-email-link

email react-native

Last synced: 4 days ago
JSON representation

📭 Open an email client from React Native (for 'magic link' type functionality).

Host: GitHub
URL: https://github.com/tschoffelen/react-native-email-link
Owner: tschoffelen
License: mit
Created: 2018-02-27T16:11:15.000Z (almost 7 years ago)
Default Branch: master
Last Pushed: 2024-10-29T08:39:15.000Z (about 2 months ago)
Last Synced: 2024-12-15T11:00:18.070Z (11 days ago)
Topics: email, react-native
Language: JavaScript
Homepage:
Size: 561 KB
Stars: 413
Watchers: 4
Forks: 74
Open Issues: 5
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

        # React Native Email Link

[![GitHub release](https://img.shields.io/npm/v/react-native-email-link.svg)](https://www.npmjs.com/package/react-native-email-link)

[![NPM](https://img.shields.io/npm/dm/react-native-email-link.svg)](https://www.npmjs.com/package/react-native-email-link)

[![GitHub license](https://img.shields.io/github/license/flexible-agency/react-native-email-link.svg)](https://github.com/flexible-agency/react-native-email-link/blob/master/LICENSE)

---

An easy way to open an email app of the user's choice, based on the mail 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](https://github.com/leanmotherfuckers/react-native-email-link/tree/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 mail apps installed by the user.

```xml

LSApplicationQueriesSchemes

    mailto

    message

    readdle-spark

    airmail

    ms-outlook

    googlegmail

    inbox-gmail

    ymail

    superhuman

    yandexmail

    fastmail

    protonmail

    szn-email

```

Expo – Enable Config Plugin

To allow the library to work with Expo you need to enable the [config plugin](https://docs.expo.dev/guides/config-plugins/). 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:

```json

{

  "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](https://docs.expo.dev/workflow/customizing/) for custom native code.

## Usage

### openInbox

```javascript

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

openInbox();

```

#### Arguments

- [`title`](#title)

- [`message`](#message)

- [`cancelLabel`](#cancelLabel)

- [`removeText`](#removeText)

- [`defaultEmailLabel`](#defaultEmailLabel)

- [`newTask`](#newTask)

#### `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](https://developer.android.com/guide/components/activities/tasks-and-back-stack).

| Type    | Required | Default | Platform |

| ------- | -------- | ------- | -------- |

| boolean | No       | true    | Android  |

#### Example

```javascript

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

openInbox({

  message: "Whatcha wanna do?",

  cancelLabel: "Go back!",

});

```

### openComposer

```javascript

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

openComposer();

```

#### Arguments

- [`app`](#app)

- [`title`](#title)

- [`message`](#message) (iOS only)

- [`cancelLabel`](#cancelLabel) (iOS only)

- [`removeText`](#removeText)

- [`defaultEmailLabel`](#defaultEmailLabel)

- [`to`](#to)

- [`cc`](#cc)

- [`bcc`](#bcc)

- [`subject`](#subject)

- [`body`](#body)

- [`encodeBody`](#encodeBody)

#### `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

```javascript

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

openComposer({

  to: "[email protected]",

  subject: "I have a question",

  body: "Hi, can you help me with...",

});

```

### getEmailClients

```javascript

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

---



	

		Get professional support for this package →

	

	


	_{Custom consulting sessions available for implementation support or feature development.}