@vyshnav18/react-native-fps-counter 1.0.0

package/dist/index.mjs

@@ -0,0 +1,188 @@
+import { useState, useEffect, useRef } from 'react';
+import { NativeModules, StyleSheet, NativeEventEmitter, View, Text } from 'react-native';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+// src/useFPSMetric.ts
+function useFPSMetric() {
+  const [frameState, setFrameState] = useState({
+    fps: 0,
+    lastStamp: Date.now(),
+    framesCount: 0,
+    average: 0,
+    totalCount: 0
+  });
+  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 = NativeModules.FpsCounter;
+function useUIFPSMetric() {
+  const [frameData, setFrameData] = useState({
+    uiFps: 0,
+    uiAverage: 0,
+    isAvailable: !!FpsCounterModule
+  });
+  const eventEmitterRef = useRef(null);
+  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 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 = 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__ */ jsxs(
+    View,
+    {
+      pointerEvents: "none",
+      style: [defaultStyles.container, style?.container],
+      children: [
+        shouldShowUiFps && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { style: defaultStyles.sectionLabel, children: "UI Thread" }),
+          /* @__PURE__ */ jsxs(View, { style: defaultStyles.row, children: [
+            /* @__PURE__ */ jsx(Text, { style: [defaultStyles.label, style?.labelText], children: "FPS" }),
+            /* @__PURE__ */ jsx(Text, { style: [defaultStyles.value, style?.valueText], children: uiFps })
+          ] }),
+          showAverage && /* @__PURE__ */ jsxs(View, { style: defaultStyles.row, children: [
+            /* @__PURE__ */ jsx(Text, { style: [defaultStyles.label, style?.labelText], children: "Avg" }),
+            /* @__PURE__ */ jsx(Text, { style: [defaultStyles.value, style?.valueText], children: uiAverage.toFixed(averageDecimalPlaces) })
+          ] })
+        ] }),
+        shouldShowUiFpsUnavailable && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { style: defaultStyles.sectionLabel, children: "UI Thread" }),
+          /* @__PURE__ */ jsx(Text, { style: defaultStyles.unavailable, children: "Native module not linked" })
+        ] }),
+        (shouldShowUiFps || shouldShowUiFpsUnavailable) && showJsFps && /* @__PURE__ */ jsx(View, { style: defaultStyles.divider }),
+        showJsFps && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { style: defaultStyles.sectionLabel, children: "JS Thread" }),
+          /* @__PURE__ */ jsxs(View, { style: defaultStyles.row, children: [
+            /* @__PURE__ */ jsx(Text, { style: [defaultStyles.label, style?.labelText], children: "FPS" }),
+            /* @__PURE__ */ jsx(Text, { style: [defaultStyles.value, style?.valueText], children: jsFps })
+          ] }),
+          showAverage && /* @__PURE__ */ jsxs(View, { style: defaultStyles.row, children: [
+            /* @__PURE__ */ jsx(Text, { style: [defaultStyles.label, style?.labelText], children: "Avg" }),
+            /* @__PURE__ */ jsx(Text, { style: [defaultStyles.value, style?.valueText], children: jsAverage.toFixed(averageDecimalPlaces) })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+export { FpsCounter, useFPSMetric, useUIFPSMetric };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useFPSMetric.ts","../src/useUIFPSMetric.ts","../src/FpsCounter.tsx"],"names":["useState","useEffect"],"mappings":"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","file":"index.mjs","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"]}

package/ios/FpsCounterModule.h

@@ -0,0 +1,12 @@
+#import <React/RCTBridgeModule.h>
+#import <React/RCTEventEmitter.h>
+
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <RNFpsCounterSpec/RNFpsCounterSpec.h>
+#endif
+
+@interface FpsCounterModule : RCTEventEmitter <RCTBridgeModule>
+#ifdef RCT_NEW_ARCH_ENABLED
+                                               , NativeFpsCounterSpec
+#endif
+@end

package/ios/FpsCounterModule.mm

@@ -0,0 +1,123 @@
+#import "FpsCounterModule.h"
+#import <QuartzCore/CADisplayLink.h>
+#import <React/RCTLog.h>
+
+@implementation FpsCounterModule {
+  CADisplayLink *_displayLink;
+  CFTimeInterval _lastTimestamp;
+  NSInteger _frameCount;
+  double _fps;
+  double _averageFps;
+  NSInteger _totalSamples;
+  BOOL _isMonitoring;
+  BOOL _hasListeners;
+}
+
+RCT_EXPORT_MODULE(FpsCounter)
+
++ (BOOL)requiresMainQueueSetup {
+  return YES;
+}
+
+- (instancetype)init {
+  if (self = [super init]) {
+    _frameCount = 0;
+    _lastTimestamp = 0;
+    _fps = 0;
+    _averageFps = 0;
+    _totalSamples = 0;
+    _isMonitoring = NO;
+    _hasListeners = NO;
+  }
+  return self;
+}
+
+- (NSArray<NSString *> *)supportedEvents {
+  return @[ @"onUIFpsUpdate" ];
+}
+
+- (void)startObserving {
+  _hasListeners = YES;
+}
+
+- (void)stopObserving {
+  _hasListeners = NO;
+}
+
+RCT_EXPORT_METHOD(startMonitoring) {
+  if (_isMonitoring) {
+    return;
+  }
+
+  _isMonitoring = YES;
+  _frameCount = 0;
+  _lastTimestamp = 0;
+  _fps = 0;
+  _averageFps = 0;
+  _totalSamples = 0;
+
+  dispatch_async(dispatch_get_main_queue(), ^{
+    self->_displayLink =
+        [CADisplayLink displayLinkWithTarget:self
+                                    selector:@selector(onDisplayLink:)];
+    [self->_displayLink addToRunLoop:[NSRunLoop mainRunLoop]
+                             forMode:NSRunLoopCommonModes];
+  });
+}
+
+RCT_EXPORT_METHOD(stopMonitoring) {
+  if (!_isMonitoring) {
+    return;
+  }
+
+  _isMonitoring = NO;
+
+  dispatch_async(dispatch_get_main_queue(), ^{
+    [self->_displayLink invalidate];
+    self->_displayLink = nil;
+  });
+}
+
+- (void)onDisplayLink:(CADisplayLink *)displayLink {
+  if (_lastTimestamp == 0) {
+    _lastTimestamp = displayLink.timestamp;
+    return;
+  }
+
+  _frameCount++;
+
+  CFTimeInterval elapsed = displayLink.timestamp - _lastTimestamp;
+
+  // Update FPS approximately once per second
+  if (elapsed >= 1.0) {
+    _fps = (double)_frameCount / elapsed;
+    _totalSamples++;
+
+    // Calculate rolling average (capped at 120 FPS for high refresh rate
+    // displays)
+    _averageFps =
+        MIN(_averageFps + (_fps - _averageFps) / _totalSamples, 120.0);
+
+    _frameCount = 0;
+    _lastTimestamp = displayLink.timestamp;
+
+    if (_hasListeners) {
+      [self sendEventWithName:@"onUIFpsUpdate"
+                         body:@{@"fps" : @(_fps), @"average" : @(_averageFps)}];
+    }
+  }
+}
+
+- (void)invalidate {
+  [self stopMonitoring];
+  [super invalidate];
+}
+
+#ifdef RCT_NEW_ARCH_ENABLED
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params {
+  return std::make_shared<facebook::react::NativeFpsCounterSpecJSI>(params);
+}
+#endif
+
+@end

package/ios/RNFpsCounter.podspec

@@ -0,0 +1,21 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, '..', 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name         = "RNFpsCounter"
+  s.version      = package['version']
+  s.summary      = package['description']
+  s.homepage     = package['homepage']
+  s.license      = package['license']
+  s.authors      = package['author']
+  s.platforms    = { :ios => "12.4" }
+  s.source       = { :git => package['repository']['url'], :tag => "v#{s.version}" }
+  s.source_files = "*.{h,m,mm}"
+  
+  if respond_to?(:install_modules_dependencies, true)
+    install_modules_dependencies(s)
+  else
+    s.dependency "React-Core"
+  end
+end

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@vyshnav18/react-native-fps-counter",
+  "version": "1.0.0",
+  "description": "High-performance FPS counter for React Native with native UI thread and JS thread tracking. Uses Turbo Modules for maximum performance.",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "src",
+    "ios",
+    "android",
+    "react-native.config.js",
+    "!**/__tests__"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepublishOnly": "npm run build",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "react-native",
+    "fps",
+    "performance",
+    "counter",
+    "frames-per-second",
+    "debugging",
+    "profiling",
+    "turbo-module",
+    "jsi",
+    "ui-thread"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-native": "^0.72.0",
+    "react": "^18.2.0",
+    "react-native": "^0.72.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  },
+  "codegenConfig": {
+    "name": "RNFpsCounterSpec",
+    "type": "modules",
+    "jsSrcsDir": "src/specs",
+    "android": {
+      "javaPackageName": "com.rnfpscounter"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-username/react-native-fps-counter.git"
+  },
+  "bugs": {
+    "url": "https://github.com/your-username/react-native-fps-counter/issues"
+  },
+  "homepage": "https://github.com/your-username/react-native-fps-counter#readme"
+}

package/react-native.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+    dependency: {
+        platforms: {
+            ios: {
+                podspecPath: './ios/RNFpsCounter.podspec',
+            },
+            android: {
+                sourceDir: './android',
+                packageImportPath: 'import com.rnfpscounter.FpsCounterPackage;',
+                packageInstance: 'new FpsCounterPackage()',
+            },
+        },
+    },
+};

package/src/FpsCounter.tsx

@@ -0,0 +1,190 @@
+import React from 'react';
+import { StyleSheet, Text, View, ViewStyle, TextStyle } from 'react-native';
+import { useFPSMetric } from './useFPSMetric';
+import { useUIFPSMetric } from './useUIFPSMetric';
+
+export interface FpsCounterStyles {
+    container?: ViewStyle;
+    text?: TextStyle;
+    labelText?: TextStyle;
+    valueText?: TextStyle;
+    jsSection?: ViewStyle;
+    uiSection?: ViewStyle;
+}
+
+export 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;
+}
+
+const defaultStyles = 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',
+    },
+});
+
+/**
+ * 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>
+ *   );
+ * }
+ * ```
+ */
+export const FpsCounter: React.FC<FpsCounterProps> = ({
+    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 (
+        <View
+            pointerEvents="none"
+            style={[defaultStyles.container, style?.container]}
+        >
+            {shouldShowUiFps && (
+                <>
+                    <Text style={defaultStyles.sectionLabel}>UI Thread</Text>
+                    <View style={defaultStyles.row}>
+                        <Text style={[defaultStyles.label, style?.labelText]}>FPS</Text>
+                        <Text style={[defaultStyles.value, style?.valueText]}>{uiFps}</Text>
+                    </View>
+                    {showAverage && (
+                        <View style={defaultStyles.row}>
+                            <Text style={[defaultStyles.label, style?.labelText]}>Avg</Text>
+                            <Text style={[defaultStyles.value, style?.valueText]}>
+                                {uiAverage.toFixed(averageDecimalPlaces)}
+                            </Text>
+                        </View>
+                    )}
+                </>
+            )}
+
+            {shouldShowUiFpsUnavailable && (
+                <>
+                    <Text style={defaultStyles.sectionLabel}>UI Thread</Text>
+                    <Text style={defaultStyles.unavailable}>Native module not linked</Text>
+                </>
+            )}
+
+            {(shouldShowUiFps || shouldShowUiFpsUnavailable) && showJsFps && (
+                <View style={defaultStyles.divider} />
+            )}
+
+            {showJsFps && (
+                <>
+                    <Text style={defaultStyles.sectionLabel}>JS Thread</Text>
+                    <View style={defaultStyles.row}>
+                        <Text style={[defaultStyles.label, style?.labelText]}>FPS</Text>
+                        <Text style={[defaultStyles.value, style?.valueText]}>{jsFps}</Text>
+                    </View>
+                    {showAverage && (
+                        <View style={defaultStyles.row}>
+                            <Text style={[defaultStyles.label, style?.labelText]}>Avg</Text>
+                            <Text style={[defaultStyles.value, style?.valueText]}>
+                                {jsAverage.toFixed(averageDecimalPlaces)}
+                            </Text>
+                        </View>
+                    )}
+                </>
+            )}
+        </View>
+    );
+};

package/src/index.ts

@@ -0,0 +1,10 @@
+// Hooks
+export { useFPSMetric } from './useFPSMetric';
+export type { FPS } from './useFPSMetric';
+
+export { useUIFPSMetric } from './useUIFPSMetric';
+export type { UIFPS } from './useUIFPSMetric';
+
+// Component
+export { FpsCounter } from './FpsCounter';
+export type { FpsCounterProps, FpsCounterStyles } from './FpsCounter';