Triggers

15min
Using Cloud Functions in a React Native App
Introduction
In this guide, you will learn how to use the Parse Cloud Code Functions from a React Native App. You will see examples of triggers implemented using cloud functinos, and also check how to implement a React Native component using these functions and Back4App.
Prerequisites
To complete this tutorial, you will need:
A React Native App created and connected to Back4App.
Understand how to deploy a cloud function on Back4App.
If you want to run this guide’s example application, you should set up thereact-native-paper﻿library.
Goal
Run Parse Cloud Code on Back4App from a React Native App.
- Understanding Cloud Code Functions
In your applications, there will be times that you will need to perform certain data operations or heavy processing that shouldn’t be done on mobile devices. For these cases, you may use Cloud Code functions, that run directly on your Parse server and are called using Parse API. Note that this also enables changing some part of your app’s logic without needing to release a new version on the app stores, which can be useful in some cases.
There are two main types of Cloud Code functions, generic functions, using define and holding any type of code you want, and triggers, that are fired when certain events occur in your Parse server automatically.
In the next step, you will be presented with examples for most of these function types, which can be created and deployed directly in your Back4App dashboard or via CLI. You can check how to perform this in our Cloud functions starter guide.
- Cloud Code Reference
Cloud Functions
Cloud Functions
// This a generic cloud function that may contain any type of operation,
// these should be called via API in your app to be run
Parse.Cloud.define("getAverageMovieReviews", async (request) => {
 const query = new Parse.Query("Review");
 // Parameters can be passed in your request body and are accessed inside request.params
 query.equalTo("movie", request.params.movie);
 const results = await query.find();
 let sum = 0;
 for (let review of results) {
   sum += review.get("stars");
 }
 return {
   result: sum / results.length,
 }
});
// This a generic cloud function that may contain any type of operation,
// these should be called via API in your app to be run
Parse.Cloud.define("getAverageMovieReviews", async (request) => {
 const query = new Parse.Query("Review");
 // Parameters can be passed in your request body and are accessed inside request.params
 query.equalTo("movie", request.params.movie);
 const results = await query.find();
 let sum = 0;
 for (let review of results) {
   sum += review.get("stars");
 }
 return {
   result: sum / results.length,
 }
});
﻿
Response:
 { "result": 3.5 }
