Bug - Skia: Canvas crashes with "Expected arraybuffer as first parameter" error

[nawwa]

Environment:
Device: iOS Simulator/Device
Expo SDK: ~54.0.27
React Native: 0.81.5
React: 19.1.0
@shopify/react-native-skia: ^2.4.7

Description:
The app crashes immediately when rendering a @shopify/react-native-skia Canvas component with the error:
[Error: Expected arraybuffer as first parameter]

To Reproduce:

• Install @shopify/react-native-skia@^2.4.7 in an Expo ~54 project
• Import and use Canvas from @shopify/react-native-skia
• Render any Skia components inside the Canvas
• Run on iOS
• Error occurs immediately on component mount

Code:

import { Canvas, Circle, Group } from "@shopify/react-native-skia";

<Canvas style={{ width: 256, height: 256 }}>
  <Group blendMode="multiply">
    <Circle cx={r} cy={r} r={r} color="cyan" />
    <Circle cx={width - r} cy={r} r={r} color="magenta" />
    <Circle cx={width / 2} cy={width - r} r={r} color="yellow" />
  </Group>
</Canvas>

Expected behavior:
Canvas should render with the Skia components (circles with blend mode).

Actual behavior:
App crashes with arraybuffer error at Canvas initialization.

Root Cause:

• Likely a version compatibility issue between:
• React Native 0.81.5 (relatively new)
• Expo SDK 54
• react-native-skia 2.4.7 (may not fully support this RN version yet)
  .x

[nawwa]

cc @EvanBacon - could be related to Shopify/react-native-skia#3552 ?

[pierrms]

@nawwa Also have been getting the same issue. Did you find any combination of versions that worked? Btw, I am testing with android and I am getting the same error.

[brentlecomte-itp]

Running into the same issue however I am using React Native 0.81.4.

I've also checked this reply on the pr that should have fixed this issue and it does match.

I'm tempted to think that this might be because the native version of Skia doesn't match the JavaScript one, could that be? if not, please send me a reproduction and I will fix it asap. We have end to end tests on expo projects.

[adityaranjan006]

"react-native": "0.81.5", "@shopify/react-native-skia": "^2.4.14".
For me its was working since last friday, it crashed out of no where automatically. After updating the node modules and package install without the pacakge-lock .json

I removed both node_modules and package-lock.json and re-intalled the dependencies and Re-build the App(IOS) I can see the shaders loading correctly now.

[Qnedy]

"react-native": "0.81.5", "@shopify/react-native-skia": "^2.4.14". For me its was working since last friday, it crashed out of no where automatically. After updating the node modules and package install without the pacakge-lock .json

I removed both node_modules and package-lock.json and re-intalled the dependencies and Re-build the App(IOS) I can see the shaders loading correctly now.

I was facing the same problem and using these same versions, but deleting node modules and package-lock did not solve the problem.
I needed to run npx expo install @shopify/react-native-skia expo-file-system expo-sharing, and it solved the problem

It was indeed a version conflict with those libraries for me

[tan5166]

Hi, I also encountered this error. From my investigation, I believe this is caused by the following reasons:

1. Pre-compiled Binary Mismatch: Expo Go uses a pre-compiled native binary that seems to be outdated and lacks the latest C++ fixes (like the null check in MakePicture). It ignores the fixed .cpp files in your node_modules.
2. Compilation: The source code in the repo is correct, but the fix only takes effect if the library is actually compiled locally from the source.

How to fix this:

• Option 1 (Recommended): Stop using Expo Go and switch to Development Builds (npx expo run:android or run:ios). This forces a local compilation of the latest source code, which includes the fix.
• Option 2: Downgrade @shopify/react-native-skia to the version officially supported by your current Expo SDK to match the outdated pre-compiled binary.