React Native Firebase Cloud Functions

If you are looking to add Firebase Cloud Functions to your React Native Firebase project this blog is for you.
Before we get started you need to be on the Blaze (pay as you go) plan. You still get the free tier but if you go past that you will need to start paying. Click here to see about pricing.
You will also need Node.js environment setup.

Let’s get started.

Firebase CLI

Install Firebase CLI globally via npm
npm install -g firebase-tools

Initialize Your Project

In your main project folder add a new folder called Cloud Functions.
cd into that folder and then run firebase login to log in via the browser and authenticate the firebase tool.
Run firebase init firestore . You will be prompted with four options:
1. Use an existing project
2. Create a new project.
3. Add Firebase to an existing Google Cloud Platform project.
4. Don’t set up a default project.
Choose use an existing project and then choose your project from the list of available projects. You can accept the default values for Firestore rules and index files.
Run firebase init functions . You will then be given a choice between JavaScript and TypeScript.
Your project structure should look like so:

Cloud Functions
 +- .firebaserc    # Hidden file that helps you quickly switch between
 |                 # projects with `firebase use`
 |
 +- firebase.json  # Describes properties for your project
 |
 +- functions/     # Directory containing all your functions code
      |
      +- .eslintrc.json  # Optional file containing rules for JavaScript linting.
      |
      +- package.json  # npm package file describing your Cloud Functions code
      |
      +- index.js      # main source file for your Cloud Functions code
      |
      +- node_modules/ # directory where your dependencies (declared in
                       # package.json) are installed

Setup the frontend

This uses https://rnfirebase.io/
So if you haven’t set up the @react-native-firebase/app module install it with:
yarn add @react-native-firebase/app
Then install the functions module with:
yarn add @react-native-firebase/functions
cd ios/ && pod install

Creating and Calling An Endpoint

Backend
You can use an onCall function

exports.nameOfHttpEndpoint = functions.https.onCall((data, context) => {
  return [
    /* ... */
    // Return some data
  ];
});

This includes two parameters:
1. Data that is passed when called
2. Context which has user information that you can use (this helps with security. For example context.auth.uid gets the users id).

Another function you can use is the onRequest function

exports.nameOfHttpEndpoint = functions.https.onRequest((req, res) => {
  // Return some data
  res.json({result: `some data`});
});

This includes two parameters (they both have the same signature as an Express Object):
1. Request object that represents the http request (this has properties for the request query string, parameters, body, HTTP headers, and so on.)
2. Response object that represents the HTTP response that an Express app sends when it gets an HTTP request.

Emulator
If you want to test the functions with an emulator, cd into the Cloud Functions/functions folder and run firebase serve or npm run serve .
Deploy
If you are ready to deploy the function to firebase run firebase deploy or npm run deploy .

Frontend
You can call the backend directly like so:

import functions from '@react-native-firebase/functions';

function App() {

  useEffect(() => {
    functions()
      .httpsCallable('nameOfHttpEndpoint')()
      .then(response => {
        // some response
      });
  }, []);

  // ...
}

If you are trying to test with the emulator; add to the top of the page

if (__DEV__) {
  functions().useFunctionsEmulator('http://localhost:5000');
}

Bonus
If you want to use something like console.log() to in the cloud functions you can use functions.logger.log() :)

I hope this will help you add Cloud Functions to your React Native Application. Happy coding!