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.

https://github.com/user-attachments/assets/5ade9c41-5cbc-41cf-acca-6bb81d314b0c

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[bot]]

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

https://github.com/user-attachments/assets/d78d62b4-26d4-4d57-93c8-b4a8ecfefc12

[rota-rossi]

Shouldn't this PR add a little bit of info to README on how to use it on react-native? 👀

[imranbarbhuiya]

Can't use it with nativewind. I already have [['babel-preset-expo', { jsxImportSource: 'nativewind' }], 'nativewind/babel'] in presets so keeping babel-preset-expo throws duplicate preset and removing it throws error related to jsxImportSource

[RobPruzan]

Can't use it with nativewind. I already have [['babel-preset-expo', { jsxImportSource: 'nativewind' }], 'nativewind/babel'] in presets so keeping babel-preset-expo throws duplicate preset and removing it throws error related to jsxImportSource

will get a fix up quickly

[angelo-hub]

wow thread is moving so fast can't wait for the nativewind fix so i can test it

[RobPruzan]

You shouldn't need the babel plugin to run in development btw ( ~~@imranbarbhuiya problems without the babel plugin are probably unrelated/ or caching related~~ nvm misread, if he removes the withReactScanTreeShake entirely it should work)

wow thread is moving so fast can't wait for the nativewind fix so i can test it

[Johan-dutoit]

Firstly- this is phenomenal. Thank you for sharing this tool (most certainly a game changer)! Worked pretty easily out the box with our app (simple setup indeed).

Some parts of our app is clearly rendering poorly (due to it becoming non-responsive, I've disabled the log and animation), which led me down the rabbit hole of only enabling it on certain screens/times. However, when it starts up with enabled: false it seems that there is no way to turn it on again using the "React Scan" toolbar or with a useState value. Not sure if a bug or intended behaviour?

[RobPruzan]

Firstly- this is phenomenal. Thank you for sharing this tool (most certainly a game changer)! Worked pretty easily out the box with our app (simple setup indeed).

Some parts of our app is clearly rendering poorly (due to it becoming non-responsive, I've disabled the log and animation), which led me down the rabbit hole of only enabling it on certain screens/times. However, when it starts up with enabled: false it seems that there is no way to turn it on again using the "React Scan" toolbar or with a useState value. Not sure if a bug or intended behaviour?

Yeah I agree this is confusing/bad. Pushed a change so in the next release so it's reactive to enabled changing

[Johan-dutoit]

Yeah I agree this is confusing/bad. Pushed a change so in the next release so it's reactive to enabled changing

Thanks, pulled in the changes and that works!

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

Question from my software team is, is there any project to store scan data of the project so that we can put react-scanner in 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 !