How To Build WordPress App with React Native Part#15: Forwarding Message to Inbox

This series intends to show how I build an app to serve content from my WordPress blog by using react-native. Since my blog is talking about react-native, the series and the articles are interconnected. We will learn how to set-up many packages that make our lives comfortable and learn how to deal with WordPress APIs. Here, the most prominent features talked about in the book are the dark theme, offline mode, infinite scroll and many more. You can discover much more in this series. this inspiration to do this tutorial series came from the React Native App Templates from instamobile

We are going to forward the message to the email inbox using the cloud function. Here, will initialize the cloud function. The important thing is that we should initialize it somewhere out of our project because it will produce the node_module conflict. Now, in order to implement it, we need to install the firebase-tools in our project. Hence, we can install using the following command in command prompt:

npm install -g firebase-tools

Then, we need to run the firebase login in order to authenticate using the following command:

firebase login

Then, we can start a new project using the following command:

firebase init functions

Hence, our project structure will appear as shown in the screenshot on the next page:

Now, we need to goto index.js of the ‘./functions ’ directory. Then, we need to import the nodemailler module in order to send email as shown in the code snippet below:

const nodemailer = require('nodemailer');

Next, we need to configure the instance for demonstration. We can use Gmail for easy setup. But other services can also be used like Sendgrid or Mailerlite. The implementation is provided in the code snippet below:

const gmailEmail = 'your send email';
    const gmailPassword = 'your email';
    const mailTransport = nodemailer.createTransport({
      service: 'gmail',
      auth: {
        user: gmailEmail,
        pass: gmailPassword,
      },
    });

Next, we need to define a trigger. Whenever a new node is added to contact, it will trigger onCreate and get a snapshot of incoming. For that, we can use the code from the following code snippet:

  exports.sendEmailConfirmation = functions.database
      .ref('/contact/{contact_id}')
      .onCreate(async (snapshot, context) => {
    }

The further explanation is provided with ref as shown in the code snippet below:

.ref('/contact/{contact_id}')

Here, we will add prefix {contact_id} for access auto generated id as shown in the code snippet below:

   exports.sendEmailConfirmation = functions.database
      .ref('/contact/{contact_id}')
      .onCreate(async (snapshot, context) => {
        const val = snapshot.val();
        const mailOptions = {
          from: 'your sending email',
          to: 'your receiving email',
          subject: 'Hey new message from ' + val.name,
          html: '<b>' + val.message + '</b>',
        };
        try {
          await mailTransport.sendMail(mailOptions);
          console.log(`New ${val.message ? '' : 'un'} message sent to:`, val.email);
        } catch (error) {
          console.error('There was an error while sending the email:', error);
        }
        return null;
      });

We can get the snapshot value with val(). Then, we can assign it to mail object and send an email out with mailTransport.

Now, we need to run the following command:

firebase deploy

Hence, we will get the following result when we go to the firebase console:

We can see our function here.

Next, we need to come back to the app and hit the save message again which will show the following logs result:

Here, we can see the log display email was sent.

Then, we can see the email received in the device below:

Prevent submit multiple time

Here, we are going to prevent the user from submitting the contact form multiple times. For that, we are going to use momentjs . Using moment.js, we get the submit time and save to AsyncStorage. Then, when the user submits the form, we are going to hide the form and inform the user that the submission limit has reached.

First, we need to import the required packages as shown in the code snippet below in Contact.js file:

 import AsyncStorage from '@react-native-community/async-storage';
    import moment from 'moment';

Then, we need to configure the handleSubmit function again as shown in the code snippet below:

    getSubmitDuration = async () => {
        let now = moment();
        await AsyncStorage.getItem('submit_time').then(submit_time => {
          let diff = moment.duration(now.diff(moment(submit_time))).asMinutes();
          console.log(diff);
          if (diff <= 60) {
            this.setState({block_submit: true});
          }
        });
      };

Here, we save submit time to the storage.

Then, we are going to create function in order to get and calculate the block duration. The overall implementation of the function is provided in the code snippet below:

 render() {
        if (this.state.block_submit) {
          return (
            <View style={{flex:1,justifyContent:'center',alignItems: 'center',}}>
              <Image
                style={{width: 100, height: 100}}
                source={require('../assets/block.png')}
              />
              <Text style={{fontSize:25}}>Your can submit again in next hour</Text>
            </View>
          );
        } else {
          return (
            <View style={styles.container}>
              <Form
                type={ContactForm}

Here, we use the condition every time the screen is loaded. For that, we are going to call the function is the componentDidMount hook as shown in the code snippet below:

   async componentDidMount() {
        this.getSubmitDuration();
      }

Now, spamming the save button in the Contact Screen is impossible now. If the limit exceeds, we get the following result in the emulator screen on the next page:

Summary

In this chapter we leaned how to set up the react-native-firebase in the react native application.Then, we learned how to make use of components from tcomb-form-native package in order to implement the form in the Contact screen. Then, we implemented the sending of message to the firebase. We also used firebase tool package in order to forward the message to the email. Then, we prevented the spamming of save button in the Contact screen as well setting the limit.