How to Prompt to Compose Email with given Subject and Body in React Native

We use apps of email clients on our phones to access our emails seamlessly. Gmail is one of the most popular email clients out there. In this blog post, let’s see how to prompt a user to open their email client’s compose section with our own delivery email address, subject and body in react native.

If you have a feedback section in your react native app then this feature can be really useful. The user does not need to remember the email address as we pass the ‘to’ email address, subject, and body to their email client.

The React Native API Linking helps you to interact with both incoming and outgoing app links. We can use Linking API to open other apps including email client apps.

import { Linking } from 'react-native';

Linking.openURL('mailto:support@example.com?subject=SendMail&body=Description');

Here, mailto refers to the delivery email address. Subject is where you should give the subject line and body gets the description or matter.

Following is the complete react native example to apps such as Gmail.

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

const App = () => {
  return (
    <View style={styles.container}>
      <Button
        title="Share"
        onPress={() =>
          Linking.openURL(
            'mailto:support@example.com?subject=SendMail&body=Description',
          )
        }
      />
    </View>
  );
};

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

export default App;

That’s it. I hope this blog post helped you!