📮 react-native-email

Send a email using the Linking API

Table of Contents

• 📮 react-native-email
  • Table of Contents
  • Install
  • Usage
    • Running on iOS simulator
    • Running on Android SDK 30+
  • API
  • Contributing
  • License

Install

Install the package locally within you project folder with your package manager:

With npm:

npm install react-native-email

With yarn:

yarn add react-native-email

Usage

import React from 'react'
import { StyleSheet, Button, View } from 'react-native'
import email from 'react-native-email'

export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Button title="Send Mail" onPress={this.handleEmail} />
            </View>
        )
    }

    handleEmail = () => {
        const to = ['[e-mail]', '[e-mail]'] // string or array of email addresses
        email(to, {
            // Optional additional arguments
            cc: ['[e-mail]', '[e-mail]'], // string or array of email addresses
            bcc: '[e-mail]', // string or array of email addresses
            subject: 'Show how to use',
            body: 'Some body right here'
            checkCanOpen: false // Call Linking.canOpenURL prior to Linking.openURL
        }).catch(console.error)
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
    }
})

This results to:

Running on iOS simulator

When running on the iOS simulator, you will get a the URL is invalid error. This will work on an actual device. The iOS simulator does not have access to the dialer app..

Running on Android SDK 30+

You will encounter a Provided URL can not be handled error when attempting to use the function with the checkCanOpen flag enabled.

Android SDK 30 introduced changes around how apps can query and interact with other apps. This means Linking.canOpenURL returns false for all links unless a <queries> element is added to AndroidManifest.xml. Adding the following intent to android/app/src/main/AndroidManifest.xml should resolve the issue:

<queries>
      <intent>
        <action android:name="android.intent.action.DIAL" />
      </intent>
</queries>

API

For all configuration options, please see the API docs.

Contributing

Got an idea for a new feature? Found a bug? Contributions are welcome! Please open up an issue or make a pull request.

License

MIT © Tiaan du Plessis