waveform-visualizer icon indicating copy to clipboard operation
waveform-visualizer copied to clipboard

Using with with React Native

Open Bayramito opened this issue 1 year ago • 1 comments

Is there a possibility to use this lib with react native?

would be great if i could draw this on

https://shopify.github.io/react-native-skia/docs/canvas/overview/

Bayramito avatar Jan 24 '24 08:01 Bayramito

hmmm good question, unfortunately I don't know... I have never used react native skia, so I can't tell for sure

I'm however using this library in a current project (that is not yet released) that uses react, so I can say for sure that it works with react (web)

my code looks like what is in the example I added to the readme: https://github.com/chrisweb/waveform-visualizer?tab=readme-ov-file#react-component-example some time ago

I quickly checked out the link you provided and I see they use react useRef too to create a canvasRef, so maybe what would work is to create the canvas using that library and then pass that ref to the waveform-visualizer for it to draw in it, which can be done like this:

waveform.setCanvasElement(canvasRef.current)

the problem I see, is that the waveform will always be drawn at a certain location but what you probably want is to position the waveform somewhere in your canvas, so what the waveform-visualizer probably needs is a way to set x,y coordinates (as origin) to tell it where it should start drawing

If you could write a small prototype and share it here, I would be willing to try and help finding a solution to make it work (no gurantee it is doable though, but as of now I see no reason why it would be impossible)

chrisweb avatar Jan 24 '24 17:01 chrisweb