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 from instamobile React Native App Templates 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 in our project. Hence, we can install using the following command in command prompt: firebase-tools 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 of the ’ directory. Then, we need to import the module in order to send email as shown in the code snippet below: index.js ‘./functions nodemailler nodemailer = ( ); const 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: gmailEmail = ; gmailPassword = ; mailTransport = nodemailer.createTransport({ : , : { : gmailEmail, : gmailPassword,
      },
    }); const 'your send email' const 'your email' const service 'gmail' auth user pass 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( )
      .onCreate( (snapshot, context) => {
    } '/contact/{contact_id}' async The further explanation is provided with ref as shown in the code snippet below: .ref( ) '/contact/{contact_id}' Here, we will add prefix for access auto generated id as shown in the code snippet below: {contact_id} exports.sendEmailConfirmation = functions.database
      .ref( )
      .onCreate( (snapshot, context) => { val = snapshot.val(); mailOptions = { : , : , : + val.name, : + val.message + ,
        }; { mailTransport.sendMail(mailOptions); .log( , val.email);
        } (error) { .error( , error);
        } ;
      }); '/contact/{contact_id}' async const const from 'your sending email' to 'your receiving email' subject 'Hey new message from ' html '<b>' '</b>' try await console `New message sent to:` ${val.message ? : } '' 'un' catch console 'There was an error while sending the email:' return null We can get the snapshot value with . Then, we can assign it to mail object and send an email out with mailTransport. val() 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 . Using moment.js, we get the submit time and save to . Then, when the user submits the form, we are going to hide the form and inform the user that the submission limit has reached. momentjs AsyncStorage First, we need to import the required packages as shown in the code snippet below in file: Contact.js AsyncStorage ; moment ; import from '@react-native-community/async-storage' import from 'moment' Then, we need to configure the handleSubmit function again as shown in the code snippet below: getSubmitDuration = () => { now = moment(); AsyncStorage.getItem( ).then( { diff = moment.duration(now.diff(moment(submit_time))).asMinutes(); .log(diff); (diff <= ) { .setState({ : });
          }
        });
      }; async let await 'submit_time' => submit_time let console if 60 this 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() { ( .state.block_submit) { ( <Image
                style={{width: 100, height: 100}}
                source={require('../assets/block.png')}
              />
              <Text style={{fontSize:25}}>Your can submit again in next hour</Text>
            </View> <View style={styles.container}>
              <Form
                type={ContactForm} if this return < = ' ', ' ',}}> View style {{flex:1,justifyContent: center alignItems: center );
        } else {
          return ( Here, we use the condition every time the screen is loaded. For that, we are going to call the function is the hook as shown in the code snippet below: componentDidMount componentDidMount() { .getSubmitDuration();
      } async this 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 in the react native application.Then, we learned how to make use of components from 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. react-native-firebase tcomb-form-native package

How To Build WordPress App with React Native Part #16: Adding Dark Mode

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

10 Best React Native Chart Libraries

10 Web Development Boosting Node.js Libraries and Frameworks

10 Things You Didn't Know You Could Do With Google Keep

10 Best Low-Code And No-Code AI Application Development Platforms in 2022

10 Data Table Libraries for JavaScript

119 Stories To Learn About Apps

10 Best React Native Chart Libraries

10 Web Development Boosting Node.js Libraries and Frameworks

10 Things You Didn't Know You Could Do With Google Keep

10 Best Low-Code And No-Code AI Application Development Platforms in 2022

10 Data Table Libraries for JavaScript

119 Stories To Learn About Apps

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps