Expo Unimodule for interfacing with Firebase Performance Monitor

Usage no npm install needed!

<script type="module">
  import expoFirebasePerformance from 'https://cdn.skypack.dev/expo-firebase-performance';



expo-firebase is still in RC and therefore subject to breaking changings. Be sure to run yarn upgrade and cd ios; pod install when upgrading.

expo-firebase-performance captures a number of traces automatically, such as all outbound HTTP requests, app boot time and more.

Full documentation


Now, you need to install the package from npm registry.

npm install expo-firebase-performance or yarn add expo-firebase-performance



If you're using Cocoapods, add the dependency to your Podfile:

pod 'EXFirebasePerformance', path: '../node_modules/expo-firebase-performance/ios'

and run pod install.


  1. Append the following lines to android/settings.gradle:

    include ':expo-firebase-performance'
    project(':expo-firebase-performance').projectDir = new File(rootProject.projectDir, '../node_modules/expo-firebase-performance/android')

    and if not already included

    include ':expo-core'
    project(':expo-core').projectDir = new File(rootProject.projectDir, '../node_modules/expo-core/android')
    include ':expo-firebase-app'
    project(':expo-firebase-app').projectDir = new File(rootProject.projectDir, '../node_modules/expo-firebase-app/android')
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:

    api project(':expo-firebase-performance')

    and if not already included

    api project(':expo-core')
    api project(':expo-firebase-app')
  3. Include the module in your expo packages: ./android/app/src/main/java/host/exp/exponent/MainActivity.java

    * At the top of the file.
    * This is automatically imported with Android Studio, but if you are in any other editor you will need to manually import the module.
    import expo.modules.firebase.app.FirebaseAppPackage; // This should be here for all Expo Firebase features.
    import expo.modules.firebase.performance.FirebasePerformancePackage;
    // Later in the file...
    public List<Package> expoPackages() {
      // Here you can add your own packages.
      return Arrays.<Package>asList(
        new FirebaseAppPackage(), // This should be here for all Expo Firebase features.
        new FirebasePerformancePackage() // Include this.


import React from 'react';
import { Button } from 'react-native';
import firebase from 'expo-firebase-app';

// API can be accessed with: firebase.perf();

export default class DemoView extends React.Component {
  constructor() {
    this.endpoint = 'https://example.com/data.json';
    this.trace = null;

  async componentDidMount() {
    // Define & start trace
    this.trace = firebase.perf().newTrace('cache_trace');
    await this.trace.start();

    // Set initial attributes
    await this.trace.putAttribute('user_id', firebase.auth().currentUser.uid);
    await this.trace.putAttribute('endpoint', this.endpoint);
    await this.trace.putMetric('requests', 0);

  async componentWillUnmount() {
    await this.trace.stop();

  _onPress = async () => {
    const response = await fetch(this.endpoint);
    const json = await response.json();

    // Increment the requests metric by 1
    await this.trace.incrementMetric('requests', 1);

    // Increment a metric based on whether the payload was cached
    if (json.cached) await this.trace.incrementMetric('requests_cached', 1);
    else await this.trace.incrementMetric('requests_not_cached', 1);

  render() {
    return <Button title="Press to get data" onPress={this._onPress} />;