{"library":"react-native-performance","title":"React Native Performance API","description":"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-performance"],"cli":null},"imports":["import performance from 'react-native-performance';","import { PerformanceObserver } from 'react-native-performance';","import { setResourceLoggingEnabled } from 'react-native-performance';","const performance = require('react-native-performance').default;\nconst { PerformanceObserver, setResourceLoggingEnabled } = require('react-native-performance');"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import performance, { PerformanceObserver, setResourceLoggingEnabled } from 'react-native-performance';\n\n// Enable resource logging early in your app lifecycle if needed\nsetResourceLoggingEnabled(true);\n\n// Observe performance measures and resources\nconst perfObserver = new PerformanceObserver((list) => {\n  list.getEntries().forEach((entry) => {\n    console.log(`[PerfEntry] ${entry.entryType}: ${entry.name} took ${entry.duration.toFixed(2)}ms`);\n    if (entry.entryType === 'resource') {\n      console.log(`  - URL: ${entry.name}, Transfer Size: ${entry.transferSize} bytes`);\n    }\n  });\n});\nperfObserver.observe({ entryTypes: ['measure', 'resource', 'metric'], buffered: true });\n\nasync function simulateOperation() {\n  performance.mark('opStart', { detail: { type: 'apiCall', screen: 'home' } });\n  console.log('Fetching data...');\n  try {\n    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');\n    const data = await response.json();\n    console.log('Data fetched:', data.title);\n    performance.mark('opEnd');\n    performance.measure('fetchDataOperation', 'opStart', 'opEnd', { detail: { status: 'success' } });\n  } catch (error) {\n    console.error('Fetch failed:', error);\n    performance.mark('opEnd');\n    performance.measure('fetchDataOperation', 'opStart', 'opEnd', { detail: { status: 'failed', error: String(error) } });\n  }\n  performance.metric('customMetricExample', Math.floor(Math.random() * 100));\n}\n\nsimulateOperation();\n\n// Example of converting performance timestamp to Unix epoch (optional)\n// const timestamp = Date.now() - performance.timeOrigin + performance.now();\n// console.log(`Current Unix epoch from performance: ${timestamp}`);","lang":"typescript","description":"This quickstart demonstrates marking, measuring, custom metrics, network resource logging, and observing performance entries using `PerformanceObserver` with detailed metadata.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}