Save Triggers
beforeSave
afterSave
// This will run every time an object of this class will be saved on the server
Parse.Cloud.beforeSave("Product", (request) => {
 // You can change any data before saving, can be useful for trimming text
 // or validating unique fields
 const name = request.object.get("description");
 if (description.length > 140) {
   // Truncate and add a ...
   request.object.set("description", comment.substring(0, 137) + "...");
 }
});
// This will run every time an object of this class will be saved on the server
Parse.Cloud.beforeSave("Product", (request) => {
 // You can change any data before saving, can be useful for trimming text
 // or validating unique fields
 const name = request.object.get("description");
 if (description.length > 140) {
   // Truncate and add a ...
   request.object.set("description", comment.substring(0, 137) + "...");
 }
});
﻿
Delete Triggers
beforeDelete
afterDelete
// This will be called before deleting an object, useful for checking
// for existing dependent conditions
Parse.Cloud.beforeDelete("Album", async (request) => {
 // This won't proceed deleting if the condition is not met, protection your
 // data
 const query = new Parse.Query("Photo");
 query.equalTo("album", request.object);
 const count = await query.count();
 if (count > 0) {
   throw "Can't delete album if it still has photos.";
 }
});
// This will be called before deleting an object, useful for checking
// for existing dependent conditions
Parse.Cloud.beforeDelete("Album", async (request) => {
 // This won't proceed deleting if the condition is not met, protection your
 // data
 const query = new Parse.Query("Photo");
 query.equalTo("album", request.object);
 const count = await query.count();
 if (count > 0) {
   throw "Can't delete album if it still has photos.";
 }
});
﻿
File Triggers
beforeSaveFile
afterSaveFile
beforeDeleteFile
afterDeleteFile
// Can be called to change any file properties, like renaming it
Parse.Cloud.beforeSaveFile(async (request) => {
 const { file } = request;
 const fileData = await file.getData();
 // Note that the new file will be saved instead of the user submitted one
 const newFile = new Parse.File('a-new-file-name.txt', { base64: fileData });
 return newFile;
});
// Can be called to change any file properties, like renaming it
Parse.Cloud.beforeSaveFile(async (request) => {
 const { file } = request;
 const fileData = await file.getData();
 // Note that the new file will be saved instead of the user submitted one
 const newFile = new Parse.File('a-new-file-name.txt', { base64: fileData });
 return newFile;
});
﻿
Find Triggers
beforeFind
afterFind
// This will be called before any queries using this class
Parse.Cloud.beforeFind('MyObject', (request) => {
 // Useful for hard setting result limits or forcing
 // certain conditions
 let query = request.query;
 query.limit(5);
});
// This will be called before any queries using this class
Parse.Cloud.beforeFind('MyObject', (request) => {
 // Useful for hard setting result limits or forcing
 // certain conditions
 let query = request.query;
 query.limit(5);
});
﻿
Session Triggers
beforeLogin
afterLogout
// Can be used for checking for user permissions and state
Parse.Cloud.beforeLogin(async (request) => {
 // Doesn't allow banned users to login
 const { object: user } = request;
 if (user.get('isBanned') === true) {
   throw 'Access denied, you have been banned.';
 }
});
// Can be used for checking for user permissions and state
Parse.Cloud.beforeLogin(async (request) => {
 // Doesn't allow banned users to login
 const { object: user } = request;
 if (user.get('isBanned') === true) {
   throw 'Access denied, you have been banned.';
 }
});
﻿
- Using Cloud Code from a React Native component
Let’s now create an example Parse Cloud Code function and call it inside a component in React Native, with a simple interface having a label showing the function result and also a form for adding new objects.
Our cloud function will calculate the average of the ratings of every movie Review object in our app, which is a Parse.Object class composed of text, rate and movie fields. Here is the function code:
JS
Parse.Cloud.define("getMovieAverageRating", async (request) => {
 const query = new Parse.Query("Review");
 query.equalTo("movie", request.params.movie);
 const results = await query.find();
 let sum = 0;
 for (let review of results) {
   sum += review.get("rate");
 }
 return {
   result: sum / results.length,
 };
});
Parse.Cloud.define("getMovieAverageRating", async (request) => {
 const query = new Parse.Query("Review");
 query.equalTo("movie", request.params.movie);
 const results = await query.find();
 let sum = 0;
 for (let review of results) {
   sum += review.get("rate");
 }
 return {
   result: sum / results.length,
 };
});
﻿
To call this cloud function in React Native, you need to use the Parse.Cloud.run method, passing as an argument the function name and also any necessary parameters inside an object.
JavaScript
TypeScript
const runGetMovieAverageRating = async function () {
 try {
   const params = {
     movie: 'Mission Very Possible',
   };
   let resultObject = await Parse.Cloud.run(
     'getMovieAverageRating',
     params,
   );
   // Set query results to state variable using state hook
   setRatingsAverage(resultObject.result.toFixed(1));
   return true;
 } catch (error) {
   // Error can be caused by lack of Internet connection
   // or by not having an valid Review object yet
   Alert.alert('Error!', error.message);
   return false;
 }
};
const runGetMovieAverageRating = async function () {
 try {
   const params = {
     movie: 'Mission Very Possible',
   };
   let resultObject = await Parse.Cloud.run(
     'getMovieAverageRating',
     params,
   );
   // Set query results to state variable using state hook
   setRatingsAverage(resultObject.result.toFixed(1));
   return true;
 } catch (error) {
   // Error can be caused by lack of Internet connection
   // or by not having an valid Review object yet
   Alert.alert('Error!', error.message);
   return false;
 }
};
﻿
We can also enforce that the reviews’ texts are kept short by using a beforeSave trigger function for the Review object. Here is the function code:
JavaScript
Parse.Cloud.beforeSave("Review", (request) => {
 const text = request.object.get("text");
 if (text.length > 20) {
   // Truncate and add a ...
   request.object.set("text", text.substring(0, 17) + "...");
 }
});
Parse.Cloud.beforeSave("Review", (request) => {
 const text = request.object.get("text");
 if (text.length > 20) {
   // Truncate and add a ...
   request.object.set("text", text.substring(0, 17) + "...");
 }
});
﻿
This is how the full component code is laid out:
JavaScript
TypeScript
import React, {FC, ReactElement, useState} from 'react';
import {
 Alert,
 Image,
 View,
 Platform,
 ScrollView,
 StyleSheet,
} from 'react-native';
import Parse from 'parse/react-native';
import {
 List,
 Title,
 TextInput as PaperTextInput,
 Button as PaperButton,
 Text as PaperText,
} from 'react-native-paper';

