Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Warning: TypeError: Cannot read property 'bubblingEventTypes' of null #85

Open
basementuniverse opened this issue Jan 3, 2025 · 1 comment

Comments

@basementuniverse
Copy link

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 😃

@flyskywhy
Copy link
Owner

Maybe it's an Expo 52 bug ref to https://stackoverflow.com/a/79221264 , or ref to DylanVann/react-native-fast-image#1054

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants