-
Notifications
You must be signed in to change notification settings - Fork 23
Description
When I try to use the GCanvasView component in an Expo Go app and run it on my iOS device, I get the following error:
(NOBRIDGE) ERROR Warning: TypeError: Cannot read property 'bubblingEventTypes' of null
Steps to reproduce
I created a new app using:
npx create-expo-app game-test --template
and selected the Blank (TypeScript) template.
Then I installed the react-native-gcanvas dependency:
npm i @flyskywhy/react-native-gcanvas
Then I imported it and added the component in App.tsx:
import { GCanvasView } from '@flyskywhy/react-native-gcanvas';
export default function App() {
return (
<GCanvasView
onCanvasResize={() => {
console.log('resize');
}}
onCanvasCreate={() => {
console.log('create');
}}
onIsReady={() => {
console.log('ready');
}}
style={{
flex: 1,
}}
/>
);
}I also needed to create global.d.ts containing:
declare module '@flyskywhy/react-native-gcanvas';
just to stop TypeScript from complaining about missing typings.
Then run:
npx expo start
and scan the QR code using my iOS device which opens the app in Expo Go.
This appears in the terminal:
~/Projects/react-native/game-test(master*) $ npx expo start --clear
Starting project at /<path>/Projects/react-native/game-test
Starting Metro Bundler
warning: Bundler cache is empty, rebuilding (this may take a minute)
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
(QR code truncated)
› Metro waiting on exp://<ip address>:8081
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)
› Using Expo Go
› Press s │ switch to development build
› Press a │ open Android
› Press w │ open web
› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu
› shift+m │ more tools
› Press o │ open project code in your editor
› Press ? │ show all commands
Logs for your project will appear below. Press Ctrl+C to exit.
iOS Bundled 4690ms index.ts (710 modules)
(NOBRIDGE) LOG Bridgeless mode is enabled
INFO
💡 JavaScript logs will be removed from Metro in React Native 0.77! Please use React Native DevTools as your default tool. Tip: Type j in the terminal to open (requires Google Chrome or Microsoft Edge).
(NOBRIDGE) ERROR Warning: TypeError: Cannot read property 'bubblingEventTypes' of null
This error is located at:
in RCTGCanvasView (created by GCanvasView)
in GCanvasView (created by App)
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent)
(NOBRIDGE) ERROR Warning: TypeError: Cannot read property 'bubblingEventTypes' of null
This error is located at:
in RCTGCanvasView (created by GCanvasView)
in GCanvasView (created by App)
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent)
› Stopped server
For reference (package versions etc.), here's my package.json:
{
"name": "game-test",
"version": "1.0.0",
"main": "index.ts",
"scripts": {
"start": "expo start",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web"
},
"dependencies": {
"@flyskywhy/react-native-gcanvas": "^6.0.20",
"expo": "~52.0.23",
"expo-status-bar": "~2.0.0",
"react": "18.3.1",
"react-native": "0.76.5"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@types/react": "~18.3.12",
"typescript": "^5.3.3"
},
"private": true
}This seems like it might be related to Expo version 52 perhaps? I can't find any references to bubblingEventTypes in the react-native-gcanvas repo, but maybe I'm missing something or doing something wrong...
Has anyone else used react-native-gcanvas in an Expo Go app successfully?
I've tried all the other canvas implementations (mostly they're just hosting a <canvas> inside a WebView and passing messages between the app and the WebView) but they're slow, flickery when using requestAnimationFrame, and tend to crash the app after a few seconds (OOM I guess)... it'd be amazing to have some way of building almost-native games for Android/iOS using JS/TS!
Any help would be hugely appreciated! Thanks 😃