TypeError: canvasEl.addEventListener is not a function

[hzuhyb]

Environment

Environment:
  OS: macOS Catalina 10.15.6
  Node: 10.16.0
  Yarn: 1.16.0
  npm: 6.9.0

Packages:
  "react": "16.13.1",
  "react-native": "0.63.2",
  "@antv/f2": "^3.7.7",
 "react-native-canvas": "^0.1.37"

Step to reproduce

https://github.com/chenshuai2144/f2-demo, I forked this demo to run, but got error: "TypeError: canvasEl.addEventListener is not a function"

[miss0401]

I also encountered this problem.

[vvizden]

excuse, have been resolved?

[vvizden]

I solved the problem by the following way:

const context = await canvas.getContext('2d');
chartRef.current = new F2.Chart({
    context,
    width: width,
    height: height,
});

[hzuhyb]

@vvizden Thank you for your reply. It worked according to your method, but there are still many problems with this library. Have you found a better library?

[likern]

@vvizden Thank you for your reply. It worked according to your method, but there are still many problems with this library. Have you found a better library?

Could you elaborate what kind of problems? I'm evaluating to use this library in React Native application.

[vvizden]

@vvizden Thank you for your reply. It worked according to your method, but there are still many problems with this library. Have you found a better library?

I recommend you give it up. I just used this lib with react-native-webview in the end. It works well.

List the problems i encountered:

1. react-native-canvas + @antv/f2

   react-native-canvas, it also seems to be based on the webview. Emmm, i'm not sure. When using const context = await canvas.getContext('2d'), i can get the 2d context, and can also new a F2.Chart instance. I thought it was all going well. But, when using pan and pinch interactions. An error occurred: document is not defined.So far, I haven't given up.I found the gcanvas lib and react-native-gcanvas based on gcanvas.

2. react-native-gcanvas + @antv/f2

   Note: This lib react-native-gcanvas is not maintained. @flyskywhy/react-native-gcanvas is the latest alternative library.

   By this way, the F2 lib works, but also exists some problems. gcanvas does not fully implement all the APIs of web canvas yet. For example, you have to implement the measureText() method. On the other hand, the pixelRatio: your devicePixelRatio doesn't work well. There is a demo, but you should replace react-native-gcanvas to @flyskywhy/react-native-gcanvas.

Good luck!