Shopify
Canvas undefined when adding react-native-skia to an existing react-native app
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:
- installed react-native-skia via:
yarn add react-native-skia - ran pod install via:
npx pod-install - ran app and got the above error.
- cleaned app via:
npx react-native-clean-project - reran app but still get the same error
Any ideas? Thank you in advance.
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.
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
Yea, I've ran pod install, pod install --repo-update, npx react-native-clean-project and npx pod-install multiple time.
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.
