Application gets hang after 10 mins due to drawing on canvas continuously

[praveen-angular]

HI Team,

I am using react-native canvas to plot sine-wave on mobile, after drawing on couple of instances application gets hang, when i monitor with profiler it shows memory usage exceed.

here is the code .

`import React from 'react';
import Canvas from 'react-native-canvas';
export default function CanvasComponent(): JSX.Element {
const ecgData = ["905,923,950,979,1033,1090,1157,1232,1320,1398,1495,1613,1736,1866,2011,2170,2331,2499,2683,2880,3085,3291,3490,3689,390,4123,4320,4503,4671,4815,4946,5048,5121,5172,5197,5195,5173,5111,5024,4924,4792,4637,4469,4283,4081,3878,3674,3451,3230,3018,2819,2606,2403,2213,2031,1868,1723,1558,1396,1254,1101,921,726,497,251,1"];
let ctx: any, gridCanvasContext: any;
let w: any,
h: any,
speed = 2,
scanBarWidth = 30,
i = 0;
let data: any = ecgData[0].split(','),
color = '#00ff00',
px = 0,
opx = 0,
py: any = h / 2,
opy = py;
const handleCanvas = (canvas: any) => {
ctx = canvas.getContext('2d');
w = canvas.width;
h = canvas.height;
ctx.strokeStyle = color;
ctx.lineWidth = 2; drawWave();
}
const drawWave = () => {
px += speed;
ctx.clearRect(px, 0, scanBarWidth, h);
ctx.beginPath();
ctx.moveTo(opx, opy);
ctx.lineJoin = 'round';
py = (data[++i >= data.length ? i = 0 : i++] / 450 + 10);
ctx.lineTo(px, py);
ctx.stroke();
opx = px;
opy = py;
ctx.closePath();
if (opx > w) { px = opx = -speed; }
requestAnimationFrame(drawWave);

}
return (

);

}`

Help me out is there anything needs to be added, i have seen that webview cache false condition is not kept in the react-native canvas