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

[vlanemcev]

Hi, for now my app is crashing with "Maximum call stack size exceeded" when I try to use it with Tamagui.
If it's not crashing - it is super laggy.

I know that it's still in development and in early adoption, but it would be so nice to have it work together.
@natew

[RobPruzan]

Hi, for now my app is crashing with "Maximum call stack size exceeded" when I try to use it with Tamagui. If it's not crashing - it is super laggy.

I know that it's still in development and in early adoption, but it would be so nice to have it work together. @natew

Checking this out!

[ice-cap0]

i'm not using it with tamagui and getting max call stack error too

RangeError: Maximum call stack size exceeded, js engine: hermes

[yunusyavuz16]

Here is the question that comes from my software team: Would there any web or any project be to store scanning data of the project. So that, we can put react-scanner into our pipelines.

[mbilenko-florio]

Hi, for now my app is crashing with "Maximum call stack size exceeded" when I try to use it with Tamagui. If it's not crashing - it is super laggy.

I know that it's still in development and in early adoption, but it would be so nice to have it work together. @natew

Essentially JS thread is running at zero FPS, react scan takes all CPU power away.

[RobPruzan]

Hi, for now my app is crashing with "Maximum call stack size exceeded" when I try to use it with Tamagui. If it's not crashing - it is super laggy.
I know that it's still in development and in early adoption, but it would be so nice to have it work together. @natew

Essentially JS thread is running at zero FPS, react scan takes all CPU power away.

I have some ideas for performance improvements, will keep thread updated when progress is made

[berhanserin]

Now we are getting a javascript bad request error.

[AleCatSS]

Hello, thank you very much for this tool!
I'm testing it on our project and currently getting the following errors:

Our project is using RN 0.74.5 and I followed the vanilla RN instruction above.
Thank you!

[berhanserin]

@AleCatSS Greetings, you probably missed something during the installation process. I think you should check it again. Because I was able to install it without any problems. But I am encountering errors on native codes.

[vkukade-altir]

Excited about this product. Tested on React native version 0.72.4. Experiencing this issue.

RangeError: Maximum call stack size exceeded, js engine: hermes

Error: ENOENT: no such file or directory, open '/Users/distiller/react-native/packages/react-native/sdks/hermes/build_iphonesimulator/lib/InternalBytecode/InternalBytecode.js'

[AleCatSS]

@AleCatSS Greetings, you probably missed something during the installation process. I think you should check it again. Because I was able to install it without any problems. But I am encountering errors on native codes.

got it working thanks, for some reason 'react-native-skia' pod was not installed
, I run pod install manually and fixed it.

[Nikunj-bisht]

getting this error and app is very laggy

[metkm]

Currently It's so laggy and I can't click some stuff like inputs

[a-eid]

should RN skia be installed as a dev deps, since we don't really use it in production ?

[burakgokcinarr]

Hello, first of all, health to your hand. I have a question. I implemented the react-scan library to experience it myself. Something here caught my attention. When I change ‘setState’, it seems like all my components are rebuilt. I understand this from the continuous increase of the numbers in the animation. (x10, x17, x22 .....) What exactly does the library aim or is there someone who can explain what I don't understand? I apologise in advance :(

[RobPruzan]

Update on existing bugs relating to max call stack exceeded and perf issues

max call stack problem

have fix, will be in a future release

perf issues

• the root cause of the perf issues is too many UIManager.measure calls, some ideas to fix that:
  • stop UIManager.measure entirely, re-implement the visualization by overriding the default react-native view and injecting styles into user views. I've seen this done in other projects (something like require("//defaut-view).default = OverridedView), so I know it's possible, but this is probably a last resort if we can't make skia canvas work
  • aggressive caching strategies & smart revalidation strategies for UIManager.measure calls
    • we already cache measurements based on time, but we can do more
    • we can also do things like "prefetch" the component measurement in background when event loop is idle
  • limit how granular we show render outlines
    • for ex. if there are thousands of re-rendered component instances, limit number of components we calculate UIManager.measure , and create new UI to represent "this component also has more children that re-rendered, but we will not draw the rectangles for it"
    • this is probably the safest/most robust solution

We have some other backlog items for react scan before I will get to fixing the perf problems, so contributions/suggestions welcome till then :)

[joaquinvaz]

Please improve perf, it's not usable right now, great job, love the library!

[DavidAmunga]

This is good, Can't wait for this to be released !

[321paranoiawhy]

Since react native 0.76, you can try the new react native devtools, just type j in the terminal to open it and navigate to Components tab, click the setting button and toggle Hightlight updates when components render.. That's all, hope u have fun with it!

[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?