Nomadic People Migration

    react-native-mail
    TypeScript icon, indicating that this package has built-in type declarations

    6.1.1 • Public • Published

    react-native-mail

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

    Installation

    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 {
      ......
    
      @Override
      protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mReactRootView = new ReactRootView(this);
    
        mReactInstanceManager = ReactInstanceManager.builder()
          .setApplication(getApplication())
          .setBundleAssetName("index.android.bundle")
          .setJSMainModuleName("index.android")
          .addPackage(new MainReactPackage())
          .addPackage(new RNMail())              // <------ add here
          .setUseDeveloperSupport(BuildConfig.DEBUG)
          .setInitialLifecycleState(LifecycleState.RESUMED)
          .build();
    
        mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);
    
        setContentView(mReactRootView);
      }
    
      ......
    
    }
    • else if MainActivity extends ReactActivity: register module in MainApplication.java
    import com.chirag.RNMail.*; // <--- import
    
    public class MainApplication extends Application implements ReactApplication {
        ....
    
        @Override
        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;

    Example

    /**
     * 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 = () => {
        Mailer.mail({
          subject: 'need help',
          recipients: ['support@example.com'],
          ccRecipients: ['supportCC@example.com'],
          bccRecipients: ['supportBCC@example.com'],
          body: '<b>A Bold Body</b>',
          customChooserTitle: 'This is my new title', // Android only (defaults to "Send Mail")
          isHTML: true,
          attachments: [{
            // Specify either `path` or `uri` to indicate where to find the file data.
            // The API used to create or locate the file will usually indicate which it returns.
            // An absolute path will look like: /cacheDir/photos/some image.jpg
            // A URI starts with a protocol and looks like: content://appname/cacheDir/photos/some%20image.jpg
            path: '', // The absolute path of the file from which to read data.
            uri: '', // The uri of the file from which to read the data.
            // Specify either `type` or `mimeType` to indicate the type of data.
            type: '', // Mime Type: jpg, png, doc, ppt, html, pdf, csv
            mimeType: '', // - use only if you want to use custom type
            name: '', // Optional: Custom filename for attachment
          }]
        }, (error, event) => {
          Alert.alert(
            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}>
            <Button
              onPress={this.handleEmail}
              title="Email Me"
              color="#841584"
              accessabilityLabel="Purple Email Me Button"
            />
          </View>
        );
      }
    }
    

    Note

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

    Here is how it looks:

    Demo gif

    Install

    npm i react-native-mail

    DownloadsWeekly Downloads

    12,302

    Version

    6.1.1

    License

    MIT

    Unpacked Size

    229 kB

    Total Files

    18

    Last publish

    Collaborators

    • chirag04