React native support

README.md

@@ -111,6 +111,88 @@ export default function RootLayout({
 
 </details>
 
+<details>
+<summary><b>React Native</b></summary>
+
+<br />
+
+First, install the required dependencies:
+
+```bash
+npm install @shopify/react-native-skia@^1.5.10 react-native-reanimated react-scan
+```
+
+Then, wrap your root component with `ReactScan`:
+
+```jsx
+import { ReactScan } from 'react-scan/native';
+
+// For Expo, in _layout.tsx:
+export default function Layout() {
+  return (
+    <ReactScan
+      options={{
+        animationWhenFlashing: 'fade-out',
+      }}
+    >
+      <Stack>{/* Your app content */}</Stack>
+    </ReactScan>
+  );
+}
+
+// For vanilla React Native, wrap your root component similarly
+```
+
+The React Native version supports most of the [options](#api-reference) described in the API Reference section below, with a few differences:
+
+- **Not Available**: `playSound`, `runInProduction`, `includeChildren`, `onPaintFinish`, and `onPaintStart`
+- **Additional Options**:
+  ```typescript
+  {
+    /**
+     * Controls the animation of the re-render overlay.
+     * When set to "fade-out", the overlay will fade out after appearing.
+     * When false, no animation will be applied.
+     * Note: Enabling animations may impact performance.
+     * @default false
+     */
+    animationWhenFlashing?: 'fade-out' | false;
+  }
+  ```
+
+Example usage with options:
+
+```jsx
+<ReactScan
+  options={{
+    enabled: true,
+    log: true,
+    animationWhenFlashing: false,
+  }}
+>
+  {/* Your app content */}
+</ReactScan>
+```
+
+> [!IMPORTANT]
+> By default, Metro bundler includes React Scan in production builds, which can add [up to 6MB](https://shopify.github.io/react-native-skia/docs/getting-started/installation/#bundle-size) to your bundle size. To prevent this, use our babel plugin:
+
+1. If you are not using expo, install expo-babel-preset (works outside of expo):
+   `npm install babel-preset-expo`
+
+2. Create or modify your `babel.config.js`:
+
+```js
+const { withReactScanTreeShake } = require('react-scan/babel');
+module.exports = withReactScanTreeShake({
+  // Your existing babel options go here
+});
+```
+
+This will automatically remove React Scan from production builds while keeping it available during development.
+
+</details>
+
 <details>
 <summary><b>Vite / Create React App</b></summary>
 

babel.js

@@ -0,0 +1 @@
+export * from './dist/core/native/plugins/babel.js';

native.js

@@ -0,0 +1 @@
+export * from './dist/native.js';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-scan",
-  "version": "0.0.34",
+  "version": "0.0.36-native",
   "description": "Scan your React app for renders",
   "keywords": [
     "react",
@@ -90,21 +90,45 @@
         }
       }
     },
+    "./babel": {
+      "types": "./dist/babel.d.ts",
+      "default": "./dist/babel.js"
+    },
     "./dist/*": "./dist/*.js",
     "./dist/*.js": "./dist/*.js",
-    "./dist/*.mjs": "./dist/*.mjs"
+    "./dist/*.mjs": "./dist/*.mjs",
+    "./native": {
+      "types": "./dist/native.d.ts",
+      "default": "./dist/native.js"
+    }
   },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "browser": "dist/auto.global.js",
+  "react-native": "dist/native.js",
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "native": [
+        "./dist/native.d.ts"
+      ],
+      ".": [
+        "./dist/auto.d.ts"
+      ],
+      "babel": [
+        "./dist/babel.d.ts"
+      ]
+    }
+  },
   "bin": "bin/cli.js",
   "files": [
     "dist",
     "bin",
     "package.json",
     "README.md",
     "LICENSE",
+    "native.js",
+    "babel.js",
     "auto.d.ts"
   ],
   "scripts": {
@@ -122,6 +146,8 @@
     "playwright": "^1.49.0"
   },
   "devDependencies": {
+    "@shopify/react-native-skia": "*",
+    "@types/node": "^22.10.0",
     "@types/react": "^18.3.12",
     "@types/react-reconciler": "^0.28.8",
     "@vercel/style-guide": "^6.0.0",
@@ -130,10 +156,26 @@
     "publint": "^0.2.12",
     "react": "*",
     "react-dom": "*",
+    "react-native": "*",
+    "react-native-reanimated": "*",
     "react-reconciler": "^0.29.2",
     "terser": "^5.36.0",
     "tsup": "^8.2.4"
   },
+  "peerDependenciesMeta": {
+    "@shopify/react-native-skia": {
+      "optional": true
+    },
+    "babel-preset-expo": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "react-native-reanimated": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   }