@vyshnav18/react-native-fps-counter 1.0.0

package/src/specs/NativeFpsCounter.ts

@@ -0,0 +1,26 @@
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {
+    /**
+     * Start monitoring UI thread FPS
+     */
+    startMonitoring(): void;
+
+    /**
+     * Stop monitoring UI thread FPS
+     */
+    stopMonitoring(): void;
+
+    /**
+     * Required for EventEmitter support
+     */
+    addListener(eventName: string): void;
+
+    /**
+     * Required for EventEmitter support
+     */
+    removeListeners(count: number): void;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('FpsCounter');

package/src/useFPSMetric.ts

@@ -0,0 +1,82 @@
+import { useEffect, useState } from 'react';
+
+type FrameData = {
+    fps: number;
+    lastStamp: number;
+    framesCount: number;
+    average: number;
+    totalCount: number;
+};
+
+export 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`);
+ * ```
+ */
+export function useFPSMetric(): FPS {
+    const [frameState, setFrameState] = useState<FrameData>({
+        fps: 0,
+        lastStamp: Date.now(),
+        framesCount: 0,
+        average: 0,
+        totalCount: 0,
+    });
+
+    useEffect(() => {
+        // NOTE: timeout is here because requestAnimationFrame is deferred
+        // and to prevent setStates when unmounted
+        let timeout: ReturnType<typeof setTimeout> | null = null;
+
+        requestAnimationFrame((): void => {
+            timeout = setTimeout((): void => {
+                const currentStamp = Date.now();
+                const shouldSetState = currentStamp - frameState.lastStamp > 1000;
+                const newFramesCount = frameState.framesCount + 1;
+
+                // Updates FPS at most once per second
+                if (shouldSetState) {
+                    const newValue = frameState.framesCount;
+                    const totalCount = frameState.totalCount + 1;
+
+                    // Math.min is used because values over 60 aren't really important
+                    // Mean FPS is calculated incrementally instead of storing all values
+                    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 };
+}

package/src/useUIFPSMetric.ts

@@ -0,0 +1,81 @@
+import { useEffect, useState, useRef } from 'react';
+import { NativeModules, NativeEventEmitter, Platform } from 'react-native';
+
+const FpsCounterModule = NativeModules.FpsCounter;
+
+type UIFrameData = {
+    uiFps: number;
+    uiAverage: number;
+    isAvailable: boolean;
+};
+
+export 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`);
+ * }
+ * ```
+ */
+export function useUIFPSMetric(): UIFPS {
+    const [frameData, setFrameData] = useState<UIFrameData>({
+        uiFps: 0,
+        uiAverage: 0,
+        isAvailable: !!FpsCounterModule,
+    });
+    const eventEmitterRef = useRef<NativeEventEmitter | null>(null);
+
+    useEffect(() => {
+        // Handle case where native module is not available
+        if (!FpsCounterModule) {
+            if (__DEV__) {
+                console.warn(
+                    '[react-native-fps-counter] Native module not found.\n' +
+                    'Make sure you have run:\n' +
+                    '  - iOS: cd ios && pod install\n' +
+                    '  - Android: Rebuild the app (npx react-native run-android)\n' +
+                    'If using Expo, you need to create a development build.'
+                );
+            }
+            return;
+        }
+
+        // Create event emitter
+        eventEmitterRef.current = new NativeEventEmitter(FpsCounterModule);
+
+        // Subscribe to FPS updates
+        const subscription = eventEmitterRef.current.addListener(
+            'onUIFpsUpdate',
+            (data: { fps: number; average: number }) => {
+                setFrameData({
+                    uiFps: Math.round(data.fps),
+                    uiAverage: data.average,
+                    isAvailable: true,
+                });
+            }
+        );
+
+        // Start monitoring
+        FpsCounterModule.startMonitoring();
+
+        return () => {
+            subscription.remove();
+            FpsCounterModule.stopMonitoring();
+        };
+    }, []);
+
+    return frameData;
+}