@vyshnav18/react-native-fps-counter 1.0.0

package/android/build.gradle

@@ -0,0 +1,64 @@
+buildscript {
+    ext.safeExtGet = {prop, fallback ->
+        rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+    }
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath("com.android.tools.build:gradle:7.4.2")
+        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${safeExtGet('kotlinVersion', '1.8.22')}")
+    }
+}
+
+apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
+
+def isNewArchitectureEnabled() {
+    return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true"
+}
+
+android {
+    namespace "com.rnfpscounter"
+    compileSdkVersion safeExtGet('compileSdkVersion', 34)
+
+    defaultConfig {
+        minSdkVersion safeExtGet('minSdkVersion', 21)
+        targetSdkVersion safeExtGet('targetSdkVersion', 34)
+        buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
+    }
+
+    buildFeatures {
+        buildConfig true
+    }
+
+    sourceSets {
+        main {
+            if (isNewArchitectureEnabled()) {
+                java.srcDirs += ['src/newarch']
+            } else {
+                java.srcDirs += ['src/oldarch']
+            }
+        }
+    }
+
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+
+    kotlinOptions {
+        jvmTarget = '1.8'
+    }
+}
+
+repositories {
+    google()
+    mavenCentral()
+}
+
+dependencies {
+    implementation "com.facebook.react:react-android"
+    implementation "org.jetbrains.kotlin:kotlin-stdlib:${safeExtGet('kotlinVersion', '1.8.22')}"
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,3 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.rnfpscounter">
+</manifest>

package/android/src/main/java/com/rnfpscounter/FpsCounterModule.kt

@@ -0,0 +1,120 @@
+package com.rnfpscounter
+
+import android.view.Choreographer
+import com.facebook.react.bridge.*
+import com.facebook.react.modules.core.DeviceEventManagerModule
+
+class FpsCounterModule(reactContext: ReactApplicationContext) :
+    ReactContextBaseJavaModule(reactContext),
+    LifecycleEventListener {
+
+    private var choreographerCallback: Choreographer.FrameCallback? = null
+    private var lastFrameTimeNanos: Long = 0
+    private var frameCount: Int = 0
+    private var fps: Double = 0.0
+    private var averageFps: Double = 0.0
+    private var totalSamples: Int = 0
+    private var isMonitoring: Boolean = false
+    private var listenerCount: Int = 0
+
+    override fun getName(): String = NAME
+
+    init {
+        reactContext.addLifecycleEventListener(this)
+    }
+
+    @ReactMethod
+    fun startMonitoring() {
+        if (isMonitoring) return
+
+        isMonitoring = true
+        frameCount = 0
+        lastFrameTimeNanos = 0
+        fps = 0.0
+        averageFps = 0.0
+        totalSamples = 0
+
+        choreographerCallback = object : Choreographer.FrameCallback {
+            override fun doFrame(frameTimeNanos: Long) {
+                if (!isMonitoring) return
+
+                if (lastFrameTimeNanos == 0L) {
+                    lastFrameTimeNanos = frameTimeNanos
+                    Choreographer.getInstance().postFrameCallback(this)
+                    return
+                }
+
+                frameCount++
+
+                val elapsedNanos = frameTimeNanos - lastFrameTimeNanos
+                val elapsedSeconds = elapsedNanos / 1_000_000_000.0
+
+                // Update FPS approximately once per second
+                if (elapsedSeconds >= 1.0) {
+                    fps = frameCount / elapsedSeconds
+                    totalSamples++
+
+                    // Calculate rolling average (capped at 120 FPS for high refresh rate displays)
+                    averageFps = minOf(averageFps + (fps - averageFps) / totalSamples, 120.0)
+
+                    frameCount = 0
+                    lastFrameTimeNanos = frameTimeNanos
+
+                    if (listenerCount > 0) {
+                        sendEvent(fps, averageFps)
+                    }
+                }
+
+                Choreographer.getInstance().postFrameCallback(this)
+            }
+        }
+
+        Choreographer.getInstance().postFrameCallback(choreographerCallback!!)
+    }
+
+    @ReactMethod
+    fun stopMonitoring() {
+        if (!isMonitoring) return
+
+        isMonitoring = false
+        choreographerCallback?.let {
+            Choreographer.getInstance().removeFrameCallback(it)
+        }
+        choreographerCallback = null
+    }
+
+    @ReactMethod
+    fun addListener(eventName: String) {
+        listenerCount++
+    }
+
+    @ReactMethod
+    fun removeListeners(count: Int) {
+        listenerCount = maxOf(listenerCount - count, 0)
+    }
+
+    private fun sendEvent(fps: Double, average: Double) {
+        reactApplicationContext
+            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
+            .emit("onUIFpsUpdate", Arguments.createMap().apply {
+                putDouble("fps", fps)
+                putDouble("average", average)
+            })
+    }
+
+    override fun onHostResume() {}
+    override fun onHostPause() {}
+
+    override fun onHostDestroy() {
+        stopMonitoring()
+    }
+
+    override fun invalidate() {
+        stopMonitoring()
+        super.invalidate()
+    }
+
+    companion object {
+        const val NAME = "FpsCounter"
+    }
+}

package/android/src/main/java/com/rnfpscounter/FpsCounterPackage.kt

@@ -0,0 +1,16 @@
+package com.rnfpscounter
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+class FpsCounterPackage : ReactPackage {
+    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+        return listOf(FpsCounterModule(reactContext))
+    }
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+        return emptyList()
+    }
+}

