A wrapper on top of MFMailComposeViewController from iOS and Mail Intent on android
Objective-C Java Ruby JavaScript
Clone or download



A React Native wrapper for Apple's MFMailComposeViewController from iOS and Mail Intent on android Supports emails with attachments.


There was a breaking change in RN >=40. So for React Native >= 0.40: use v3.x and higher of this lib. otherwise use v2.x

npm i --save react-native-mail # npm syntax
yarn add react-native-mail # yarn syntax

Automatic Installation

You can automatically link the native components or follow the manual instructions below if you prefer.

react-native link

Manual Installation: Android

  • In android/setting.gradle
include ':RNMail', ':app'
project(':RNMail').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-mail/android')
  • In android/app/build.gradle
dependencies {
    compile project(':RNMail')
  • if MainActivity extends Activity: register module in MainActivity.java
import com.chirag.RNMail.*;  // <--- import

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {

  protected void onCreate(Bundle savedInstanceState) {
    mReactRootView = new ReactRootView(this);

    mReactInstanceManager = ReactInstanceManager.builder()
      .addPackage(new MainReactPackage())
      .addPackage(new RNMail())              // <------ add here

    mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);



  • else if MainActivity extends ReactActivity: register module in MainApplication.java
import com.chirag.RNMail.*; // <--- import

public class MainApplication extends Application implements ReactApplication {

    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RNMail()      // <------ add here

Manual Installation: iOS

  1. Run npm install react-native-mail --save
  2. Open your project in XCode, right click on Libraries and click Add Files to "Your Project Name" (Screenshot) then navigate to node_modules/react-native-mail and select RNMail.xcodeproj (Screenshot).
  3. Add libRNMail.a to Build Phases -> Link Binary With Libraries (Screenshot).
  4. Whenever you want to use it within React code now you can: var Mailer = require('NativeModules').RNMail;


 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow

import React, { Component } from 'react';
import { View, Alert, Button } from 'react-native';
import Mailer from 'react-native-mail';

export default class App extends Component {

  handleEmail = () => {
      subject: 'need help',
      recipients: ['support@example.com'],
      ccRecipients: ['supportCC@example.com'],
      bccRecipients: ['supportBCC@example.com'],
      body: '<b>A Bold Body</b>',
      isHTML: true,
      attachment: {
        path: '',  // The absolute path of the file from which to read data.
        type: '',   // Mime Type: jpg, png, doc, ppt, html, pdf, csv
        name: '',   // Optional: Custom filename for attachment
    }, (error, event) => {
          {text: 'Ok', onPress: () => console.log('OK: Email Error Response')},
          {text: 'Cancel', onPress: () => console.log('CANCEL: Email Error Response')}
        { cancelable: true }

  render() {
    return (
      <View style={styles.container}>
          title="Email Me"
          accessabilityLabel="Purple Email Me Button"


On Android, the callback will only be called if an error occurs. The event argument is unused!

Here is how it looks:

Demo gif