I am new at react native. I have a text input area in my app. I want to send the text that user wrote to my gmail . How can I do that?

Here my codes:

import React, { useState } from "react"
import { View, Text, TextInput } from "react-native"
import ModalButton from "./ModalButton"
import styles from "./theme"



const StoreReview = (props) => {

    const [comment, setComment] = useState('')

    return (
        <View style={styles.container}>
            <Text style={styles.headerText}>
                We are very sorry about this.
                Can you share your experiences?
            </Text>
            <View style={styles.commentArea}>
                <TextInput
                    onChangeText={setComment}
                    value={comment}
                    multiline={true}
                />
            </View>
            <View style={styles.button}>
                <ModalButton
                    buttonText={'Send'}
                    onPress={() => {
                        console.log(comment, 'send that commet to gmail')
                    }}
                />
            </View>
        </View>
    )
}
export default StoreReview

CodePudding user response：

You could use the Linking module with the mailto scheme to open the mail app.

Import the Linking module:

import { Linking } from 'react-native';

Then, use its openURL() function to open the mail app:

await Linking.openURL('mailto:[email protected]');

You can also use the canOpenURL() function to check if the link is supported:

const url = 'mailto:[email protected]';

const supported = await Linking.canOpenURL(url);

if (supported) {
  await Linking.openURL(url);
}

So, in your example, that'd look like:

import React, { useState, useCallback } from 'react';
import { View, Text, TextInput, Linking } from 'react-native';
import ModalButton from './ModalButton';

const StoreReview = (props) => {
    const [comment, setComment] = useState('');

    const emailAddress = '[email protected]';
    const url = `mailto:${emailAddress}?body=${comment}`;

    const handlePress = useCallback(async () => {
        const supported = await Linking.canOpenURL(url);

        if (supported) {
            await Linking.openURL(url);
        }
    }, [url]);

    return (
        <View style={styles.container}>
            <Text style={styles.headerText}>
                We are very sorry about this.
                Can you share your experiences?
            </Text>
            <View style={styles.commentArea}>
                <TextInput
                    onChangeText={setComment}
                    value={comment}
                    multiline={true}
                />
            </View>
            <View style={styles.button}>
                <ModalButton
                    buttonText="Send"
                    onPress={handlePress}
                />
            </View>
        </View>
    );
}

export default StoreReview;

Edit: I just realized you want to include the comment in the email's body.

To set the email subject and body, simply change your URL from mailto:[email protected] to mailto:[email protected]?subject=Hello&body=World.

So, in your case, the URL should be:

const [comment, setComment] = useState('');

const emailAddress = '[email protected]';
const url = `mailto:${emailAddress}?body=${comment}`;