Merge pull request #17 from Nodonisko/feat/make-reanimated-optional

feat: make Reanimated optional

Author: Nodonisko

README.md

@@ -12,10 +12,18 @@ Low overhead monitoring of important performance metrics for React Native apps l
 bun add react-native-performance-toolkit react-native-nitro-modules
 ```
 
+### Optional: Reanimated support
+
+If you want to use UI thread components and hooks (recommended for accurate FPS display), install the optional dependencies:
+
+```bash
+bun add react-native-reanimated react-native-worklets react-native-gesture-handler
+```
+
 ## Requirements
 
 - React Native v0.76.0 or higher
-- Reanimated v4 or higher
+- (Optional) Reanimated v4 or higher - for UI thread components and hooks
 
 ## Usage
 
@@ -67,11 +75,13 @@ const SomeComponent = () => {
 
 ### Reanimated Hooks - UI Thread
 
+> **Note:** These features require `react-native-reanimated` and `react-native-worklets` to be installed. Import from `react-native-performance-toolkit/reanimated`.
+
 To avoid the issue with not showing 0 FPS, it's recommended to use Reanimated based hooks or pre-made components. This will ensure the value is updated even if the JS thread is blocked.
 
 ```tsx
 import { TextInput } from 'react-native'
-import { useFpsJsSharedValue } from 'react-native-performance-toolkit'
+import { useFpsJsSharedValue } from 'react-native-performance-toolkit/reanimated'
 import Animated, {
   useAnimatedReaction,
   useAnimatedRef,
@@ -97,6 +107,8 @@ const SomeComponent = () => {
 
 ### Pre-made Reanimated components - UI Thread
 
+> **Note:** These features require `react-native-reanimated`, `react-native-worklets`, and `react-native-gesture-handler` to be installed. Import from `react-native-performance-toolkit/reanimated`.
+
 For better DX, the library provides pre-made Reanimated components that run solely on the UI thread. You can use either the convenience wrappers or the flexible base component:
 
 ```tsx
@@ -106,7 +118,7 @@ import {
   CpuUsageCounter,
   MemoryUsageCounter,
   UIThreadReanimatedCounter,
-} from 'react-native-performance-toolkit'
+} from 'react-native-performance-toolkit/reanimated'
 
 const SomeComponent = () => {
   return (
@@ -157,6 +169,8 @@ console.log('Memory Usage:', getValueFromBuffer(memoryUsageBuffer))
 
 ### Access from worklets (advanced usage)
 
+> **Note:** This requires `react-native-reanimated` and `react-native-worklets` to be installed.
+
 You can also access the value from any worklet thread, but to do that you need to use [Nitro Modules unboxing function](https://nitro.margelo.com/docs/worklets). For more detailed implementation look for [source code of UI Reanimated hooks like `useFpsJsSharedValue`](https://github.com/Nodonisko/react-native-performance-toolkit/blob/main/src/hooks/uiThreadHooks.ts).
 
 ```tsx
@@ -187,6 +201,8 @@ const updateFps = useCallback(() => {
 
 ## API Reference
 
+### Core API (no additional dependencies)
+
 - **Simple getters**
   - `getJsFps(): number` - Returns current JS FPS (0-60)
   - `getUiFps(): number` - Returns current UI FPS (0-30/60/90/120/...)
@@ -207,12 +223,6 @@ const updateFps = useCallback(() => {
   - `useCpuUsage(): number` - Hook that returns current CPU usage
   - `useMemoryUsage(): number` - Hook that returns current memory usage
 
-- **React Components (runs on UI Thread)**
-  - `<JSFpsCounter />` - Pre-made component displaying JS FPS
-  - `<UIFpsCounter />` - Pre-made component displaying UI FPS
-  - `<CpuUsageCounter />` - Pre-made component displaying CPU usage
-  - `<MemoryUsageCounter />` - Pre-made component displaying memory usage
-
 - **Buffer-based API**
   - `getJsFpsBuffer(): ArrayBuffer` - Returns ArrayBuffer with JS FPS data
   - `getUiFpsBuffer(): ArrayBuffer` - Returns ArrayBuffer with UI FPS data
@@ -229,6 +239,25 @@ const updateFps = useCallback(() => {
     - `getDeviceMaxRefreshRate(): number`
     - `getDeviceCurrentRefreshRate(): number`
 
+### Reanimated API (requires optional dependencies)
+
+Import from `react-native-performance-toolkit/reanimated`:
+
+- **React Components (runs on UI Thread)**
+  - `<JSFpsCounter />` - Pre-made component displaying JS FPS
+  - `<UIFpsCounter />` - Pre-made component displaying UI FPS
+  - `<CpuUsageCounter />` - Pre-made component displaying CPU usage
+  - `<MemoryUsageCounter />` - Pre-made component displaying memory usage
+  - `<UIThreadReanimatedCounter label="..." type="js|ui|cpu|memory" />` - Flexible base component
+  - `<DraggableView>` - Draggable wrapper component
+
+- **Reanimated Hooks (UI Thread)**
+  - `useFpsJsSharedValue()` - Returns SharedValue with JS FPS
+  - `useFpsUiSharedValue()` - Returns SharedValue with UI FPS
+  - `useFpsCpuSharedValue()` - Returns SharedValue with CPU usage
+  - `useFpsMemorySharedValue()` - Returns SharedValue with memory usage
+  - `useCounterSharedValue(type)` - Generic hook for any counter type
+
 ## Architecture
 
 ### Low overhead tracking

bun.lock

@@ -14,7 +14,7 @@ import {
   UIFpsCounter,
   CpuUsageCounter,
   MemoryUsageCounter,
-} from 'react-native-performance-toolkit';
+} from 'react-native-performance-toolkit/reanimated';
 
 function formatValue(value: number): string {
   return Number.isFinite(value) ? value.toFixed(0) : '0';

example/App.tsx

@@ -1,21 +1,7 @@
-const path = require('path');
-const pak = require('../package.json');
-
 module.exports = api => {
   api.cache(true);
   return {
     presets: ['module:@react-native/babel-preset'],
-    plugins: [
-      [
-        'module-resolver',
-        {
-          extensions: ['.js', '.ts', '.json', '.jsx', '.tsx'],
-          alias: {
-            [pak.name]: path.join(__dirname, '../', pak.source),
-          },
-        },
-      ],
-      'react-native-worklets/plugin',
-    ],
+    plugins: ['react-native-worklets/plugin'],
   };
 };

example/babel.config.js

@@ -1,5 +1,6 @@
 const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
 const path = require('path');
+const pak = require('../package.json');
 const root = path.resolve(__dirname, '..');
 
 /**
@@ -10,6 +11,25 @@ const root = path.resolve(__dirname, '..');
  */
 const config = {
   watchFolders: [root],
+  resolver: {
+    resolveRequest: (context, moduleName, platform) => {
+      // Handle subpath import
+      if (moduleName === `${pak.name}/reanimated`) {
+        return {
+          filePath: path.resolve(__dirname, '../src/reanimated.tsx'),
+          type: 'sourceFile',
+        };
+      }
+      // Handle main package import
+      if (moduleName === pak.name) {
+        return {
+          filePath: path.resolve(__dirname, '../src/index.tsx'),
+          type: 'sourceFile',
+        };
+      }
+      return context.resolveRequest(context, moduleName, platform);
+    },
+  },
 };
 
 module.exports = mergeConfig(getDefaultConfig(__dirname), config);

example/metro.config.js

@@ -6,7 +6,8 @@
     "strict": true,
     "baseUrl": ".",
     "paths": {
-      "react-native-performance-toolkit": ["../src"]
+      "react-native-performance-toolkit": ["../src"],
+      "react-native-performance-toolkit/reanimated": ["../src/reanimated"]
     }
   }
 }

example/tsconfig.json

@@ -38,6 +38,8 @@
     "ios/**/*.swift",
     "app.plugin.js",
     "*.podspec",
+    "reanimated.js",
+    "reanimated.d.ts",
     "README.md",
     "!example",
     "!media"
@@ -79,6 +81,17 @@
     "react-native-worklets": "*",
     "react-native-gesture-handler": "*"
   },
+  "peerDependenciesMeta": {
+    "react-native-reanimated": {
+      "optional": true
+    },
+    "react-native-worklets": {
+      "optional": true
+    },
+    "react-native-gesture-handler": {
+      "optional": true
+    }
+  },
   "eslintConfig": {
     "root": true,
     "extends": [

package.json

@@ -0,0 +1 @@
+export * from './lib/typescript/src/reanimated'

reanimated.d.ts

@@ -0,0 +1 @@
+module.exports = require('./lib/commonjs/reanimated.js')

reanimated.js

@@ -1,7 +1,5 @@
 import './specs/TurboPerformanceToolkit'
 
-import React from 'react'
-import { UIThreadReanimatedCounter } from './components/UIThreadReanimatedCounter'
 import { PerformanceToolkit } from './hybrids'
 
 export {
@@ -11,21 +9,6 @@ export {
   PerformanceToolkit,
 } from './hybrids'
 
-export const JSFpsCounter = () => {
-  return <UIThreadReanimatedCounter label="JS FPS" type="js" />
-}
-
-export const UIFpsCounter = () => {
-  return <UIThreadReanimatedCounter label="UI FPS" type="ui" />
-}
-
-export const CpuUsageCounter = () => {
-  return <UIThreadReanimatedCounter label="CPU" type="cpu" />
-}
-export const MemoryUsageCounter = () => {
-  return <UIThreadReanimatedCounter label="RAM" type="memory" />
-}
-
 export const getDeviceMaxRefreshRate = () =>
   PerformanceToolkit.getDeviceMaxRefreshRate()