React native support

[aidenybai]

Hi! We're ready to show you an early preview of React Scan for Native. It's not 100% feature parity with web yet, and a lot of technical decisions are up for change, but we'd love for you to try it out.

Please leave all React Native bugs/feedback within this PR until it is merged.

SimulatorScreenRecording-iPhone16-2024-11-27at16.25.23-ezgif.com-crop-video.mp4

Setup guide

First, install the required dependencies:

npm install @shopify/react-native-skia@^1.5.10 react-native-reanimated react-scan@native

Then, wrap your root component with ReactScan:

import { ReactScan } from 'react-scan/native';

// For Expo, in _layout.tsx:
export default function Layout() {
  return (
    <ReactScan
        options={{
           enabled: true,
           log: true,
           animationWhenFlashing: false,
        }}
     >
      <Stack>{/* Your app content */}</Stack>
    </ReactScan>
  );
}

// For vanilla React Native, wrap your root component similarly

The React Native version supports most of the options described in the API Reference section below, with a few differences:

• Not Available: playSound, runInProduction, includeChildren, onPaintFinish, and onPaintStart
• Additional Options:

  {
    /**
     * 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:

<ReactScan
  options={{
    enabled: true,
    log: true,
    animationWhenFlashing: 'fade-out',
  }}
>
  {/* Your app content */}
</ReactScan>

Important

By default, Metro bundler includes React Scan in production builds, which can add up to 6MB 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:

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.

Contributing

Please leave all React Native bugs/feedback within this PR until it is merged.

To setup:

git clone https://github.com/aidenybai/react-scan.git
cd react-scan
git checkout react-native

You'll need to create a React Native test repo to get it spun up

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-scan	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 28, 2024 6:30pm

[izakfilmalter]

[RobPruzan]

Coming soon, we put this on the back burner in favor of https://x.com/aidenybai/status/1861079416480383159, but we're hoping to ship this soon!

Only todo is to make sure we don't bloat your production bundle with 6mb of react-native-skia (probably requires a metro plugin)

[slorber]

For my curious readers 😇 here's what it should look like:

https://x.com/aidenybai/status/1861612714537427045

ssstwitter.com_1732702337955.mp4

[tanjwGit]

hi boss, Can I not use react-native-reanimated?

I think maybe many people are like us and cannot use react-native-reanimated for some reason

[RobPruzan]

hi boss, Can I not use react-native-reanimated?

I think maybe many people are like us and cannot use react-native-reanimated for some reason

Currently its required, but most likely in the next release for react-scan@native we will drop this requirement

[ice-cap0]

any dice?

[Acetyld]

Alright we tried this as well.
Walked into to many rerenders, setting renderCountThreshold to 20 fixes it but holy its so slow.
A flash list, it does like each item every 2 seconds, its like every 0.2 seconds i checks 1 child.
The whole app freezes.

So above comments confirm our case, non the less great work guys!

[arthur-fontaine]

It is not compatible with React Native Web due to use of matchFont (here), which is not implemented on web.

One of Skia's contributor recommended to use the Paragraph API instead Shopify/react-native-skia#2303 (comment).

[RobPruzan]

any dice?

All fixes will come with when @react-native lands on main

taking longer than I hoped to upstream the fixes because I'm working on some react-scan@web features that have taken priority

[sant3001]

Same here... I'm getting that "Maximum call stack size exceeded" error:

[KMJ-007]

would love to try and get this PR merge as fast as possible

[shmkane]

Just commenting here to indicate my interest in the RN version as lots of others have already expressed :)

[a-eid]

doesn't seem to be working with RNW

[dhruvpvx]

is it possible to use it without skia?

[sant3001]

is it possible to use it without skia?

Yeah that'd be nice. I don't really want to install skia because we're using different libraries. Would be nice to have a standard solution that works without external dependencies like that.

[Ammar1999y]

why it doesn't support android?!

[Choco-milk-for-u]

while enabled i can no longer use inputs or navigation. Also button (react-scan) sometimes work sometimes doesnt?

[deepanshushukla]

while enabled i can no longer use inputs or navigation. Also button (react-scan) sometimes work sometimes doesnt?
Facing same issue

[Ammar-1999]

while enabled i can no longer use inputs or navigation. Also button (react-scan) sometimes work sometimes doesnt?

are you using Android?

[deepanshushukla]

while enabled i can no longer use inputs or navigation. Also button (react-scan) sometimes work sometimes doesnt?

are you using Android?

Yes

[Ammar1999y]

while enabled i can no longer use inputs or navigation. Also button (react-scan) sometimes work sometimes doesnt?

are you using Android?

Yes

It's not working on Android

[Choco-milk-for-u]

while enabled i can no longer use inputs or navigation. Also button (react-scan) sometimes work sometimes doesnt?

are you using Android?

Yes

It's not working on Android

is there any way to know the progress? When would it be possible to use for android.

[Derewith]

Any updates?

[RobPruzan]

Any updates?

Okay good news. I finally figured out how to make react scan work for react native. i was worried it wasn't possible, but the approach I came up with should allow for full parity with web.

This will take a bit to cook, but it's coming :)

[Choco-milk-for-u]

Any updates?

Okay good news. I finally figured out how to make react scan work for react native. i was worried it wasn't possible, but the approach I came up with should allow for full parity with web.

This will take a bit to cook, but it's coming :)

🔥 🔥 🔥 🔥 i honestly thought i would never see that in any time soon 😭

[RobPruzan]

Any updates?? I've been waiting for this since months now

The changes are quite significant, so will need some patience. Will share updates as they come

[josanjohnata]

Any updates?? I've been waiting for this since months now

The changes are quite significant, so will need some patience. Will share updates as they come

No update yet? 😢

[RobPruzan]

Any updates?? I've been waiting for this since months now

The changes are quite significant, so will need some patience. Will share updates as they come

No update yet? 😢

Current priorities are:

• v1.0 (lots of bug fixes)
• MCP server for react scan

after those I'll pick up the react native effort again

[Rag0n]

Hey @RobPruzan, do you have any update on react-native support or plans?

[rdmclin2]

Does react native version support react19 ?

[malekelkssas]

I'm getting a Babel plugin conflict when trying to add react-scan to React Native:

SyntaxError: node_modules/react-native/src/private/specs/components/RCTInputAccessoryViewNativeComponent.js: NodePath has been removed so is read-only.
    at File.buildCodeFrameError (node_modules/@babel/core/lib/transformation/file/file.js:202:12)
    at NodePath.buildCodeFrameError (node_modules/@babel/traverse/lib/path/index.js:117:21)
    at NodePath._assertUnremoved (node_modules/@babel/traverse/lib/path/removal.js:65:16)
    at NodePath.insertAfter (node_modules/@babel/traverse/lib/path/modification.js:102:29)
    at NodePath.replaceWithMultiple (node_modules/@babel/traverse/lib/path/replacement.js:58:22)
    at PluginPass.exit (node_modules/@react-native/babel-plugin-codegen/index.js:171:32)
    ...

Environment:

• React Native: 0.74.5
• React: 18.2.0

Setup:
Using withReactScanTreeShake wrapper as documented in PR #23:

const { withReactScanTreeShake } = require('react-scan/babel');

module.exports = withReactScanTreeShake({
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    // ... other plugins
    'react-native-reanimated/plugin',
  ],
});

The error occurs during the build process. It seems there's a conflict between @react-native/babel-plugin-codegen and react-scan's babel transformation when processing React Native's internal spec files.

Has anyone successfully integrated react-scan with React Native 0.74.x?