package/dist/index.d.mts

@@ -0,0 +1,110 @@
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+
+type FrameData = {
+    fps: number;
+    lastStamp: number;
+    framesCount: number;
+    average: number;
+    totalCount: number;
+};
+type FPS = {
+    average: FrameData['average'];
+    fps: FrameData['fps'];
+};
+/**
+ * A custom hook that tracks frames per second (FPS) in React Native.
+ * Uses requestAnimationFrame to count frames and updates at most once per second.
+ *
+ * @returns An object containing the current FPS and rolling average FPS
+ *
+ * @example
+ * ```tsx
+ * const { fps, average } = useFPSMetric();
+ * console.log(`Current: ${fps} FPS, Average: ${average.toFixed(2)} FPS`);
+ * ```
+ */
+declare function useFPSMetric(): FPS;
+
+type UIFPS = {
+    uiFps: number;
+    uiAverage: number;
+    /** Whether the native module is available */
+    isAvailable: boolean;
+};
+/**
+ * A custom hook that tracks native UI thread frames per second.
+ * Uses CADisplayLink on iOS and Choreographer on Android.
+ *
+ * @returns An object containing the current UI FPS, rolling average, and availability status
+ *
+ * @example
+ * ```tsx
+ * const { uiFps, uiAverage, isAvailable } = useUIFPSMetric();
+ * if (isAvailable) {
+ *   console.log(`UI Thread: ${uiFps} FPS`);
+ * }
+ * ```
+ */
+declare function useUIFPSMetric(): UIFPS;
+
+interface FpsCounterStyles {
+    container?: ViewStyle;
+    text?: TextStyle;
+    labelText?: TextStyle;
+    valueText?: TextStyle;
+    jsSection?: ViewStyle;
+    uiSection?: ViewStyle;
+}
+interface FpsCounterProps {
+    /**
+     * Whether the FPS counter is visible
+     * @default true
+     */
+    visible?: boolean;
+    /**
+     * Whether to show JS thread FPS
+     * @default true
+     */
+    showJsFps?: boolean;
+    /**
+     * Whether to show UI thread FPS (requires native module)
+     * @default true
+     */
+    showUiFps?: boolean;
+    /**
+     * Whether to show average FPS values
+     * @default true
+     */
+    showAverage?: boolean;
+    /**
+     * Number of decimal places for average values
+     * @default 1
+     */
+    averageDecimalPlaces?: number;
+    /**
+     * Custom styles to override defaults
+     */
+    style?: FpsCounterStyles;
+}
+/**
+ * A React Native component that displays both JS thread and native UI thread FPS.
+ * Should be placed at the root of your app for accurate measurements.
+ *
+ * @example
+ * ```tsx
+ * import { FpsCounter } from 'react-native-fps-counter';
+ *
+ * export default function App() {
+ *   return (
+ *     <View style={{ flex: 1 }}>
+ *       <YourAppContent />
+ *       <FpsCounter visible={__DEV__} />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+declare const FpsCounter: React.FC<FpsCounterProps>;
+
+export { type FPS, FpsCounter, type FpsCounterProps, type FpsCounterStyles, type UIFPS, useFPSMetric, useUIFPSMetric };

package/dist/index.d.ts

@@ -0,0 +1,110 @@
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+
+type FrameData = {
+    fps: number;
+    lastStamp: number;
+    framesCount: number;
+    average: number;
+    totalCount: number;
+};
+type FPS = {
+    average: FrameData['average'];
+    fps: FrameData['fps'];
+};
+/**
+ * A custom hook that tracks frames per second (FPS) in React Native.
+ * Uses requestAnimationFrame to count frames and updates at most once per second.
+ *
+ * @returns An object containing the current FPS and rolling average FPS
+ *
+ * @example
+ * ```tsx
+ * const { fps, average } = useFPSMetric();
+ * console.log(`Current: ${fps} FPS, Average: ${average.toFixed(2)} FPS`);
+ * ```
+ */
+declare function useFPSMetric(): FPS;
+
+type UIFPS = {
+    uiFps: number;
+    uiAverage: number;
+    /** Whether the native module is available */
+    isAvailable: boolean;
+};
+/**
+ * A custom hook that tracks native UI thread frames per second.
+ * Uses CADisplayLink on iOS and Choreographer on Android.
+ *
+ * @returns An object containing the current UI FPS, rolling average, and availability status
+ *
+ * @example
+ * ```tsx
+ * const { uiFps, uiAverage, isAvailable } = useUIFPSMetric();
+ * if (isAvailable) {
+ *   console.log(`UI Thread: ${uiFps} FPS`);
+ * }
+ * ```
+ */
+declare function useUIFPSMetric(): UIFPS;
+
+interface FpsCounterStyles {
+    container?: ViewStyle;
+    text?: TextStyle;
+    labelText?: TextStyle;
+    valueText?: TextStyle;
+    jsSection?: ViewStyle;
+    uiSection?: ViewStyle;
+}
+interface FpsCounterProps {
+    /**
+     * Whether the FPS counter is visible
+     * @default true
+     */
+    visible?: boolean;
+    /**
+     * Whether to show JS thread FPS
+     * @default true
+     */
+    showJsFps?: boolean;
+    /**
+     * Whether to show UI thread FPS (requires native module)
+     * @default true
+     */
+    showUiFps?: boolean;
+    /**
+     * Whether to show average FPS values
+     * @default true
+     */
+    showAverage?: boolean;
+    /**
+     * Number of decimal places for average values
+     * @default 1
+     */
+    averageDecimalPlaces?: number;
+    /**
+     * Custom styles to override defaults
+     */
+    style?: FpsCounterStyles;
+}
+/**
+ * A React Native component that displays both JS thread and native UI thread FPS.
+ * Should be placed at the root of your app for accurate measurements.
+ *
+ * @example
+ * ```tsx
+ * import { FpsCounter } from 'react-native-fps-counter';
+ *
+ * export default function App() {
+ *   return (
+ *     <View style={{ flex: 1 }}>
+ *       <YourAppContent />
+ *       <FpsCounter visible={__DEV__} />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+declare const FpsCounter: React.FC<FpsCounterProps>;
+
+export { type FPS, FpsCounter, type FpsCounterProps, type FpsCounterStyles, type UIFPS, useFPSMetric, useUIFPSMetric };

package/dist/index.js

@@ -0,0 +1,192 @@
+'use strict';
+
+var react = require('react');
+var reactNative = require('react-native');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/useFPSMetric.ts
+function useFPSMetric() {
+  const [frameState, setFrameState] = react.useState({
+    fps: 0,
+    lastStamp: Date.now(),
+    framesCount: 0,
+    average: 0,
+    totalCount: 0
+  });
+  react.useEffect(() => {
+    let timeout = null;
+    requestAnimationFrame(() => {
+      timeout = setTimeout(() => {
+        const currentStamp = Date.now();
+        const shouldSetState = currentStamp - frameState.lastStamp > 1e3;
+        const newFramesCount = frameState.framesCount + 1;
+        if (shouldSetState) {
+          const newValue = frameState.framesCount;
+          const totalCount = frameState.totalCount + 1;
+          const newMean = Math.min(
+            frameState.average + (newValue - frameState.average) / totalCount,
+            60
+          );
+          setFrameState({
+            fps: frameState.framesCount,
+            lastStamp: currentStamp,
+            framesCount: 0,
+            average: newMean,
+            totalCount
+          });
+        } else {
+          setFrameState({
+            ...frameState,
+            framesCount: newFramesCount
+          });
+        }
+      }, 0);
+    });
+    return () => {
+      if (timeout) clearTimeout(timeout);
+    };
+  }, [frameState]);
+  return { average: frameState.average, fps: frameState.fps };
+}
+var FpsCounterModule = reactNative.NativeModules.FpsCounter;
+function useUIFPSMetric() {
+  const [frameData, setFrameData] = react.useState({
+    uiFps: 0,
+    uiAverage: 0,
+    isAvailable: !!FpsCounterModule
+  });
+  const eventEmitterRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!FpsCounterModule) {
+      if (__DEV__) {
+        console.warn(
+          "[react-native-fps-counter] Native module not found.\nMake sure you have run:\n  - iOS: cd ios && pod install\n  - Android: Rebuild the app (npx react-native run-android)\nIf using Expo, you need to create a development build."
+        );
+      }
+      return;
+    }
+    eventEmitterRef.current = new reactNative.NativeEventEmitter(FpsCounterModule);
+    const subscription = eventEmitterRef.current.addListener(
+      "onUIFpsUpdate",
+      (data) => {
+        setFrameData({
+          uiFps: Math.round(data.fps),
+          uiAverage: data.average,
+          isAvailable: true
+        });
+      }
+    );
+    FpsCounterModule.startMonitoring();
+    return () => {
+      subscription.remove();
+      FpsCounterModule.stopMonitoring();
+    };
+  }, []);
+  return frameData;
+}
+var defaultStyles = reactNative.StyleSheet.create({
+  container: {
+    position: "absolute",
+    top: 50,
+    left: 8,
+    backgroundColor: "rgba(0, 0, 0, 0.75)",
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 6,
+    minWidth: 80
+  },
+  row: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginVertical: 1
+  },
+  label: {
+    color: "rgba(255, 255, 255, 0.7)",
+    fontSize: 10,
+    fontWeight: "500",
+    marginRight: 8
+  },
+  value: {
+    color: "white",
+    fontSize: 12,
+    fontWeight: "700",
+    fontVariant: ["tabular-nums"],
+    minWidth: 45,
+    textAlign: "right"
+  },
+  divider: {
+    height: 1,
+    backgroundColor: "rgba(255, 255, 255, 0.2)",
+    marginVertical: 4
+  },
+  sectionLabel: {
+    color: "rgba(255, 255, 255, 0.5)",
+    fontSize: 9,
+    fontWeight: "600",
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+    marginBottom: 2
+  },
+  unavailable: {
+    color: "rgba(255, 255, 255, 0.4)",
+    fontSize: 9,
+    fontStyle: "italic"
+  }
+});
+var FpsCounter = ({
+  visible = true,
+  showJsFps = true,
+  showUiFps = true,
+  showAverage = true,
+  averageDecimalPlaces = 1,
+  style
+}) => {
+  const { fps: jsFps, average: jsAverage } = useFPSMetric();
+  const { uiFps, uiAverage, isAvailable: isUiFpsAvailable } = useUIFPSMetric();
+  if (!visible) return null;
+  const shouldShowUiFps = showUiFps && isUiFpsAvailable;
+  const shouldShowUiFpsUnavailable = showUiFps && !isUiFpsAvailable;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      pointerEvents: "none",
+      style: [defaultStyles.container, style?.container],
+      children: [
+        shouldShowUiFps && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: defaultStyles.sectionLabel, children: "UI Thread" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: defaultStyles.row, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [defaultStyles.label, style?.labelText], children: "FPS" }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [defaultStyles.value, style?.valueText], children: uiFps })
+          ] }),
+          showAverage && /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: defaultStyles.row, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [defaultStyles.label, style?.labelText], children: "Avg" }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [defaultStyles.value, style?.valueText], children: uiAverage.toFixed(averageDecimalPlaces) })
+          ] })
+        ] }),
+        shouldShowUiFpsUnavailable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: defaultStyles.sectionLabel, children: "UI Thread" }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: defaultStyles.unavailable, children: "Native module not linked" })
+        ] }),
+        (shouldShowUiFps || shouldShowUiFpsUnavailable) && showJsFps && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: defaultStyles.divider }),
+        showJsFps && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: defaultStyles.sectionLabel, children: "JS Thread" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: defaultStyles.row, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [defaultStyles.label, style?.labelText], children: "FPS" }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [defaultStyles.value, style?.valueText], children: jsFps })
+          ] }),
+          showAverage && /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: defaultStyles.row, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [defaultStyles.label, style?.labelText], children: "Avg" }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [defaultStyles.value, style?.valueText], children: jsAverage.toFixed(averageDecimalPlaces) })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+exports.FpsCounter = FpsCounter;
+exports.useFPSMetric = useFPSMetric;
+exports.useUIFPSMetric = useUIFPSMetric;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useFPSMetric.ts","../src/useUIFPSMetric.ts","../src/FpsCounter.tsx"],"names":["useState","useEffect","NativeModules","useRef","NativeEventEmitter","StyleSheet","jsxs","View","Fragment","jsx","Text"],"mappings":"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","file":"index.js","sourcesContent":["import { useEffect, useState } from 'react';\n\ntype FrameData = {\n    fps: number;\n    lastStamp: number;\n    framesCount: number;\n    average: number;\n    totalCount: number;\n};\n\nexport type FPS = {\n    average: FrameData['average'];\n    fps: FrameData['fps'];\n};\n\n/**\n * A custom hook that tracks frames per second (FPS) in React Native.\n * Uses requestAnimationFrame to count frames and updates at most once per second.\n *\n * @returns An object containing the current FPS and rolling average FPS\n *\n * @example\n * ```tsx\n * const { fps, average } = useFPSMetric();\n * console.log(`Current: ${fps} FPS, Average: ${average.toFixed(2)} FPS`);\n * ```\n */\nexport function useFPSMetric(): FPS {\n    const [frameState, setFrameState] = useState<FrameData>({\n        fps: 0,\n        lastStamp: Date.now(),\n        framesCount: 0,\n        average: 0,\n        totalCount: 0,\n    });\n\n    useEffect(() => {\n        // NOTE: timeout is here because requestAnimationFrame is deferred\n        // and to prevent setStates when unmounted\n        let timeout: ReturnType<typeof setTimeout> | null = null;\n\n        requestAnimationFrame((): void => {\n            timeout = setTimeout((): void => {\n                const currentStamp = Date.now();\n                const shouldSetState = currentStamp - frameState.lastStamp > 1000;\n                const newFramesCount = frameState.framesCount + 1;\n\n                // Updates FPS at most once per second\n                if (shouldSetState) {\n                    const newValue = frameState.framesCount;\n                    const totalCount = frameState.totalCount + 1;\n\n                    // Math.min is used because values over 60 aren't really important\n                    // Mean FPS is calculated incrementally instead of storing all values\n                    const newMean = Math.min(\n                        frameState.average + (newValue - frameState.average) / totalCount,\n                        60\n                    );\n\n                    setFrameState({\n                        fps: frameState.framesCount,\n                        lastStamp: currentStamp,\n                        framesCount: 0,\n                        average: newMean,\n                        totalCount,\n                    });\n                } else {\n                    setFrameState({\n                        ...frameState,\n                        framesCount: newFramesCount,\n                    });\n                }\n            }, 0);\n        });\n\n        return () => {\n            if (timeout) clearTimeout(timeout);\n        };\n    }, [frameState]);\n\n    return { average: frameState.average, fps: frameState.fps };\n}\n","import { useEffect, useState, useRef } from 'react';\nimport { NativeModules, NativeEventEmitter, Platform } from 'react-native';\n\nconst FpsCounterModule = NativeModules.FpsCounter;\n\ntype UIFrameData = {\n    uiFps: number;\n    uiAverage: number;\n    isAvailable: boolean;\n};\n\nexport type UIFPS = {\n    uiFps: number;\n    uiAverage: number;\n    /** Whether the native module is available */\n    isAvailable: boolean;\n};\n\n/**\n * A custom hook that tracks native UI thread frames per second.\n * Uses CADisplayLink on iOS and Choreographer on Android.\n *\n * @returns An object containing the current UI FPS, rolling average, and availability status\n *\n * @example\n * ```tsx\n * const { uiFps, uiAverage, isAvailable } = useUIFPSMetric();\n * if (isAvailable) {\n *   console.log(`UI Thread: ${uiFps} FPS`);\n * }\n * ```\n */\nexport function useUIFPSMetric(): UIFPS {\n    const [frameData, setFrameData] = useState<UIFrameData>({\n        uiFps: 0,\n        uiAverage: 0,\n        isAvailable: !!FpsCounterModule,\n    });\n    const eventEmitterRef = useRef<NativeEventEmitter | null>(null);\n\n    useEffect(() => {\n        // Handle case where native module is not available\n        if (!FpsCounterModule) {\n            if (__DEV__) {\n                console.warn(\n                    '[react-native-fps-counter] Native module not found.\\n' +\n                    'Make sure you have run:\\n' +\n                    '  - iOS: cd ios && pod install\\n' +\n                    '  - Android: Rebuild the app (npx react-native run-android)\\n' +\n                    'If using Expo, you need to create a development build.'\n                );\n            }\n            return;\n        }\n\n        // Create event emitter\n        eventEmitterRef.current = new NativeEventEmitter(FpsCounterModule);\n\n        // Subscribe to FPS updates\n        const subscription = eventEmitterRef.current.addListener(\n            'onUIFpsUpdate',\n            (data: { fps: number; average: number }) => {\n                setFrameData({\n                    uiFps: Math.round(data.fps),\n                    uiAverage: data.average,\n                    isAvailable: true,\n                });\n            }\n        );\n\n        // Start monitoring\n        FpsCounterModule.startMonitoring();\n\n        return () => {\n            subscription.remove();\n            FpsCounterModule.stopMonitoring();\n        };\n    }, []);\n\n    return frameData;\n}\n","import React from 'react';\nimport { StyleSheet, Text, View, ViewStyle, TextStyle } from 'react-native';\nimport { useFPSMetric } from './useFPSMetric';\nimport { useUIFPSMetric } from './useUIFPSMetric';\n\nexport interface FpsCounterStyles {\n    container?: ViewStyle;\n    text?: TextStyle;\n    labelText?: TextStyle;\n    valueText?: TextStyle;\n    jsSection?: ViewStyle;\n    uiSection?: ViewStyle;\n}\n\nexport interface FpsCounterProps {\n    /**\n     * Whether the FPS counter is visible\n     * @default true\n     */\n    visible?: boolean;\n\n    /**\n     * Whether to show JS thread FPS\n     * @default true\n     */\n    showJsFps?: boolean;\n\n    /**\n     * Whether to show UI thread FPS (requires native module)\n     * @default true\n     */\n    showUiFps?: boolean;\n\n    /**\n     * Whether to show average FPS values\n     * @default true\n     */\n    showAverage?: boolean;\n\n    /**\n     * Number of decimal places for average values\n     * @default 1\n     */\n    averageDecimalPlaces?: number;\n\n    /**\n     * Custom styles to override defaults\n     */\n    style?: FpsCounterStyles;\n}\n\nconst defaultStyles = StyleSheet.create({\n    container: {\n        position: 'absolute',\n        top: 50,\n        left: 8,\n        backgroundColor: 'rgba(0, 0, 0, 0.75)',\n        paddingHorizontal: 10,\n        paddingVertical: 6,\n        borderRadius: 6,\n        minWidth: 80,\n    },\n    row: {\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        marginVertical: 1,\n    },\n    label: {\n        color: 'rgba(255, 255, 255, 0.7)',\n        fontSize: 10,\n        fontWeight: '500',\n        marginRight: 8,\n    },\n    value: {\n        color: 'white',\n        fontSize: 12,\n        fontWeight: '700',\n        fontVariant: ['tabular-nums'],\n        minWidth: 45,\n        textAlign: 'right',\n    },\n    divider: {\n        height: 1,\n        backgroundColor: 'rgba(255, 255, 255, 0.2)',\n        marginVertical: 4,\n    },\n    sectionLabel: {\n        color: 'rgba(255, 255, 255, 0.5)',\n        fontSize: 9,\n        fontWeight: '600',\n        textTransform: 'uppercase',\n        letterSpacing: 0.5,\n        marginBottom: 2,\n    },\n    unavailable: {\n        color: 'rgba(255, 255, 255, 0.4)',\n        fontSize: 9,\n        fontStyle: 'italic',\n    },\n});\n\n/**\n * A React Native component that displays both JS thread and native UI thread FPS.\n * Should be placed at the root of your app for accurate measurements.\n *\n * @example\n * ```tsx\n * import { FpsCounter } from 'react-native-fps-counter';\n *\n * export default function App() {\n *   return (\n *     <View style={{ flex: 1 }}>\n *       <YourAppContent />\n *       <FpsCounter visible={__DEV__} />\n *     </View>\n *   );\n * }\n * ```\n */\nexport const FpsCounter: React.FC<FpsCounterProps> = ({\n    visible = true,\n    showJsFps = true,\n    showUiFps = true,\n    showAverage = true,\n    averageDecimalPlaces = 1,\n    style,\n}) => {\n    const { fps: jsFps, average: jsAverage } = useFPSMetric();\n    const { uiFps, uiAverage, isAvailable: isUiFpsAvailable } = useUIFPSMetric();\n\n    if (!visible) return null;\n\n    const shouldShowUiFps = showUiFps && isUiFpsAvailable;\n    const shouldShowUiFpsUnavailable = showUiFps && !isUiFpsAvailable;\n\n    return (\n        <View\n            pointerEvents=\"none\"\n            style={[defaultStyles.container, style?.container]}\n        >\n            {shouldShowUiFps && (\n                <>\n                    <Text style={defaultStyles.sectionLabel}>UI Thread</Text>\n                    <View style={defaultStyles.row}>\n                        <Text style={[defaultStyles.label, style?.labelText]}>FPS</Text>\n                        <Text style={[defaultStyles.value, style?.valueText]}>{uiFps}</Text>\n                    </View>\n                    {showAverage && (\n                        <View style={defaultStyles.row}>\n                            <Text style={[defaultStyles.label, style?.labelText]}>Avg</Text>\n                            <Text style={[defaultStyles.value, style?.valueText]}>\n                                {uiAverage.toFixed(averageDecimalPlaces)}\n                            </Text>\n                        </View>\n                    )}\n                </>\n            )}\n\n            {shouldShowUiFpsUnavailable && (\n                <>\n                    <Text style={defaultStyles.sectionLabel}>UI Thread</Text>\n                    <Text style={defaultStyles.unavailable}>Native module not linked</Text>\n                </>\n            )}\n\n            {(shouldShowUiFps || shouldShowUiFpsUnavailable) && showJsFps && (\n                <View style={defaultStyles.divider} />\n            )}\n\n            {showJsFps && (\n                <>\n                    <Text style={defaultStyles.sectionLabel}>JS Thread</Text>\n                    <View style={defaultStyles.row}>\n                        <Text style={[defaultStyles.label, style?.labelText]}>FPS</Text>\n                        <Text style={[defaultStyles.value, style?.valueText]}>{jsFps}</Text>\n                    </View>\n                    {showAverage && (\n                        <View style={defaultStyles.row}>\n                            <Text style={[defaultStyles.label, style?.labelText]}>Avg</Text>\n                            <Text style={[defaultStyles.value, style?.valueText]}>\n                                {jsAverage.toFixed(averageDecimalPlaces)}\n                            </Text>\n                        </View>\n                    )}\n                </>\n            )}\n        </View>\n    );\n};\n"]}