removeEventListener()

[myselfyy]

Hello, iddan, when I unMount my component, I get the error : "ExceptionsManager.js:65 Error: Image must be initialized with a Canvas instance".I think we should remove the Image load listener when I unmount the component in the ComponentWillUnMount function, but I dot't know how to do it,please give me a favor,thanks a lot!

[iddan]

Hey! Can you share your code so I could give an advice?

[myselfyy]

Yes!
The code is :

componentWillUnmount() {
       this.image.removeEventListener('load', this.renderImage);
       // window.removeEventListener('load', this.handleImageRect);
   }
   handleImageRect = (canvas) => {
       this.image = new CanvasImage(canvas);
       canvas.width = 312;
       canvas.height = 413;
       const context = canvas.getContext('2d');
       const that = this;
       this.image.src = 'https://image.freepik.com/free-vector/unicorn-background-design_1324-79.jpg';
       this.image.addEventListener('load', () => {
           context.drawImage(this.image, 0, 0, 312, 413);
           context.fillStyle = 'black';
           context.font = 13 + 'px PingFangSC-Regular';
           context.fillText('二零一八年 九月', 22, 30);
           context.font = 62 + 'px Didot';
           context.fillText('28', 22, 90);
           context.font = 62 + 'px Didot';
           context.fillText('一', 22, 150);
           context.font = 13 + 'px PingFangSC-Regular';
           context.fillText('我的金额：320', 22, 180);
           context.font = 13 + 'px PingFangSC-Regular';
           context.fillText('这是一条签语，预计可以放下二十八个汉字', 22, 300);
           context.font = 13 + 'px PingFangSC-Regular';
           context.fillText('---作者', 250, 330);
           const that = this;
           console.log('888', this.image);
           canvas.toDataURL('image/png').then((testImg) => {
               this.setState({
                   testImg: testImg
               })
           })
       });
   }
   render() {
       return <Canvas ref={this.handleImageRect} />
   }

when click the topLeft button , componentUnmounted, but the 'load' listener is always presence

[iddan]

It seems like removeEventListener() implementation is missing. It should be added here:

react-native-canvas/src/webview-binders.js

Line 101 in 983aa21

target.prototype.addEventListener = function(type, callback) {

[myselfyy]

OK, thanks a lot!
When do you update the removeEventListener function?

[iddan]

I'm not available to do this currently but very willing to guide for a PR.

[myselfyy]

OK!
Tanks a lot!

[SiJieMa]

I had the same problem.

[SiJieMa]

Hi iddan!You write so cool code ,but I can't understand it quickly.
My question is: Why is the component uninstalled and canvas. JS still running?
I hope you can solve this removeEventListene() bug.THANKS!

[iddan]

Hey SiJieMa, thank you for using React Native Canvas. Currently, the implementation misses a definition for the removeEventListener(). To implement it you should mimic the implementation of addEventListener(). As said before: I'm not available to do this currently but very willing to guide for a PR.

[SiJieMa]

Okay, I'll try to solve this problem these days.

[sergey-kompaniets]

@myselfyy, @SiJieMa, How did you solve this problem?