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

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

[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