[SOLVED] How do I install React Native Skia so that I can use it with an Expo project and see it working in Expo Go?

How do I install React Native Skia so that I can use it with an Expo project and see it working in Expo Go?

I've been trying to start a project which will use React Native Skia to draw HTML Canvas like graphics. I've set up an Expo project and ran the following command - npx expo install @shopify/react-native-skia.

When I try to open the project in Expo GO I get the following message:

Uncaught Error Cannot read property 'displayName' of undefined

This is being called from withDevTools.js which I assume is part of the Expo bundling software.

This only happens if I try to use Skia in the project but not otherwise?

I tried to run the basic Skia example as follows:

import {Canvas, Circle, Group} from "@shopify/react-native-skia";
 
export const HelloWorld = () => {
  const size = 256;
  const r = size * 0.33;
  return (
    <Canvas style={{ flex: 1 }}>
      <Group blendMode="multiply">
        <Circle cx={r} cy={r} r={r} color="cyan" />
        <Circle cx={size - r} cy={r} r={r} color="magenta" />
        <Circle
          cx={size/2}
          cy={size - r}
          r={r}
          color="yellow"
        />
      </Group>
    </Canvas>
  );
};

Within the Skia Installation guide linked below it says run pod install on the ios directory. I have not do this step as Expo has not created an ios directory that I can find? Any help would be appreciated.

https://shopify.github.io/react-native-skia/docs/getting-started/installation

Solution

I had this issue as well. Turns out that you need a default export in your App.js.

i.e. you need export default HelloWorld = () => { ... instead.