export const MovieRatings: FC<{}> = ({}): ReactElement => {
 // State variable
 const [queryResults, setQueryResults] = useState(null);
 const [ratingsAverage, setRatingsAverage] = useState('');
 const [reviewText, setReviewText] = useState('');
 const [reviewRate, setReviewRate] = useState('');

 const runGetMovieAverageRating = async function (): Promise<boolean> {
   try {
     const params: {movie: string} = {
       movie: 'Mission Very Possible',
     };
     let resultObject: {result: number} = await Parse.Cloud.run(
       'getMovieAverageRating',
       params,
     );
     // Set query results to state variable using state hook
     setRatingsAverage(resultObject.result.toFixed(1));
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     // or by not having an valid Review object yet
     Alert.alert(
       'Error!',
       'Make sure that the cloud function is deployed and that the Review class table is created',
     );
     return false;
   }
 };

 const doReviewQuery = async function (): Promise<boolean> {
   // Create our query
   let parseQuery: Parse.Query = new Parse.Query('Review');
   try {
     let results: [Parse.Object] = await parseQuery.find();
     // Set query results to state variable
     setQueryResults(results);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 const createReview = async function (): Promise<boolean> {
   try {
     // This values come from state variables linked to
     // the screen form fields
     const reviewTextValue: string = reviewText;
     const reviewRateValue: number = Number(reviewRate);

     // Creates a new parse object instance
     let Review: Parse.Object = new Parse.Object('Review');

     // Set data to parse object
     // Simple title field
     Review.set('text', reviewTextValue);

     // Simple number field
     Review.set('rate', reviewRateValue);

     // Set default movie
     Review.set('movie', 'Mission Very Possible');

     // After setting the values, save it on the server
     try {
       await Review.save();
       // Success
       Alert.alert('Success!');
       // Updates query result list
       doReviewQuery();
       runGetMovieAverageRating();
       return true;
     } catch (error) {
       // Error can be caused by lack of Internet connection
       Alert.alert('Error!', error.message);
       return false;
     }
   } catch (error) {
     // Error can be caused by lack of field values
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 return (
   <>
     <View style={Styles.header}>
       <Image
         style={Styles.header_logo}
         source={ {
           uri:
             'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png',
         } }
       />
       <PaperText style={Styles.header_text}>
         <PaperText style={Styles.header_text_bold}>
           {'React Native on Back4App - '}
         </PaperText>
         {' Cloud Code Movie Ratings'}
       </PaperText>
     </View>
     <ScrollView style={Styles.wrapper}>
       <View>
         <Title>{'Mission Very Possible Reviews'}</Title>
         <PaperText>{`Ratings Average: ${ratingsAverage}`}</PaperText>
         {/* Query list */}
         {queryResults !== null &&
           queryResults !== undefined &&
           queryResults.map((result: Parse.Object) => (
             <List.Item
               key={result.id}
               title={`Review text: ${result.get('text')}`}
               description={`Rate: ${result.get('rate')}`}
               titleStyle={Styles.list_text}
               style={Styles.list_item}
             />
           ))}
         {queryResults === null ||
         queryResults === undefined ||
         (queryResults !== null &&
           queryResults !== undefined &&
           queryResults.length <= 0) ? (
           <PaperText>{'No results here!'}</PaperText>
         ) : null}
       </View>
       <View>
         <Title>Action Buttons</Title>
         <PaperButton
           onPress={() => runGetMovieAverageRating()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Calculate Review Average'}
         </PaperButton>
         <PaperButton
           onPress={() => doReviewQuery()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Query Reviews'}
         </PaperButton>
       </View>
       <View>
         <Title>Add new review</Title>
         <PaperTextInput
           value={reviewText}
           onChangeText={text => setReviewText(text)}
           label="Text"
           mode="outlined"
           style={Styles.form_input}
         />
         <PaperTextInput
           value={reviewRate}
           onChangeText={text => setReviewRate(text)}
           keyboardType={'number-pad'}
           label="Rate (1-5)"
           mode="outlined"
           style={Styles.form_input}
         />
         <PaperButton
           onPress={() => createReview()}
           mode="contained"
           icon="plus"
           style={Styles.submit_button}>
           {'Add'}
         </PaperButton>
       </View>
     </ScrollView>
   </>
 );
};

// These define the screen component styles
const Styles = StyleSheet.create({
 header: {
   alignItems: 'center',
   paddingTop: 30,
   paddingBottom: 50,
   backgroundColor: '#208AEC',
 },
 header_logo: {
   height: 50,
   width: 220,
   resizeMode: 'contain',
 },
 header_text: {
   marginTop: 15,
   color: '#f0f0f0',
   fontSize: 16,
 },
 header_text_bold: {
   color: '#fff',
   fontWeight: 'bold',
 },
 wrapper: {
   width: '90%',
   alignSelf: 'center',
 },
 list_button: {
   marginTop: 6,
   marginLeft: 15,
   height: 40,
 },
 list_item: {
   borderBottomWidth: 1,
   borderBottomColor: 'rgba(0, 0, 0, 0.12)',
 },
 list_text: {
   fontSize: 15,
 },
 form_input: {
   height: 44,
   marginBottom: 16,
   backgroundColor: '#FFF',
   fontSize: 14,
 },
 submit_button: {
   width: '100%',
   maxHeight: 50,
   alignSelf: 'center',
   backgroundColor: '#208AEC',
 },
});
import React, {FC, ReactElement, useState} from 'react';
import {
 Alert,
 Image,
 View,
 Platform,
 ScrollView,
 StyleSheet,
} from 'react-native';
import Parse from 'parse/react-native';
import {
 List,
 Title,
 TextInput as PaperTextInput,
 Button as PaperButton,
 Text as PaperText,
} from 'react-native-paper';

export const MovieRatings: FC<{}> = ({}): ReactElement => {
 // State variable
 const [queryResults, setQueryResults] = useState(null);
 const [ratingsAverage, setRatingsAverage] = useState('');
 const [reviewText, setReviewText] = useState('');
 const [reviewRate, setReviewRate] = useState('');

 const runGetMovieAverageRating = async function (): Promise<boolean> {
   try {
     const params: {movie: string} = {
       movie: 'Mission Very Possible',
     };
     let resultObject: {result: number} = await Parse.Cloud.run(
       'getMovieAverageRating',
       params,
     );
     // Set query results to state variable using state hook
     setRatingsAverage(resultObject.result.toFixed(1));
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     // or by not having an valid Review object yet
     Alert.alert(
       'Error!',
       'Make sure that the cloud function is deployed and that the Review class table is created',
     );
     return false;
   }
 };

 const doReviewQuery = async function (): Promise<boolean> {
   // Create our query
   let parseQuery: Parse.Query = new Parse.Query('Review');
   try {
     let results: [Parse.Object] = await parseQuery.find();
     // Set query results to state variable
     setQueryResults(results);
     return true;
   } catch (error) {
     // Error can be caused by lack of Internet connection
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 const createReview = async function (): Promise<boolean> {
   try {
     // This values come from state variables linked to
     // the screen form fields
     const reviewTextValue: string = reviewText;
     const reviewRateValue: number = Number(reviewRate);

     // Creates a new parse object instance
     let Review: Parse.Object = new Parse.Object('Review');

     // Set data to parse object
     // Simple title field
     Review.set('text', reviewTextValue);

     // Simple number field
     Review.set('rate', reviewRateValue);

     // Set default movie
     Review.set('movie', 'Mission Very Possible');

     // After setting the values, save it on the server
     try {
       await Review.save();
       // Success
       Alert.alert('Success!');
       // Updates query result list
       doReviewQuery();
       runGetMovieAverageRating();
       return true;
     } catch (error) {
       // Error can be caused by lack of Internet connection
       Alert.alert('Error!', error.message);
       return false;
     }
   } catch (error) {
     // Error can be caused by lack of field values
     Alert.alert('Error!', error.message);
     return false;
   }
 };

 return (
   <>
     <View style={Styles.header}>
       <Image
         style={Styles.header_logo}
         source={ {
           uri:
             'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png',
         } }
       />
       <PaperText style={Styles.header_text}>
         <PaperText style={Styles.header_text_bold}>
           {'React Native on Back4App - '}
         </PaperText>
         {' Cloud Code Movie Ratings'}
       </PaperText>
     </View>
     <ScrollView style={Styles.wrapper}>
       <View>
         <Title>{'Mission Very Possible Reviews'}</Title>
         <PaperText>{`Ratings Average: ${ratingsAverage}`}</PaperText>
         {/* Query list */}
         {queryResults !== null &&
           queryResults !== undefined &&
           queryResults.map((result: Parse.Object) => (
             <List.Item
               key={result.id}
               title={`Review text: ${result.get('text')}`}
               description={`Rate: ${result.get('rate')}`}
               titleStyle={Styles.list_text}
               style={Styles.list_item}
             />
           ))}
         {queryResults === null ||
         queryResults === undefined ||
         (queryResults !== null &&
           queryResults !== undefined &&
           queryResults.length <= 0) ? (
           <PaperText>{'No results here!'}</PaperText>
         ) : null}
       </View>
       <View>
         <Title>Action Buttons</Title>
         <PaperButton
           onPress={() => runGetMovieAverageRating()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Calculate Review Average'}
         </PaperButton>
         <PaperButton
           onPress={() => doReviewQuery()}
           mode="contained"
           icon="search-web"
           color={'#208AEC'}
           style={Styles.list_button}>
           {'Query Reviews'}
         </PaperButton>
       </View>
       <View>
         <Title>Add new review</Title>
         <PaperTextInput
           value={reviewText}
           onChangeText={text => setReviewText(text)}
           label="Text"
           mode="outlined"
           style={Styles.form_input}
         />
         <PaperTextInput
           value={reviewRate}
           onChangeText={text => setReviewRate(text)}
           keyboardType={'number-pad'}
           label="Rate (1-5)"
           mode="outlined"
           style={Styles.form_input}
         />
         <PaperButton
           onPress={() => createReview()}
           mode="contained"
           icon="plus"
           style={Styles.submit_button}>
           {'Add'}
         </PaperButton>
       </View>
     </ScrollView>
   </>
 );
};

// These define the screen component styles
const Styles = StyleSheet.create({
 header: {
   alignItems: 'center',
   paddingTop: 30,
   paddingBottom: 50,
   backgroundColor: '#208AEC',
 },
 header_logo: {
   height: 50,
   width: 220,
   resizeMode: 'contain',
 },
 header_text: {
   marginTop: 15,
   color: '#f0f0f0',
   fontSize: 16,
 },
 header_text_bold: {
   color: '#fff',
   fontWeight: 'bold',
 },
 wrapper: {
   width: '90%',
   alignSelf: 'center',
 },
 list_button: {
   marginTop: 6,
   marginLeft: 15,
   height: 40,
 },
 list_item: {
   borderBottomWidth: 1,
   borderBottomColor: 'rgba(0, 0, 0, 0.12)',
 },
 list_text: {
   fontSize: 15,
 },
 form_input: {
   height: 44,
   marginBottom: 16,
   backgroundColor: '#FFF',
   fontSize: 14,
 },
 submit_button: {
   width: '100%',
   maxHeight: 50,
   alignSelf: 'center',
   backgroundColor: '#208AEC',
 },
});
﻿
This is how the component should look like after rendering and querying by one of the query functions:
﻿
Conclusion
At the end of this guide, you learned how Parse Cloud Code functions work and how to perform them on Back4App from a React Native App. In the next guide, you will learn how to work with Users in Parse.
Updated 29 Mar 2024
Did this page help you?
Deleting Files
Validators
Triggers

Using Cloud Functions in a React Native App

Introduction

Prerequisites

Goal

1 - Understanding Cloud Code Functions

2 - Cloud Code Reference

Cloud Functions

Save Triggers

Delete Triggers

File Triggers

Find Triggers

Session Triggers

3 - Using Cloud Code from a React Native component

Conclusion
