Canvas undefined when adding react-native-skia to an existing react-native app

[yiglas]

After installing react-native-skia onto an existing react-native app, I am unable to use the Canvas component:

Errors:
1 of 4:

Invariant Violation: Calling synchronous methods on native modules is not supported in Chrome.

 Consider providing alternative methods to expose this method in debug mode, e.g. by exposing constants ahead-of-time

2 of 4

Error: Requiring module "node_modules/@shopify/react-native-skia/lib/module/index.js", which threw an exception: Invariant Violation: Calling synchronous methods on native modules is not supported in Chrome.

 Consider providing alternative methods to expose this method in debug mode, e.g. by exposing constants ahead-of-time.

3 of 4

TypeError: Cannot read property 'Canvas' of undefined

4 of 4

TypeError: Cannot read property 'Canvas' of undefined

Environment:
"react-native": "^0.69.3"
"@shopify/react-native-skia": "^0.1.137"

Code:

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

export default () => {
  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>
  );
};

What I've done:

1. installed react-native-skia via: yarn add react-native-skia
2. ran pod install via: npx pod-install
3. ran app and got the above error.
4. cleaned app via: npx react-native-clean-project
5. reran app but still get the same error

Any ideas? Thank you in advance.

[chrfalch]

Looks like you are running this in Chrome Debug mode (the error message Calling synchronous methods on native modules is not supported in Chrome) which is not supported.

[yiglas]

Clicking Stop Debugging from the developer menu. After the screen refreshed I get the following error in the Metro terminal:

ERROR  TypeError: undefined is not an object (evaluating 'this.InnerNativeModule.installCoreFunctions')
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

If I remove the react-native-skia import statement and corresponding components there are no errors and the app loads.

In troubleshooting I updated react-native

System:
    OS: macOS 12.4
    CPU: (10) arm64 Apple M1 Pro
    Memory: 185.06 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.7.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.15.0 - /opt/homebrew/bin/npm
    Watchman: 2022.07.04.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
    Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
  Languages:
    Java: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.0.0 => 18.0.0
    react-native: 0.69.3 => 0.69.3
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

[chrfalch]

I guess you've made sure to run pod install as per the docs?

[yiglas]

Yea, I've ran pod install, pod install --repo-update, npx react-native-clean-project and npx pod-install multiple time.

[yiglas]

Looking more into this, the error I am getting (after I stop using the Chrome Debugger) has to due with react-native-reanimated, not react-native-skia. Removing the Skia code and flipping between Chrome debugging and not, my app breaks when Chrome debugging is off but works when it is on. Very strange.

Thank you for your help. Going to do more research into react-native-reanimated to figure out what is going on.

[simistern]

@yiglas What did you find out? I am dealing with this now

[Haseeba393]

any luck in this issue

[bonnmh]

I got this error on Android