README
expo-firebase-performance
expo-firebase is still in RC and therefore subject to breaking changings. Be sure to run
yarn upgrade
andcd 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.
Installation
Now, you need to install the package from npm
registry.
npm install expo-firebase-performance
or yarn add expo-firebase-performance
iOS
Cocoapods
If you're using Cocoapods, add the dependency to your Podfile
:
pod 'EXFirebasePerformance', path: '../node_modules/expo-firebase-performance/ios'
and run pod install
.
Android
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')
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')
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... @Override 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. ); }
Usage
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() {
super();
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} />;
}
}