Setting up RN Skia in web without deferring App loading

[santitopo]

Hello! My team and I are trying to set up skia in our project which uses react-native-web for it's web version.

We noticed that when using the LoadSkiaWeb approach to defer App.ts loading, everything works great but the loading time of the app increases by around 65% before the user gets any feedback. This is something that we cannot afford because our users normally access the web app on low speed networks.

As an alternative we are looking into wrapping the components that depend on skia with WithSkiaWeb. We got it working but have encountered a few issues with this approach:

• We had to patch the library to support passing props down to the component wrapped by WithSkiaWeb (Still not supported officially, although it seems like it would be a quite straightforward solution).

• We needed to wrap the desired component with React.memo to avoid an issue with skia breaking when the parent component rendered too many times. Wrapping it with memo limits the amount of re renders caused by the parent and apparently fixes the issue 'Cannot read properties of null (reading 'rangeMin').

• Because mobile version can't use the lazy import approach (Failing with Error: Unable to resolve module fs from /path/to/repo/node_modules/canvaskit-wasm/bin/full/canvaskit.js: fs could not be found within the project or in these directories), every component that requires skia needs to have the following folder structure, making it pretty verbose:

• Component/
  • BaseComponent.tsx
  • Component.tsx // Mobile version just re-exports BaseComponent
  • Component.web.tsx // Web version exports BaseComponent imported lazily through WithSkiaWeb.

Any feedback, or suggestions on best way to proceed? We are really excited about adding skia to our app but the DX hasn't been ideal. Thanks for any insights you may provide!

[SYoder1]

I am having the same problem on web, and spent some time looking into it before too. My hope was that I could wrap every skia component with a "loader", that would show some sort of loading component until skia was downloaded and initialized.

But I ran into some issues where it would throw an error on the first load, but after a dev hot reload it was working just fine. My guess is that it was something to do with how the canvas kit is loaded into the DOM, and that when a hot reload changed the DOM it would work correctly.

const SkiaLoadingComponent = ({ children }) => {
  const [isSkiaLoaded, setSkiaLoaded] = React.useState(false)

  useLayoutEffect(() => {
    LoadSkiaWeb().then(() => {
      setSkiaLoaded(true)
    })
  }, [])

  return !isSkiaLoaded ? <ActivityIndicator /> : children
}

export default TestComponentWithSkia = ({props}) => {
    return (
        <SkiaLoadingComponent>
          <SkiaComponentt {...props} />
        </SkiaLoadingComponent>
    )
}