Registry /
observability / react-native-performance
react-native-performance is a library that brings a comprehensive implementation of the Web Performance API (User Timing Level 3 and Performance Timeline Level 2) to React Native applications. It provides high-resolution, monotonically increasing timestamps for accurate measurement, independent of system clock adjustments. The current stable version is 6.0.0, released in late 2024. The project maintains an active release cadence with frequent patch and minor updates, and major versions introducing breaking changes every few months. Key differentiators include its adherence to web standards, support for custom metrics, optional network resource logging (for fetch/XMLHttpRequest), and native marks for measuring core application startup and lifecycle events. It also offers the PerformanceObserver API for subscribing to performance entries and ships with full TypeScript type definitions.
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
The main performance API object is a default export.
import performance from 'react-native-performance';
PerformanceObserver is a named export for event-driven performance entry monitoring.
import { PerformanceObserver } from 'react-native-performance';
This utility function for resource logging is a named export, not a method on the default 'performance' object.
import { setResourceLoggingEnabled } from 'react-native-performance';
While primarily used in ESM, CommonJS environments require accessing the default export via `.default` and named exports directly.
const performance = require('react-native-performance').default;
const { PerformanceObserver, setResourceLoggingEnabled } = require('react-native-performance');
This quickstart demonstrates marking, measuring, custom metrics, network resource logging, and observing performance entries using `PerformanceObserver` with detailed metadata.
import performance, { PerformanceObserver, setResourceLoggingEnabled } from 'react-native-performance';
// Enable resource logging early in your app lifecycle if needed
setResourceLoggingEnabled(true);
// Observe performance measures and resources
const perfObserver = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log(`[PerfEntry] ${entry.entryType}: ${entry.name} took ${entry.duration.toFixed(2)}ms`);
if (entry.entryType === 'resource') {
console.log(` - URL: ${entry.name}, Transfer Size: ${entry.transferSize} bytes`);
}
});
});
perfObserver.observe({ entryTypes: ['measure', 'resource', 'metric'], buffered: true });
async function simulateOperation() {
performance.mark('opStart', { detail: { type: 'apiCall', screen: 'home' } });
console.log('Fetching data...');
try {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const data = await response.json();
console.log('Data fetched:', data.title);
performance.mark('opEnd');
performance.measure('fetchDataOperation', 'opStart', 'opEnd', { detail: { status: 'success' } });
} catch (error) {
console.error('Fetch failed:', error);
performance.mark('opEnd');
performance.measure('fetchDataOperation', 'opStart', 'opEnd', { detail: { status: 'failed', error: String(error) } });
}
performance.metric('customMetricExample', Math.floor(Math.random() * 100));
}
simulateOperation();
// Example of converting performance timestamp to Unix epoch (optional)
// const timestamp = Date.now() - performance.timeOrigin + performance.now();
// console.log(`Current Unix epoch from performance: ${timestamp}`);
Upgrade
Version history
Breaking-change detection hasn't run for this library yet.
Audit
Security & dependencies
CVE tracking and dependency tree are planned for a later release.