This module requires that the @react-native-firebase/app module is already setup and installed. To install the "app" module, view the Getting Started documentation.

# Install & setup the app module
yarn add @react-native-firebase/app

# Install the performance monitoring module
yarn add @react-native-firebase/perf

# If you're developing your app using iOS, run this command
cd ios/ && pod install

If you're using an older version of React Native without autolinking support, or wish to integrate into an existing project, you can follow the manual installation steps for iOS and Android.

If you're using Expo, make sure to add the @react-native-firebase/perf config plugin to your app.json or app.config.js. It handles the below installation steps for you. For instructions on how to do that, view the Expo installation section.

On Android, you need to install the Google Performance Monitoring Plugin which enables automatic HTTPS network request monitoring.

Add the plugin to your /android/build.gradle file as a dependency:

buildscript {
    dependencies {
        // ...
        classpath 'com.google.firebase:perf-plugin:2.0.2'
    }

Apply the plugin via the /android/app/build.gradle file (at the top):

apply plugin: 'com.android.application'
apply plugin: 'com.google.firebase.firebase-perf'

Platform notes: initializePerformance returns synchronously on RN. Trace, HTTP metric, and screen trace start/stop are synchronous through TurboModules, matching firebase-js-sdk.

Performance Monitoring allows you to gain insight into key performance characteristics within your React Native application. It provides a simple API to track custom trace and HTTP request metrics.

Review and analyze that data in the Firebase console. Performance Monitoring helps you to understand where and when the performance of your app can be improved so that you can use that information to fix performance issues.

Performance Monitoring package automatically traces events and metrics which are sent to Firebase. For more information on the automatic traces, please see the Firebase Performance Monitoring documentation. The package also allows you to performance monitor custom aspects to your application like network requests & task specific app code. All performance metrics are available on your Firebase console performance tab.

Below is how you would measure the amount of time it would take to complete a specific task in your app code.

import { getPerformance, trace } from '@react-native-firebase/perf';

function customTrace() {
  const perf = getPerformance();
  const t = trace(perf, 'custom_trace');

  t.start();
  t.putAttribute('user', 'abcd');
  t.putMetric('credits', 30);
  t.stop();
}

Record a custom screen rendering trace (slow frames / frozen frames)

import { getPerformance, startScreenTrace } from '@react-native-firebase/perf';

function screenTrace() {
  try {
    const screenTrace = startScreenTrace(getPerformance(), 'FooScreen');
    screenTrace.stop();
  } catch (e) {
    // rejects if iOS or (Android == 8 || Android == 8.1)
    // or if hardware acceleration is off
  }
}

Below illustrates you would measure the latency of a HTTP request.

import { getPerformance, httpMetric } from '@react-native-firebase/perf';

async function getRequest(url) {
  const metric = httpMetric(getPerformance(), url, 'GET');

  metric.putAttribute('user', 'abcd');

  metric.start();

  const response = await fetch(url);
  metric.setHttpResponseCode(response.status);
  metric.setResponseContentType(response.headers.get('Content-Type'));
  metric.setResponsePayloadSize(response.headers.get('Content-Length'));

  metric.stop();

  return response.json();
}

getRequest('https://api.com').then(json => {
  console.log(json);
});

The Performance Monitoring module will automatically start collecting data once it is installed. To disable this behavior, set the perf_auto_collection_enabled flag to false:

// <project-root>/firebase.json
{
  "react-native": {
    "perf_auto_collection_enabled": false
  }
}

To re-enable collection (e.g. once you have the users consent), call the setPerformanceCollectionEnabled method:

import { getPerformance } from '@react-native-firebase/perf';
// ...
getPerformance().dataCollectionEnabled = true;