How to share a document automatically with mail in React native mail linking?

1k Views Asked by At

I have a share button. On press of this button I called a function. That function basically creates a screen view pdf, and now I am storing that pdf in my state (means that pdf path). After that I am calling mail linking function. And by pressing share option I want to share that pdf file to that mail. It means, I want to append that pdf automatically in mail body.

Here's what I have tried, but this just adds a file path in mail body (not an actual file):

Linking.openURL(
     `mailto:[email protected]?subject=SendMail&body=${this.state.pdf}`
   );
2

There are 2 best solutions below

0
Jonah On

You can't add an attachment using a mailto link. Sorry.

You could put a link to the file in the mail body.

0
Muhammad Shoaib Riaz On

I couldn't find anything in the react native Linking.However I've found react-native-mail helpful

I've tested this on android and iOS react-native version 0.63.2

Sample Code

/**
 * 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: ['[email protected]'],
      ccRecipients: ['[email protected]'],
      bccRecipients: ['[email protected]'],
      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>
    );
  }
}